recherche

Maison >interface Web >js tutoriel >jquery téléchargement de fichiers multiples, bienvenue pour me corriger

jquery téléchargement de fichiers multiples, bienvenue pour me corriger

巴扎黑
巴扎黑original
2017-06-26 14:22:581140parcourir

Récemment, l'entreprise travaillait sur un projet qui utilisait plusieurs téléchargements d'images. J'ai trouvé qu'il y avait très peu de tutoriels en ligne, j'ai donc écrit moi-même un js de téléchargement. Il a été téléchargé en utilisant ajax et formdata. télécharger des images, mais aussi des fichiers. C'est également possible, mais l'image ne s'affichera pas lors de la prévisualisation

Rendez-vous d'abord à la réception pour appeler le code

 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>

Ce qui suit est le js téléchargé

Idée : mettez toutes les images téléchargées dans un tableau, et utilisez FileReader() pour afficher les images, afin de pouvoir les afficher avant de les télécharger. Montrez simplement à quoi ressemble l'image 

  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 }

Le dernier est le style CSS, il est pratique pour les utilisateurs de le définir eux-mêmes. Je suis une personne sans goût esthétique.... Le style est juste acceptable

. 

 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 }

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Problèmes lorsque jquery attr gère des éléments de formulaire tels que checkbox/selectArticle suivant：Problèmes lorsque jquery attr gère des éléments de formulaire tels que checkbox/select

Articles Liés

Voir plus