实用插件（十）ajax图片上传插件——fileupload

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了实用插件（十）ajax图片上传插件——fileupload，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

前言

刚开始使用的是ajaxFileUpload插件，但是按照其他人的博文所说，直接使用data来传入参数，会报错跨域。如图： @H_301_3@

已经尝试网上各种方法，然而都是徒劳，比如修改域名，修改jsonp，修改ajaxFileUpload.js的代码…… @H_301_3@ 表示很绝望！！！希望看见本博文的大神多多指教，感谢！

ajaxFileUpload实现原理： @H_301_3@ 它是动态的去创建一个iframe和一个form，然后clone（克隆）页面中的到这个form中，之后提交这个动态创建的form，这样后台就能知道你想上传的文件是什么了，返回的内容显示到动态iframe中，更重要的是这是一个无刷新的上传！。

换新插件—

fileupload（jQuery File Upload）

1.下载 fileupload插件 @H_301_3@ 2.用法：引入两个js文件

  1. <script src="js/vendor/jquery.ui.widget.js"></script>
  2. <script src="js/jquery.fileupload.js"></script>

3.demo

  1. <html>
  2. <head>
  3.     <Meta charset="UTF-8">
  4.     <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
  5.     <!-- <script src="js/ajaxfileupload.js" type="text/javascript"></script> -->
  6.     <script src="js/vendor/jquery.ui.widget.js"></script>
  7.     <script src="js/jquery.fileupload.js"></script>
  8.  
  9. </head>
  10. <body>
  11. <p><input type="file" id="file1" name="file" multiple/></p>
  12. <input type="button" value="上传" id="btn1"/>
  13. <p><img id="img1" alt="上传成功啦" src="" /></p>
  14. <a id="btn2" >获取图片</a>
  15.  
  16. <script type="text/javascript"> var token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1MTYwNjIxNTEsImhlYWRwaG90byI6Imh0dHA6Ly9zdGF0aWMwMi5qeWp5YXBwLmNvbS9oZC8yMDE3LTA4LTAxLzE1ZjRhZWQzLTU0Y2ItNDE4ZS05YmZiLWYzODViNWM3ZGM0YV9uZXcucG5nIiwiY21zdXNlcmlkIjoiMjUiLCJsb2dvdXJsIjoiaHR0cDovL25jcnN0YXRpYy5vc3MtY24taGFuZ3pob3UuYWxpeXVuY3MuY29tL2p5anlpbWFnZS9uZXdzLzIwMTcwMzI1LzAyNDkxZTEzLWZkZTgtNDM3ZS05MDFhLWYyMWMzNmUxZmRlNC5wbmciLCJvcmdpZCI6IjE2MSIsIm5hbWUiOiLmlZnluIg2NCIsInNpdGVpZCI6IjIxNSIsInNjaG9vbGd1aWQiOiIzYTZlYjBlNjIzMzQxMWU3YThlYzAwMTU1ZDAwZDIwYSIsInNpdGV1cmwiOiJodHRwOi8vY21zLW5qLW5ldy5vYXRlc3Quc3ouY29tOjM5ODAvb2EtY21zLW5qIn0.NiP-V2VQKbuUNMvZtNv0Aat-lF6GHzmJA14mYXxTAZo"; $(function () { $("#file1").click(function () { if ($("#file1").val().length > 0) { ajaxFileUpload1(); } else { alert("请选择图片"); } }) }) function ajaxFileUpload1() { $('#file1').fileupload({ url: 'http://192.168.0.217:3088/oa-room-booking/app/picture/upload.htm',sequentialUploads: true,formData: { "noteId":"485","token":token } }); var filesList = $('#file1').prop('files'); var jqXHR = $('#file1').fileupload('send',{files: filesList}) .success(function (result,textStatus,jqXHR) { console.log(result.showfilename); console.log(result.imgPath); $("#img1").attr("src",result.imgPath); }) .error(function (jqXHR,errorThrown) { console.log(result); console.log(textStatus); console.log(jqXHR); }) /* .complete(function (result,jqXHR) { console.log(result); console.log(textStatus); console.log(jqXHR); })*/ ; } </script>
  17. </body>
  18.  
  19. </html>

4.配置API

点我查看详细API

上传后预览插件imgUp

用法：

1.1.imgUp.js插件源码：

  1. $(function(){
  2.     var delParent;
  3.     var defaults = {
  4.         fileType         : ["jpg","png","bmp","jpeg"],// 上传文件的类型
  5.         fileSize         : 1024 * 1024 * 10                  // 上传文件的大小 10M
  6.     };
  7.         /*点击图片的文本框*/
  8.     $(".file").change(function(){
  9.         var idFile = $(this).attr("id");
  10.         var file = document.getElementById(idFile);
  11.         var imgContainer = $(this).parents(".z_photo"); //存放图片的父亲元素
  12.         var fileList = file.files; //获取的图片文件
  13.         console.log(fileList+"======filelist=====");
  14.         var input = $(this).parent();//文本框的父亲元素
  15.         var imgArr = [];
  16.         //遍历得到的图片文件
  17.         var numUp = imgContainer.find(".up-section").length;
  18.         var totalNum = numUp + fileList.length;  //总的数量
  19.         if(fileList.length > 5 || totalNum > 5 ){
  20.             alert("上传图片数目不可以超过5个，请重新选择");  //一次选择上传超过5个 或者是已经上传和这次上传的到的总数也不可以超过5个
  21.         }
  22.         else if(numUp < 5){
  23.             fileList = validateUp(fileList);
  24.             for(var i = 0;i<fileList.length;i++){
  25.              var imgUrl = window.URL.createObjectURL(fileList[i]);
  26.                  imgArr.push(imgUrl);
  27.              var $section = $("<section class='up-section fl loading'>");
  28.                  imgContainer.prepend($section);
  29.              var $span = $("<span class='up-span'>");
  30.                  $span.appendTo($section);
  31.  
  32.              var $img0 = $("<img class='close-upimg'>").on("click",function(event){
  33.                     event.preventDefault();
  34.                     event.stopPropagation();
  35.                     $(".works-mask").show();
  36.                     delParent = $(this).parent();
  37.                 });   
  38.                 $img0.attr("src","img/a7.png").appendTo($section);
  39.              var $img = $("<img class='up-img up-opcity'>");
  40.                  $img.attr("src",imgArr[i]);
  41.                  $img.appendTo($section);
  42.              var $p = $("<p class='img-name-p'>");
  43.                  $p.html(fileList[i].name).appendTo($section);
  44.              var $input = $("<input id='taglocation' name='taglocation' value='' type='hidden'>");
  45.                  $input.appendTo($section);
  46.              var $input2 = $("<input id='tags' name='tags' value='' type='hidden'/>");
  47.                  $input2.appendTo($section);
  48.  
  49.            }
  50.         }
  51.         setTimeout(function(){
  52.              $(".up-section").removeClass("loading");
  53.              $(".up-img").removeClass("up-opcity");
  54.          },450);
  55.          numUp = imgContainer.find(".up-section").length;
  56.         if(numUp >= 5){
  57.             $(this).parent().hide();
  58.         }
  59.  
  60.         //input内容清空
  61.         $(this).val("");
  62.     });
  63.  
  64.  
  65.  
  66.     $(".z_photo").delegate(".close-upimg","click",function(){
  67.           $(".works-mask").show();
  68.           delParent = $(this).parent();
  69.     });
  70.  
  71.     $(".wsdel-ok").click(function(){
  72.         $(".works-mask").hide();
  73.         var numUp = delParent.siblings().length;
  74.         if(numUp < 6){
  75.             delParent.parent().find(".z_file").show();
  76.         }
  77.          delParent.remove();
  78.  
  79.     });
  80.  
  81.     $(".wsdel-no").click(function(){
  82.         $(".works-mask").hide();
  83.     });
  84.  
  85.         function validateUp(files){
  86.             var arrFiles = [];//替换的文件数组
  87.             for(var i = 0,file; file = files[i]; i++){
  88.                 //获取文件上传的后缀名
  89.                 var newStr = file.name.split("").reverse().join("");
  90.                 if(newStr.split(".")[0] != null){
  91.                         var type = newStr.split(".")[0].split("").reverse().join("");
  92.                         console.log(type+"===type===");
  93.                         if(jQuery.inArray(type,defaults.fileType) > -1){
  94.                             // 类型符合，可以上传
  95.                             if (file.size >= defaults.fileSize) {
  96.                                 alert(file.size);
  97.                                 alert('您这个"'+ file.name +'"文件大小过大');    
  98.                             } else {
  99.                                 // 在这里需要判断当前所有文件中
  100.                                 arrFiles.push(file);    
  101.                             }
  102.                         }else{
  103.                             alert('您这个"'+ file.name +'"上传类型不符合');   
  104.                         }
  105.                     }else{
  106.                         alert('您这个"'+ file.name +'"没有类型,无法识别');    
  107.                     }
  108.             }
  109.             return arrFiles;
  110.         }   
  111. })

1.2 imgUp.css

  1. /*上传图片插件的样式*/
  2. .img-Box{ margin-top: 40px; }
  3. .img-Box .up-p{ margin-bottom: 20px; font-size: 16px; color: #555; }
  4. .z_photo{ padding: 18px; border:2px dashed #E7E6E6; /*padding: 18px;*/ }
  5. .z_photo .z_file{ position: relative; }
  6. .z_file  .file{ width: 100%; height: 100%; opacity: 0; position: absolute; top: 0px; left: 0px; z-index: 100; }
  7. .z_photo .up-section{ position: relative; margin-right: 20px; margin-bottom: 20px; }
  8. .up-section .close-upimg{ position: absolute; top: 6px; right: 8px; display: none; z-index: 10; }
  9. .up-section .up-span{ display: block; width: 100%; height: 100%; visibility: hidden; position: absolute; top: 0px; left: 0px; z-index: 9; background: rgba(0,0,.5); }
  10. .up-section:hover{ border: 2px solid #f15134; }
  11. .up-section:hover .close-upimg{ display: block; }
  12. .up-section:hover .up-span{ visibility: visible; }
  13. .z_photo .up-img{ display: block; width: 100%; height: 100%; }
  14. .loading{ border: 1px solid #D1D1D1; background:url(../img/loading.gif) no-repeat center; }
  15. .up-opcity{ opacity: 0; }
  16. .img-name-p{ display: none; }
  17. .upimg-div .up-section { width: 190px; height: 180px; }
  18. .img-Box .upimg-div .z_file { width: 190px; height: 180px; }
  19. .z_file .add-img { display: block; width: 190px; height: 180px; }
  20. /*遮罩层样式*/
  21. .mask{ z-index: 1000; display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0,.4); }
  22. .mask .mask-content{ width: 500px; position: absolute; top: 50%; left: 50%; margin-left: -250px; margin-top: -80px; background: white; height: 160px; text-align: center; }
  23. .mask .mask-content .del-p{ color: #555; height: 94px; line-height: 94px; font-size: 18px; border-bottom: 1px solid #D1D1D1; }
  24. .mask-content .check-p{ height: 66px; line-height: 66px; position: absolute; bottom: 0px; left: 0px; width: 100%; }
  25. .mask-content .check-p span{ width: 49%; display:inline-block; text-align: center; color:#d4361d ; font-size: 18px; }
  26. .check-p .del-com{ border-right: 1px solid #D1D1D1; }

2.用法：引入1个css文件、1个js文件

  1. <link rel="stylesheet" href="../css/imgUp.css"/>
  2. <script src="../js/imgUp.js"></script>

3.效果图：

PS:imgUp.js需要配合fileupload一起使用（imgUp.js配合imgplugj.s也可以上传图片，但是不方便传多个参数） @H_301_3@ 例如（配合fileupload）：

  1. var NO = 3;//最多可以上传NO张图片
  2. $(function(){
  3.     var delParent;
  4.     var defaults = {
  5.         fileType         : ["jpg",// 上传文件的类型
  6.         fileSize         : 1024 * 1024 * 10                  // 上传文件的大小 10M
  7.     };
  8.         /*点击图片的文本框*/
  9.     $("#file1").change(function(){
  10.  
  11.         if($(this).attr("data-NO")){
  12.             NO = $(this).attr("data-NO");
  13.         }
  14.         console.log("最多可以上传张数：",NO)
  15.         var idFile = $(this).attr("id");
  16.         var file = document.getElementById(idFile);
  17.         var imgContainer = $(this).parents(".z_photo"); //存放图片的父亲元素
  18.         var fileList = file.files; //获取的图片文件
  19.         console.log(fileList+"======filelist=====");
  20.         var input = $(this).parent();//文本框的父亲元素
  21.         var imgArr = [];
  22.         //遍历得到的图片文件
  23.         var numUp = imgContainer.find(".up-section").length;
  24.         var totalNum = numUp + fileList.length;  //总的数量
  25.         if(fileList.length > NO || totalNum > NO ){
  26.             alert("上传图片数目不可以超过"+NO+"个，请重新选择");  //一次选择上传超过5个 或者是已经上传和这次上传的到的总数也不可以超过5个
  27.         }
  28.         else if(numUp < NO){
  29.  
  30.             fileList = validateUp(fileList);
  31.             for(var i = 0;i<fileList.length;i++){
  32.              var imgUrl = window.URL.createObjectURL(fileList[i]);
  33.                  imgArr.push(imgUrl);
  34.              var $section = $("<section class='up-section fl loading'>");
  35.                  imgContainer.prepend($section);
  36.              var $span = $("<span class='up-span'>");
  37.                  $(".z_file").before($section);
  38.  
  39.              var $img0 = $("<img class='close-upimg'>").on("click",function(event){//点击删除按钮
  40.                     event.preventDefault();
  41.                     event.stopPropagation();
  42.                     $(".works-mask").show();
  43.                     delParent = $(this).parent();
  44.  
  45.  
  46.                      $(".wsdel-ok").attr("data-uuid",$(this).attr("data-uuid"));//把随机标志符绑定到确定按钮上
  47.  
  48.  
  49.                 });   
  50.                 $img0.attr("src","img/a7.png").css("width","15px").appendTo($section);
  51.             //根据项目修改
  52.  
  53.              var $img = $("<img class='up-img up-opcity'>");
  54.                  $img.attr("src",imgArr[i]);
  55.  
  56.              /*var $a = $("<a></a>"); $img.appendTo($a); $a.attr("href",imgArr[i]);*/
  57.                  $img.appendTo($section);
  58.              var $p = $("<p class='img-name-p'>");
  59.                  $p.html(fileList[i].name).appendTo($section);
  60.              var $input = $("<input id='taglocation' name='taglocation' value='' type='hidden'>");
  61.                  $input.appendTo($section);
  62.              var $input2 = $("<input id='tags' name='tags' value='' type='hidden'/>");
  63.                  $input2.appendTo($section);
  64.  
  65.            }
  66.             //上传图片
  67.             ajaxFileUpload1($(this).attr("data-type"));//在此处调用fileupload插件！！！
  68.  
  69.  
  70.         }
  71.         setTimeout(function(){
  72.              $(".up-section").removeClass("loading");
  73.              $(".up-img").removeClass("up-opcity");
  74.          },450);
  75.          numUp = imgContainer.find(".up-section").length;
  76.         if(numUp >= NO){
  77.             $(this).parent().hide();
  78.         }
  79.  
  80.         //input内容清空
  81.         $(this).val("");
  82.  
  83.  
  84.     });
  85.  
  86.  
  87.  
  88.     $(".z_photo").delegate(".close-upimg",function(){
  89.           $(".works-mask").show();
  90.           delParent = $(this).parent();
  91.  
  92.     });
  93.  
  94.     $(".wsdel-ok").click(function(){//确定删除
  95.         $(".works-mask").hide();
  96.         var numUp = delParent.siblings().length;
  97.         if(numUp < (NO+3)){
  98.             delParent.parent().find(".z_file").show();
  99.         }
  100.          delParent.remove();//删除图片
  101.  
  102.          //把该图片的标志符从数组中移除
  103.          uuids.remove($(this).attr("data-uuid"));
  104.          console.log("删除后的uuids：",uuids);
  105.          setCookie("uuids",uuids);
  106.          //发请求把该图片从数据库中删除
  107.          $.ajax({
  108.                  url: base+'/app/picture/delPicture.htm',type: 'POST',data: {
  109.                      "uuid":$(this).attr("data-uuid"),"token":token
  110.                  },success: function (res) {
  111.                      if(res.code == '0'){
  112.                          console.log(res);
  113.                      }
  114.                  }
  115.              });
  116.  
  117.     });
  118.  
  119.     $(".wsdel-no").click(function(){
  120.         $(".works-mask").hide();
  121.     });
  122.  
  123.         function validateUp(files){
  124.             var arrFiles = [];//替换的文件数组
  125.             for(var i = 0,无法识别');    
  126.                     }
  127.             }
  128.             return arrFiles;
  129.         }
  130.  
  131.  
  132. })
  133.  
  134.  var uuids = new Array();
  135.  
  136.  function ajaxFileUpload1(a,b) {
  137.  
  138.     var nid = $("#nid").attr("data-id");
  139.     if(!$("#nid").attr("data-id")){
  140.         nid = $(".endinput").attr("data-id");
  141.     }
  142.  
  143.     var guid = new GUID();
  144.     var uuid = guid.newGUID();
  145.     uuids.push(uuid);//随机字符串组成的数组
  146.     console.log("本次添加的uuid：",uuid);
  147.     console.log("添加后的uuids：",uuids);
  148.     setCookie("uuids",666);
  149.  
  150.     $(".z_photo").attr("data-uuid",uuids);//父容器 绑定 所有的随机字符串组成的数组
  151.     $(".z_photo .close-upimg:first").attr("data-uuid",uuid);//关闭按钮 绑定 对应图片的随机字符串
  152.     //uuid = null;
  153.  
  154.         $("#file1").fileupload({
  155.             url: base+'/app/picture/upload.htm',//async: false,
  156.             sequentialUploads: true,formData: {
  157.                 "uuid":uuid,"noteId":nid,"type":a,"token":token
  158.             }
  159.         });
  160.  
  161.         var filesList = $("#file1").prop('files');
  162.  
  163.         var jqXHR = $("#file1").fileupload('send',{files: filesList})
  164.                 .success(function (result,jqXHR) {
  165.                     console.log(result.showfilename);
  166.                     console.log(result.imgPath);
  167.  
  168.                      //$(".z_photo").find(".up-img").wrap('<a href="'+result.imgPath+'"></a');
  169.                      //$(".pics a").photoSwipe();
  170.  
  171.                 })
  172.                 .error(function (jqXHR,errorThrown) {
  173.                     console.log(result);
  174.                     console.log(textStatus);
  175.                     console.log(jqXHR);
  176.                 })
  177.                /* .complete(function (result,jqXHR) { console.log(result); console.log(textStatus); console.log(jqXHR); })*/
  178.                 ;
  179.     }

备注：此例子中，fileupload并没有用到success返回的图片，预览的图片实际上是用的imgUp插件直接从本地获取的图片。 @H_301_3@ 换言之，此例子中，fileupload只是单纯的上传，无须返回；imgUp只负责获取本地图片并展示。

补充： @H_301_3@ jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。

jQuery File Upload有多个文件选择，拖放上传控件拖放支持，进度条，验证和预览图像，音频和视频 。

支持跨域，分块和可恢复的文件上传和客户端图像大小调整。适用于任何服务器端平台（PHP,Python,Ruby on Rails,Java,Node.js,Go etc.） ，支持标准的HTML表单文件上传。

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作