<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>图片上传预览</title>
<style>
.check_box{
position: relative;
width: 100px;
height: 100px;
margin: 20px;
display: flex;
flex-direction: row;
align-items: center;
}
#img_preview1{
display: block;
width: 100px;
height: auto;
}
input#zx_img1 {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
opacity: 0;
z-index: 9;
} </style>
</head> <body> <div class="check_box">
<img id="img_preview1" src="./images/add.png" alt="上传图片">
<input type="file" name="file" id="zx_img1" style="padding: 0px;" accept="image/jpeg, image/jpg, image/png, image/gif "
placeholder="&nbsp;上传文件">
</div>
<p>
图片大小支持50kb以内,支持拓展名:jpg,png,gif
</p> <!--引入jQuery插件 -->
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
<script>
$("#zx_img1").change(function (e) {
var file = e.target.files || e.dataTransfer.files;
if (file) { if (file[0] && (file[0].size / 1024).toFixed(0) > 50) {
console.log('你选择的文件太大,文件大小为:' + (file[0].size / 1024).toFixed(0) + "kb");
// return false
}
var reader = new FileReader();
reader.onload = function () {
console.log(this.result);
$("#img_preview1").attr("src", this.result);
}
reader.readAsDataURL(file[0]);
}
});
</script>
</body> </html>

H5 实现图片上传预览的更多相关文章

  1. 图片上传预览,兼容IE

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  3. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  4. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

  5. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  6. Javascript之图片上传预览

    使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaIma ...

  7. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  8. ASP.NET工作笔记之一:图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

  9. php 图片上传预览(转)

    网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

随机推荐

  1. 增强for、iterator迭代器

    因为初学java,对部分语法还模棱两可, 在做练习的时候,用增强for遍历字符串编译报错 所以来复习下增强for原理和适用范围 一.增强for概念 增强for(也成为for each循环)是JDK 1 ...

  2. 简单的bootstarp项目实例

    ===========index.html==============<!DOCTYPE html> <html> <head> <meta charset= ...

  3. Python Opencv安装环境搭建

    https://blog.csdn.net/weifenglin1997/article/details/78723544

  4. clusterware启动顺序——CRSD

    CRSD层面 1.启动过程 )导致">CRSD无法启动集群的应用程序资源的可能原因有:"> 原因:/etc/oracle/ocr.loc指向了错误的OCR文件 [gri ...

  5. Maven中遇到Unsupported major.minor version 51.0错误

    将错误复制到某度上,查询出结果显示JDK版本不匹配. 我按着步骤执行结束后还是有以下错误: 配置: Tomcat: 最终解决: 我在Initialize的时候使用的版本是JDK1.8的,导致的这个错误 ...

  6. MSBuild 命令参数

    Build a Visual Studio project or solution using MSBuild Command Line Arguments  常用命令行参数 详解: MSBuild ...

  7. Windows7上安装Ubuntu双系统

    零.前言 最近不小心把Ubuntu系统搞崩了打不开了,在网上找了找方法,从最初的步骤开始安装,本文是安装Ubuntu16.04,不过安装啥版本步骤都一样,下面逐一介绍. 一.如何卸载Ubuntu(第一 ...

  8. 共有和私有、name mangling

    1.在python中可以在变量和函数名前加上双下划线—‘’__‘’来实现其伪私有(实际上python中没有Private属性的),加上双下划线后,外部对象不能通过调用其名称直接获得对象的属性或操作. ...

  9. 树莓派外网ssh访问holer实现篇

    外网ssh访问树莓派 内网的树莓派(Raspberry Pi),只能在局域网内访问,怎样从公网也能ssh登录访问树莓派? 本文将介绍使用holer实现的具体步骤. 1. 准备工作 1.1 安装并启动树 ...

  10. win7安装python3.6.1及scrapy

    ---恢复内容开始--- 第一篇博客,记录自己自学python的过程及问题. 首先下载python3.6.1及所需资料 百度云:https://pan.baidu.com/s/1geOEp6z 密码: ...