jQuery+HTML5实现图片上传前预览效果
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
本文实例讲述了jQuery+HTML5实现图片上传前预览效果。分享给大家供大家参考。具体如下:
这里主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,实现图片预览功能。请选择支持HTML API的浏览器,比如谷歌Chrome和火狐等。
运行效果如下图所示:
在线演示地址如下:
http://demo.jb51.net/js/2015/jquery-html5-pic-upload-pre-view-codes/
具体代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8" > <script src= "jquery-1.6.2.min.js" ></script> </head> <body> <h3>请选择图片文件:JPG/GIF</h3> <form name= "form0" id= "form0" > <input type= "file" name= "file0" id= "file0" multiple= "multiple" /><br> <img src= "" id= "img0" > </form> <script> $( "#file0" ).change( function (){ var objUrl = getObjectURL( this .files[0]) ; console.log( "objUrl = " +objUrl) ; if (objUrl) { $( "#img0" ).attr( "src" , objUrl) ; } }) ; //建立一個可存取到該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 ; } </script> </body> </html> |
希望本文所述对大家的jquery程序设计有所帮助。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
相关文章
如何从jQuery的ajax请求中删除X-Requested-With
X-Requested-With常用于判断是不是ajax请求,ajax请求中删除X-Requested-With的方法如下,感兴趣的朋友可以参考下2013-12-12Jquery Ajax学习实例7 Ajax所有过程事件分析示例
JQuery在执行Ajax的过程中会触发很多事件。2010-03-03
最新评论