jquery实现图片上传前本地预览功能
更新时间：2016年05月10日 11:09:49 作者：Sabrina_TSM
这篇文章主要为大家详细介绍了基于jquery实现图片上传前本地预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jquery实现图片上传前预览的具体代码，供大家参考，具体内容如下
介绍之前有一个小问题，一直找不到图片预览时，图片不出来的原因，原来在于图片的路径！！！一直写的是图片的本地路径，没有什么用。直接上代码。
html部分：
复制代码 代码如下:
<img id="pic" src="" >
<input id="upload" name="file" accept="image/*" type="file" style="display: none"/>
<input id="upload" name="file" accept="image/*" type="file" style="display: none"/>
input:file事件是上传类型
较常用的属性值如下：
accept：表示可以选择的文件MIME类型，多个MIME类型用英文逗号分开，常用的MIME类型见下表。
若要支持所有图片格式，则写 * 即可。
multiple：是否可以选择多个文件，多个文件时其value值为第一个文件的虚拟路径
input:file的样式是不变的，所以若要改变它的样式，首先将它隐藏。display:none;
CSS部分：
因为做的是一个圆形的头像，所以对图片样式先进行定义。
#pic{
width:100px;
height:100px;
border-radius:50% ;
margin:20px auto;
cursor: pointer;
}
jQuery部分：
$(function() {
$("#pic").click(function () {
$("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
$("#upload").on("change",function(){
var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径
if (objUrl) {
$("#pic").attr("src", objUrl) ; //将图片路径存入src中，显示出图片
}
});
});
});
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
运行结果如下：
更多精彩内容，请点击《jQuery上传操作汇总》，《ajax上传技术汇总》进行深入学习和研究。
以上就是本文的全部内容，希望对大家学习jquery程序有所帮助。
相关文章
jQuery.getScript加载同域JS为xhr请求，导致firebug不能正常读取js，因此不能够断点该js2012-02-02
下面小编就为大家带来一篇设置jquery UI 控件的大小方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
这篇文章主要介绍了jQuery操作iframe中js函数的方法,结合实例形式总结分析了jQuery操作iframe中的元素、函数常用方法与注意事项,具有一定参考借鉴价值,需要的朋友可以参考下2016-07-07
这篇文章主要介绍了jquery中ajax处理跨域的三大方式，感兴趣的小伙伴们可以参考一下2016-01-01
本篇文章主要是对jquery取消选择select下拉框示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
这篇文章主要介绍了使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
这篇文章主要介绍了jqgrid实现简单的单行编辑功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
这篇文章主要介绍了jQuery语法小结(超实用)，涉及到jquery语法相关知识，对jquery语法相关知识感兴趣的朋友一起学习吧2015-12-12
本文给大家介绍的是一段十分实用的代码，使用jQuery实现勾选复选框触发事件给input赋值，在制作项目的时候经常需要用到此功能，这里分享给大家。2015-02-02
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
这篇文章主要介绍了jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
最新评论