jquery实现图片上传前的本地预览功能

本文分享jquery在上传前预览图片的具体代码，供大家参考。具体内容如下。之前有个小问题。当没有找到图像的预览时，图像没有出来的原因是图像的路径！一直写图片的局部路径是没有用的。直接编码。

Html部分：

复制代码如下： img id=' pic' src=' http: '输入id=' upload ' name=' file ' accept=' image/* ' type=' file ' style=' display : none '/

input:file事件的属性值常用于上传类型如下：accept:表示可以选择的文件的MIME类型，多个MIME类型之间用英文逗号隔开。常见的MIME类型见下表。要支持所有图片格式，只需写*。多个：是否可以选择多个文件。当选择多个文件时，该值是第一个文件的虚拟路径。

input:file的样式是不变的，所以如果你想改变它的样式，先隐藏它。display:none

CSS部分：因为是圆形头像，所以先定义画面风格。

# pic { width:100px高度：100 px；边界半径：50%；margin:20px汽车；cursor:指针；}jQuery部分：

$(function() { $('#pic '))。单击(function () { $('#upload '))。单击()；//隐藏input:file文件样式后，点击头像上传$ ('# upload ')。本地on ('change '，function(){ varobjurl=getobjecturl(this . files[0])；//获取图片的路径，不是图片的本地路径if (objurl) {$ ('# pic ')。attr ('src '，objurl)；//将图片路径保存到src并显示图片} })；});});//创建一个可以访问该文件的URL。函数getobjecturl(文件){ var URL=nullif (window.createObjectURL！=未定义){ //基本url=window.createObjectURL(文件)；} else if(窗口。网址！=undefined){//Mozilla(Firefox)URL=window。URL.createObjectURL(文件)；} else if (window.webkitURL！=未定义){ //webkit或chrome URL=window . webkiturl . createobjecturl(文件)；}返回url}运行结果如下：

更多精彩内容，请点击《jQuery上传操作汇总》、《ajax上传技术汇总》深入学习研究。

以上就是本文的全部内容，希望对大家学习jquery有所帮助。