jquery mehrere Dateien hochladen, bitte korrigieren Sie mich-js-Tutorial-php.cn

jquery mehrere Dateien hochladen, bitte korrigieren Sie mich

巴扎黑

Freigeben： 2017-06-26 14:22:58

Original

1129 Leute haben es durchsucht

Vor kurzem arbeitete das Unternehmen an einem Projekt, bei dem mehrere Bild-Uploads verwendet wurden. Ich stellte fest, dass es nur sehr wenige Online-Tutorials gab, also habe ich selbst ein Upload-JS geschrieben. Dieses Ding kann nicht nur Es ist auch möglich, Bilder, aber auch Dateien hochzuladen, aber das Bild wird bei der Vorschau nicht angezeigt

Gehen Sie zuerst zur Rezeption, um den Code abzurufen

 1 <!DOCTYPE html> 2 <html> 3 <head> 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5     <title></title> 6     <script src="Scripts/jquery-1.8.2.min.js?1.1.11"></script> 7     <script src="Scripts/cs.js?1.1.11"></script> 8     <link href="Scripts/tpsc.css?1.1.11" rel="stylesheet" /> 9     <script>10 11         $(function () {12 13             $.tpsc({14                 id: "xinyang",15                 url: "Content/jieshou.ashx",16                 tpcall: function(thefile)  //图片每加载一张,会调用一次,注意:此处不能使用alert()等阻塞方法,只允许存在单引号,双引号会被转义17                 {18                     $('.li_xinyang').mouseenter(function () {19                         $(this).find('span').show();20                     }).mouseleave(function () {21                         $(this).find('span').hide();22                     });23                 },24                 success: function(data)  //上传成功后的回调方法25                 {26                     alert(data);27                 },28                 error:function(data)  //上传失败的回调方法29                 {30                     alert(data);31                 }32             });33 34         });35     </script>36 </head>37 <body>38    39     <div id="xinyang" >40 41       42 43     </div>44 </body>45 </html>

Nach dem Login kopieren

Das Folgende ist das hochgeladene js

Idee: Fügen Sie alle hochgeladenen Bilder in ein Array ein und Verwenden Sie FileReader(), um die Bilder anzuzeigen, damit Sie sie vor dem Hochladen anzeigen können. Zeigen Sie einfach, wie das Bild aussieht

  1  var object = {  2     id: "",   //div的id,需要绑定的div  3     url: "", //上传的后台地址  4     //上传文件类型,图片or 文件  , 涉及后面展示的样式不同  5     //是否可以多选  6     tpcall:function(data){}, //图片上传完成后的回调函数  7     success: function (data) { },   //成功的方法,回调函数  8     error: function (err) { }     //失败的方法,回调函数  9 } 10  11 var fdata = new FormData();  //上传文件用,把文件序列化成form格式 12  13 var htm = ""; 14  15 var s = new Array(); 16  17 //删除图片 18 function del(name, t) { 19  20     for (var i = 0; i < s.length; i++) { 21         if (s[i].name == name) { 22             s.splice(i, 1); 23             $(t).parent().remove(); 24         } 25     } 26 } 27  28 //获取文件,拼接展示到页面 29 function ch(fi, tpcall) { 30  31  32     for (var i = 0; i < fi.length; i++) { 33  34         var reader = new FileReader(); 35         s.push(fi[i]); 36  37         reader.onload = (function (theFile) { 38  39             return function (e) { 40  41                 htm = $("#zhanshi_xinyang").html(); 42  43                 htm += "<li class=\"li_xinyang\">"; 44                 htm += "  <img class=\"img_xinyang\"  src=\"" + this.result + "\" />"; 45                 htm += "   <span  class=\"span_xinyang\" onclick=\"del(&#39;" + theFile.name + "&#39;,this)\">删除</span>"; 46                 htm += "</li>"; 47                 $("#zhanshi_xinyang").html(htm); 48                 tpcall(theFile); 49  50             } 51  52         })(fi[i]); 53         reader.readAsDataURL(fi[i]); 54  55  56     } 57  58     $("#file_xinyang").val(''); 59 } 60  61  62  63 //上传图片,采用formdata类型上传 64 function tj(url, sucess, err) { 65  66  67     if (s.length == 0) { 68         alert("请选择文件"); 69         return; 70     } 71  72     for (var i = 0; i < s.length; i++) { 73         fdata.append("tp" + i, s[i]); 74     } 75  76     $.ajax({ 77         url: url, 78         type: "POST", 79         data: fdata, 80         contentType: false, 81         processData: false, 82     }).done(function (data) { sucess(data) }).fail(function (data) { err(data) }); 83 } 84  85 //模拟点击input file 按钮 86 function tianjia_xinyang() { 87     $("#file_xinyang").click(); 88 } 89  90  91 //引用后外面调用的方法 92 jQuery.tpsc = function (object) { 93     var sc = ""; 94  95     sc += " <div>"; 96     sc = "<input type=\"file\" id=\"file_xinyang\" multiple=\"multiple\" onchange=\"ch(this.files," + object.tpcall + ")\" style=\"display:none\" />"; 97     sc += "  <input class=\"btn_sc_xinyang\" type=\"button\" value=\"上传\" onclick=\"tj(&#39;" + object.url + "&#39;," + object.success + "," + object.error + ")\" />"; 98     sc += "       <input class=\"btn_tj_xinyang\" type=\"button\" value=\"添加\" onclick=\"tianjia_xinyang()\" />"; 99     sc += "</div>";100 101     sc += "<div>";102     sc += "   <ul style=\" margin:0; width:99%; overflow:hidden\" id=\"zhanshi_xinyang\">";103 104     sc += "   </ul>";105     sc += "</div>";106 107 108     $("#" + object.id).html(sc);109 110 }

Nach dem Login kopieren

Der letzte ist der CSS-Stil. Er ist für Benutzer bequem selbst zu definieren. Ich bin eine Person ohne ästhetischen Geschmack.... Der Stil ist einfach akzeptabel

 1 .btn_tj_xinyang{ 2  3 } 4 .btn_sc_xinyang{ 5  6 } 7 .li_xinyang{ 8     position: relative; 9     float:left; 
10     padding:5px;11     list-style:none;12     width: 100px;13     /*height: 100px;*/14     border: 1px solid #DDDDDD;15 }16 .img_xinyang17 {18     display:block;19     width: 100%;20 }21 .span_xinyang22 {23     position: absolute;24     display:none; 
25     width:100%; 
26     height:30px; 
27     line-height:30px; 
28     background-color:rgba(0,0,0,0.5);29     color: #ffffff;30     text-align:center;31     cursor:pointer;32     bottom: 1px;33     left: 0px;34 }

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonjquery mehrere Dateien hochladen, bitte korrigieren Sie mich. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!