夏日博客

A-A+

H5+JQUERY实现图片上传实时预览

2019年09月30日 前端设计 暂无评论 阅读 0 views 次

要做一个正反面的图片时时上传预览的功能，THINKPHP的后台逻辑代码都已经写好了，只差一个H5+jquery实时预览的代码了，平时写JS的代码比较少，所以只能从网上摘抄了，下面的代码是一个独立的H5+jquery实时图片上传显示，如果要上传身份证正反面两张图片的话，直接把JQ代码重新复制一份逻辑就可以了，代码如下：

  1. <html>  
  2. <head>  
  3. <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  
  4. </head>  
  5. <body>  
  6.   
  7. <input id="fileupload" type="file" multiple="multiple" />  
  8. <hr />  
  9. <b>Live Preview</b>  
  10. <br />  
  11. <br />  
  12. <div id="dvPreview">  
  13. </div>  
  14. <br />  
  15. <hr />  
  16.   
  17.   
  18. <script language="javascript" type="text/javascript">  
  19. $(function () {  
  20.     $("#fileupload").change(function () {  
  21.         if (typeof (FileReader) != "undefined") {  
  22.             var dvPreview = $("#dvPreview");  
  23.             dvPreview.html("");  
  24.             var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;  
  25.             $($(this)[0].files).each(function () {  
  26.                 var file = $(this);  
  27.                 if (regex.test(file[0].name.toLowerCase())) {  
  28.                     var reader = new FileReader();  
  29.                     reader.onload = function (e) {  
  30.                         var img = $("<img />");  
  31.                         img.attr("style", "height:100px;width: 100px");  
  32.                         img.attr("src", e.target.result);  
  33.                         dvPreview.append(img);  
  34.                     }  
  35.                     reader.readAsDataURL(file[0]);  
  36.                 } else {  
  37.                     alert(file[0].name + " is not a valid image file.");  
  38.                     dvPreview.html("");  
  39.                     return false;  
  40.                 }  
  41.             });  
  42.         } else {  
  43.             alert("This browser does not support HTML5 FileReader.");  
  44.         }  
  45.     });  
  46. });  
  47. </script>  
  48.   
  49.   
  50.   
  51. </body>  
  52. </html>  

jquery.min.js 的文件一定要有，可以下载到自己的本地，也可以直接使用JQ远程代码，一定要保证存在即可，测试这段代码可以保存H5页面，然后普通浏览器测试即可。

标签：

给我留言