最近公司做一個項目,其中用到了多圖片上傳.發現網上教程寫的很少.便自己寫了一個上傳的js. 用ajax 與 formdata上傳的. ...
最近公司做一個項目,其中用到了多圖片上傳.發現網上教程寫的很少.便自己寫了一個上傳的js. 用ajax 與 formdata上傳的. 這個東西不只是可以傳圖片,傳文件也是可以的只不過預覽的時候會顯示不出來圖片
先上前臺調用代碼
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"></script> 7 <script src="Scripts/cs.js"></script> 8 <link href="Scripts/tpsc.css" 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>
下麵是上傳的js
思路: 把上傳的圖片全部放到一個數組中,並用 FileReader() 來展示圖片,這樣可以在上傳前就展示出圖片的樣子
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('" + theFile.name + "',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('" + object.url + "'," + 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 }
最後是css樣式,方便用戶自己定義,我是個沒有審美的人....樣式湊合看就可以了
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_xinyang 17 { 18 display:block; 19 width: 100%; 20 } 21 .span_xinyang 22 { 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 }
