html5以及jQuery实现本地图片上传前的预览代码实例讲解

 4518

这篇文章主要介绍了html5以及jQuery实现本地图片上传前的预览代码实例讲解,图文代码实例讲解的很清晰,有感兴趣的同学可以研究下

html5以及jQuery实现本地图片上传前的预览,效果类似如下:

选择图片前的页面:

6040a7e4ee9c7.png

选择图片之后的预览效果:

6040a813ce0ca.png


下面直接上代码(只是最简单的实现代码,css样式没有复制,自己随意发挥)

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.     <title>HTML5上传图片预览</title> 
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  6.     <script src="https://www.jb51.net/ajaxjs/jquery-1.6.2.min.js"></script> 
  7. </head> 
  8. <body> 
  9. ...
  10. <form name="form0" id="form0" > 
  11.     <!-- 这里特别说一下这个 multiple="multiple" 添加上这个之后可以一次选择多个文件进行上传,是 html5 的新属性--> 
  12.     <input type="file" name="file0" id="file0" multiple="multiple" /><br><img src="" id="img0" > 
  13. </form> 
  14. ...
  15. <script> 
  16. $("#file0").change(function(){ 
  17.     // getObjectURL是自定义的函数,见下面 
  18.     // this.files[0]代表的是选择的文件资源的第一个,因为上面写了 multiple="multiple" 就表示上传文件可能不止一个 
  19.     // ,但是这里只读取第一个 
  20.     var objUrl = getObjectURL(this.files[0]) ; 
  21.     // 这句代码没什么作用,删掉也可以 
  22.     // console.log("objUrl = "+objUrl) ; 
  23.     if (objUrl) { 
  24.         // 在这里修改图片的地址属性 
  25.         $("#img0").attr("src", objUrl) ; 
  26.     } 
  27. }) ; 
  28. //建立一個可存取到該file的url 
  29. function getObjectURL(file) { 
  30.     var url = null ; 
  31.     // 下面函数执行的效果是一样的,只是需要针对不同的浏览器执行不同的 js 函数而已 
  32.     if (window.createObjectURL!=undefined) { // basic 
  33.         url = window.createObjectURL(file) ; 
  34.     } else if (window.URL!=undefined) { // mozilla(firefox) 
  35.         url = window.URL.createObjectURL(file) ; 
  36.     } else if (window.webkitURL!=undefined) { // webkit or chrome 
  37.         url = window.webkitURL.createObjectURL(file) ; 
  38.     } 
  39.     return url ; 
  40. } 
  41. </script> 
  42. </body> 
  43. </html>


本文网址:https://www.zztuku.com/detail-8698.html
站长图库 - html5以及jQuery实现本地图片上传前的预览代码实例讲解
申明:如有侵犯,请 联系我们 删除。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    编辑推荐