本文实例讲述了jQuery HTML5实现图片上传前预览效果。分享给大家供大家参考。具体如下：

这里主要是使用HTML5的文件原料药，建立一個可存取到该文件的url，一个空的img标签，标识为img0，把选择的文件显示在img标签中，实现图片预览功能。请选择支持超文本标记语言应用编程接口的浏览器，比如谷歌铬和火狐等。

运行效果如下图所示：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-html 5-pic-上传-预查看-代码/

具体代码如下：

！DOCTYPE htmlhtmlheadtitleHTML5上传图片预览/title meta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8 '脚本src=' http : jquery-1。6 .2 .量滴js '/脚本/头dyh 3请选择图片文件：JPG/GIF/H3表单名称='表单0 ' id='表单0 '输入类型=' file ' name=' file 0 ' id=' file 0 ' multiple=' multiple '/brimg src=' http : ' id=' img 0 '/form script $(' # file 0 ').change(function(){ var objUrl=getObjectURL(this。文件[0])；控制台。log(' Objurl=' Objurl ')；if (objUrl) { $('#img0 ').attr('src '，Objurl)；}}) ;//建立一個可存取到該文件的urlfunction getObjectURL(文件){ var URL=null if(window . createobjecturl！=未定义){ //基本url=window.createObjectURL(文件);} else if(窗口。网址！=未定义){//Mozilla(Firefox)URL=window .URL.createObjectURL(文件);} else if (window.webkitURL！=未定义){ //webkit或chrome URL=窗口。webkiturl。createobjecturl(文件);}返回url}/脚本/正文/html希望本文所述对大家的jquery程序设计有所帮助。