jquery 實現圖片上傳，並在前端顯示出來
- 2019 年 10 月 3 日
- 筆記
目前遇到一個圖片上上傳的需求，突然發現，原來之前都沒有做過此種類型的需求,以下是需求樣式：
看到需求後之所以有點懵，是因為我接觸到的文件上傳，一般都是按鈕類型的，例如以下這種：
深呼吸，好好想一下，整理整理思路：
1.需要有一個虛線框，這裡為一個div元素
2.再有一個十字框（和文字說明一起，可以集成組合為一張圖片），這裡可以可以為一個img元素，這樣：當沒有上傳圖片時，顯示默認圖片，當上傳了，顯示上傳的圖片
3.要實現點擊能夠上傳，需要有一個 input 元素：首先input元素不能顯示出來，初步想了一下，有兩種實現方法，一種是使用 label標籤 加input元素（label 標籤關聯input,input影藏，label設置為與div 同樣大小），另一種是使用input單標籤，設置它的z-index層級在最上層，然後設置為行塊元素即與div一般大小，然後設置input的 opacity 為0，即透明狀態；
4.需要可以刪除圖片，那就在div里再加一個span 元素，點擊span元素時，刪除圖片
得到以下html:
1 <div class="chuans"> 2 <img src="__INDEX__/img/ins/chuanzhenm.png" alt="" data-imgsrc="__INDEX__/img/ins/chuanzhenm.png"> 3 <input class="uploadImg file1" type="file" name="file1" > 4 <span class="delx Hui-iconfont"></span> 5 </div>
全部html如下：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <link rel="stylesheet" href="__INDEX__/css/header2.css"> 8 <link rel="stylesheet" href="__INDEX__/css/1.0.8/iconfont.css"> 9 <link rel="stylesheet" href="__INDEX__/css/ins/insinfo.css"> 10 <script src="__INDEX__/js/common/jquery-1.7.2.min.js"></script> 11 <script src="__INDEX__/js/layer.js"></script> 12 <script src="__INDEX__/js/ins/insinfo.js"></script> 13 <title></title> 14 15 </head> 16 <body> 17 {include file="common/header1"} 18 <div class="insbox"> 19 <h3 class="institle"><span class="isnnei">提交商業投保資料</span> </h3> 20 <div class="nelist"> 21 <ul class="inul yilei clearfix"> 22 <div class="toleft"><span class="nming maohaos toyilei">手機號</span></div> 23 <div class="toright"><input type="text" class="xiangton shoujihao" name="shoujihao"></div> 24 </ul> 25 <ul class="inul yilei clearfix"> 26 <div class="toleft"><span class="nming maohaos toyilei">發動機號</span></div> 27 <div class="toright"><input type="text" class="xiangton fadongjihao" name="fadongjihao"></div> 28 </ul> 29 <ul class="inul yilei clearfix"> 30 <div class="toleft"><span class="nming maohaos toyilei">車架號</span></div> 31 <div class="toright"><input type="text" class="xiangton chejiahao" name="chejiahao"></div> 32 </ul> 33 <ul class="inul erlei clearfix"> 34 <div class="toleft"><span class="nming maohaos toerlei">身份證正反面</span></div> 35 <div class="toright clearfix"> 36 <div class="chuans"> 37 38 <img src="__INDEX__/img/ins/chuanzhenm.png" alt="" data-imgsrc="__INDEX__/img/ins/chuanzhenm.png"> 39 <input class="uploadImg file1" type="file" name="file1" > 40 <span class="delx Hui-iconfont"></span> 41 </div> 42 <div class="shangshili clearfix"> 43 <div class="shuom">示例</div> 44 <div class="shulitu"> 45 <img src="__INDEX__/img/ins/shilizhen.png" alt="" data-imgsrc="__INDEX__/img/ins/shilizhen.png"> 46 </div> 47 </div> 48 </div> 49 </ul> 50 <ul class="inul erlei clearfix"> 51 <div class="toleft"><span class="nming "></span></div> 52 <div class="toright clearfix"> 53 <div class="chuans"> 54 55 <img src="__INDEX__/img/ins/chuanfanmian.png" data-imgsrc="__INDEX__/img/ins/chuanfanmian.png" alt=""> 56 <input class="uploadImg file2" type="file" name="file2" > 57 <span class="delx Hui-iconfont"></span> 58 </div> 59 <div class="shangshili clearfix"> 60 <div class="shuom">示例</div> 61 <div class="shulitu"> 62 <img src="__INDEX__/img/ins/shilifan.png " alt=""> 63 </div> 64 </div> 65 </div> 66 </ul> 67 <ul class="inul erlei clearfix"> 68 <div class="toleft"><span class="nming maohaos toerlei">自拍照</span></div> 69 <div class="toright clearfix"> 70 <div class="chuans"> 71 72 <img src="__INDEX__/img/ins/dianchuan.png" data-imgsrc="__INDEX__/img/ins/dianchuan.png" alt=""> 73 <input class="uploadImg file3" type="file" name="file3" > 74 <span class="delx Hui-iconfont"></span> 75 </div> 76 <div class="shangshili clearfix"> 77 <div class="shuom"><span class="kanshili"><span class="chsa Hui-iconfont"></span>查看示例</span></div> 78 <div class="shulitu"></div> 79 </div> 80 </div> 81 </ul> 82 83 </div> 84 85 <div class="btns"> 86 <span class="tibtn">確定</span> 87 </div> 88 </div> 89 <script> 90 var otijiourl = "{:url('insorder/submitInsInfo')}"; 91 </script> 92 </body> 93 </html>
View Code
根據以上的規則設置css樣式：
1 .insbox{ 2 width:1200px; 3 position:relative; 4 margin:0 auto; 5 border:1px solid #333; 6 color:#333; 7 border-radius: 20px; 8 margin-bottom:150px; 9 } 10 .inul { 11 min-height:44px; 12 margin:20px 0; 13 } 14 15 ul.inul>div{ 16 float:left; 17 } 18 h3.institle{ 19 background:#333; 20 color:#fff; 21 text-align: center; 22 height:78px; 23 border-top-left-radius:20px; 24 border-top-right-radius:20px; 25 position:relative; 26 width:100%; 27 display:flex; 28 align-items: center; 29 justify-content:center; 30 } 31 .isnnei{ 32 background:url(../../img/ins/card.png)no-repeat 0 center; 33 background-size: 50px auto; 34 } 35 h3.institle span{ 36 padding-left: 58px; 37 font-size: 22px; 38 letter-spacing: 3px; 39 font-weight: normal; 40 } 41 .toleft{ 42 width:25%; 43 text-align: right; 44 } 45 .toright{ 46 width:75%; 47 } 48 input.xiangton{ 49 border:1px solid #eee; 50 border-radius: 3px; 51 width:290px; 52 height:42px; 53 text-indent: 10px; 54 } 55 .toyilei{ 56 line-height:44px; 57 } 58 span.nming { 59 margin-right:40px; 60 position:relative; 61 } 62 .maohaos::after{ 63 content:":"; 64 display:inline; 65 position:absolute; 66 right:0; 67 right:-10px; 68 69 } 70 .erlei{ 71 height:172px; 72 line-height:172px; 73 } 74 div.toright>div{ 75 float:left; 76 } 77 div.chuans{ 78 position:relative; 79 width:240px; 80 height:160px; 81 border-radius: 3px; 82 border:1px dashed #ccc; 83 margin-right: 44px; 84 overflow: hidden; 85 } 86 div.chuans img{ 87 position:absolute; 88 max-width:238px; 89 left:0; 90 right:0; 91 top:0; 92 bottom:0; 93 margin:auto; 94 } 95 div.shangshili>div{ 96 float:left; 97 } 98 div.shangshili { 99 height:160px; 100 position:relative; 101 } 102 div.shuom{ 103 margin-right:10px; 104 } 105 div.shulitu{ 106 width:242px; 107 height:100%; 108 position:relative; 109 } 110 div.shulitu img{ 111 position:absolute; 112 max-width:240px; 113 left:0;right:0; 114 top:0;bottom:0; 115 margin:auto; 116 } 117 div.btns{ 118 margin-top:180px; 119 margin-bottom:40px; 120 position:relative; 121 text-align: center; 122 } 123 span.tibtn{ 124 padding:8px 30px; 125 background:#333; 126 border-radius: 5px; 127 color:#fff; 128 } 129 div.chuans{ 130 line-height:30px; 131 } 132 input.uploadImg{ 133 display: inline-block; 134 width: 100%; 135 height: 100%; 136 opacity: 0; 137 z-index: 999; 138 } 139 span.delx { 140 position:absolute; 141 top:5px; 142 right:5px; 143 z-index: 9999; 144 font-size: 30px; 145 float:right; 146 display:none; 147 border-radius: 50%; 148 } 149 span.delx:hover{ 150 background:#333; 151 color:#fff; 152 cursor:pointer; 153 } 154 div.shuom span.chsa { 155 color:#e5000c; 156 margin-right:10px; 157 font-size: 20px; 158 font-weight: normal; 159 } 160 div.shuom{ 161 color:#1f5fc3; 162 font-size: 14px; 163 font-weight: bold; 164 }
View Code
得到如下的樣式：
下面開始寫js:
首先需要判斷上傳的圖片格式，如果不是jpeg,jpg,png,bmp,則提示圖片上傳格式錯誤，需重新上傳；如果格式正確，那就或者上傳圖片的地址，把當前div 下 img 的src 設置為此圖片地址，即可達到顯示圖片的目的
1 $("body").on("change","div.chuans input.uploadImg",function(){ 2 3 var reads = new FileReader(); 4 var f = $(this).get(0).files[0]; 5 var rep = /jpeg|png|gif|bmp/ig; 6 var gstyle = f.type.split("/")[1]; 7 if(rep.test(gstyle)){ 8 reads.readAsDataURL(f); 9 var that = this; 10 reads.onload = function(e) { 11 $(that).parent().find("img").attr("src",this.result) 12 }; 13 }else{ 14 layer.msg("圖片格式不正確，請上傳 jpeg|png|gif|bmp 格式的圖片") 15 } 16 17 });
以下是刪除圖片：
1 $("body").on("click","span.delx",function(){ 2 var odatasrc = $(this).parents(".chuans").find("img").data("imgsrc"); 3 var osrc = $(this).parents(".chuans").find("img").attr("src"); 4 $(this).parents(".chuans").find("img").attr("src",odatasrc); 5 $(this).hide(); 6 $(this).parents(".chuans").find("input").val(""); 7 });
圖片上傳時，這裡突然遇到一個報錯:
這個錯誤找了好久，都沒有發現是哪裡出了問題，程式碼是這樣的：
1 $.ajax({ 2 type:"post", 3 url:otijiourl, 4 data:odata, 5 dataType: 'json', //返回值類型 一般設置為json 6 success:function(res){ 7 console.log(res); 8 },error:function(){ 9 console.log("後台處理錯誤"); 10 } 11 })
看了半天，也沒有發現是哪裡錯了
最後百度了一下，發現別人也遇到了這樣的問題，原因是使用 jquery ajax 發送請求的時候，會默認把data中的數據進行序列化。只要不進行序列化，就可以了。如果不進行序列化，需要增加一個參數：processData，設置為 false
變更之後的ajax 請求程式碼如下：
1 $.ajax({ 2 type:"post", 3 url:otijiourl, 4 data:odata, 5 dataType: 'json', //返回值類型 一般設置為json 6 processData: false, // jQuery不要去處理髮送的數據 7 success:function(res){ 8 console.log(res); 9 },error:function(){ 10 console.log("後台處理錯誤"); 11 } 12 })
改完之後就ok 了
全部js 程式碼如下：大功告成
1 $(function(){ 2 3 $("body").on("change","div.chuans input.uploadImg",function(){ 4 5 var reads = new FileReader(); 6 var f = $(this).get(0).files[0]; 7 var rep = /jpeg|png|gif|bmp/ig; 8 var gstyle = f.type.split("/")[1]; 9 if(rep.test(gstyle)){ 10 reads.readAsDataURL(f); 11 var that = this; 12 reads.onload = function(e) { 13 $(that).parent().find("img").attr("src",this.result) 14 }; 15 }else{ 16 layer.msg("圖片格式不正確，請上傳 jpeg|png|gif|bmp 格式的圖片") 17 } 18 19 }); 20 21 $("body").on("mouseenter","div.chuans",function(){ 22 var odatasrc = $(this).find("img").data("imgsrc"); 23 var osrc = $(this).find("img").attr("src"); 24 25 if(osrc.indexOf(odatasrc)==-1){ 26 $(this).find("span.delx").show(); 27 } 28 }); 29 $("body").on("mouseleave","div.chuans",function(){ 30 $(this).find("span.delx").hide(); 31 }); 32 33 $("body").on("click","span.delx",function(){ 34 var odatasrc = $(this).parents(".chuans").find("img").data("imgsrc"); 35 var osrc = $(this).parents(".chuans").find("img").attr("src"); 36 $(this).parents(".chuans").find("img").attr("src",odatasrc); 37 $(this).hide(); 38 $(this).parents(".chuans").find("input").val(""); 39 }); 40 41 $("body").on("click","span.tibtn",function(){ 42 var odata = getchuancan(); 43 console.log(odata); 44 if(jiancecanshu()){ 45 $.ajax({ 46 type:"post", 47 url:otijiourl, 48 data:odata, 49 dataType: 'json', //返回值類型 一般設置為json 50 // contentType: "application/x-www-form-urlencoded; charset=utf-8", 51 processData: false, // jQuery不要去處理髮送的數據 52 success:function(res){ 53 console.log(res); 54 },error:function(){ 55 console.log("後台處理錯誤"); 56 } 57 }) 58 } 59 }); 60 61 function getchuancan(){ 62 var formData = new FormData(); 63 var ojson = {}; 64 65 ojson.oshouji =$.trim( $("input.shoujihao").val()); 66 67 ojson.ofdji = $("input.fadongjihao").val(); 68 ojson.ochjiah = $("input.chejiahao").val(); 69 70 // ojson.ozhenm = $("input.file1").get(0).files[0]; 71 // ojson.opfanm = $("input.file2").get(0).files[0]; 72 // ojson.oshilm = $("input.file3").get(0).files[0]; 73 74 75 ojson.ozhenm = document.querySelector("input.file1").files[0]; 76 ojson.opfanm = document.querySelector("input.file2").files[0]; 77 ojson.oshilm = document.querySelector("input.file3").files[0]; 78 79 formData.append('oshouji', ojson.oshouji); 80 formData.append('ofdji', ojson.ofdji); 81 formData.append('ochjiah', ojson.ochjiah); 82 formData.append('ozhenm', ojson.ozhenm); 83 formData.append('opfanm', ojson.opfanm); 84 formData.append('oshilm', ojson.oshilm); 85 86 87 return ojson; 88 return formData; 89 } 90 91 function jiancecanshu(){ 92 var oshouji = $.trim($("input.shoujihao").val()); 93 var ofdji = $("input.fadongjihao").val(); 94 var ochjiah = $("input.chejiahao").val(); 95 var ozhenm = $("input.file1").val(); 96 var opfanm = $("input.file2").val(); 97 var oshilm = $("input.file3").val(); 98 var ocan = 100; 99 100 101 102 var canarr = [0,1,2,3,4,5,6]; 103 if(oshouji.length==0){ 104 ocan=0; 105 }else if(ofdji.length==0){ 106 ocan=1; 107 }else if(ochjiah.length==0){ 108 ocan=2; 109 }else if(ozhenm.length==0){ 110 ocan=3; 111 }else if(opfanm.length==0){ 112 ocan=4; 113 }else if(oshilm.length==0){ 114 ocan=5; 115 }else if(!isPhone(oshouji)){ 116 ocan=6; 117 } 118 119 var arr=[ 120 "手機號為空，請輸入手機號", 121 "發動機號為空，請輸入發動機號", 122 "車架號為空，請輸入車架號", 123 "身份證正面照為空，請輸入身份證正面照", 124 "身份證反面照為空，請輸入身份證反面照", 125 "自拍照為空，請輸入自拍照", 126 "手機號輸入錯誤，請輸入正確的手機號" 127 ]; 128 129 if(canarr.indexOf(ocan)!=-1){ 130 console.log("ocan: "+ocan); 131 console.log(arr); 132 layer.msg(arr[ocan]); 133 return false; 134 }else{ 135 return true; 136 } 137 138 139 } 140 141 //檢測手機號碼 142 function isPhone(phone) { 143 if (phone == null || phone == '') { 144 // layer.msg('請填寫手機號碼'); 145 return false; 146 } 147 //驗證號碼 148 var phoneReg = /(^1[3|4|5|7|8|9]d{9}$)|(^09d{8}$)/ig; 149 if (!phoneReg.test(phone)) { 150 // layer.msg('請填寫正確的手機號碼'); 151 return false; 152 } else { 153 return true; 154 } 155 }; 156 })
View Code
得到的圖片上傳如下：
備註：之所以一開始有點懵，是因為對需求沒有明確分析，認真分析之後，會發現其實都是些比較簡單而且容易的功能。認真分析之後，才能把東西做出來
