前端圖片上傳功能，可刪除，可限制上傳張數，可限制圖片的格式和大小，pc端移動端都通用。原生無依賴。
阿新 • • 發佈：2019-02-10
html部分：
<div class="item"> <div class="title small_title">上傳專案圖片</div> <div class="contain_upload"> <div class="tip">包括但不限於：專案效果圖、立面圖、鳥瞰圖、位置圖、區點陣圖、交通網路設施圖、周邊配套圖、標識形象圖等等</div> <div class="tip">僅限jpg|png|jpeg|gif格式，檔案大小不超過10M</div> <div class="img_contain"> <ul class="img_lists"> <!--<li class="img_list" > <img class="img" src="/public/pc/images/zzlwang.ico" alt=""> <span class="del_img">刪除</span> </li> <li class="img_list" > <img class="img" src="/public/pc/images/zzlwang.ico" alt=""> <span class="del_img">刪除</span> </li>--> </ul> <div class="img_upload" > <input type="file" name="file_img" id="file_img" class="file_img" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" /> </div> </div> </div> </div>
css部分：
.item{
padding-bottom: 20px;
.small_title {
font-weight: 700;
background-color: #e2dbcf;
height: 60px;
padding-left: 23px;
font-size: 20px;
line-height: 60px;
margin-bottom: 40px;
}.contain_upload{ color: #666; overflow: hidden; .tip{ padding-left: 30px; } .img_contain{ padding: 30px; .img_lists { margin: 0; padding: 0; list-style: none; float: left; text-align: center; .img_list { width: 150px; height: 150px; float: left; margin-right: 17px; margin-left: 17px; margin-bottom: 30px; position: relative; border: 2px solid #ccc; border-radius: 5px; box-sizing: border-box; .img { width: 150px; height: 150px; } .del_img { position: absolute; left: 0; bottom: 0; display: inline-block; width: 146px; height: 30px; background-color: rgba(0,0,0,.2); line-height: 30px; color: #fff; } } } .img_upload { width: 150px; height: 150px; box-sizing: border-box; float: left; border: 2px dashed #ccc; border-radius: 5px; text-align: center; background: url("/public/pc/images/upload.png") no-repeat center center; overflow: hidden; .file_img { width: 100%; height: 100%; opacity: 0; width: 100%; } } } }
}
js部分：
//圖片上傳的change 事件 var target_num = $(".img_lists li").length; $("#file_img").change(function (e) { //上傳錢檢測檔案的長度如果超過指定的張數的話就要隱藏上傳的按鈕 // console.log("1") let files = e.target.files || e.dataTransfer.files; if (!files.length) { return; }; // 檢測圖片 // console.log(files) //驗證的 圖片的大寫和格式的 函式 function validateImg(file, ipt) { let reg = /\.(jpg|png|jpeg|gif)$/ig; let sizeMB = file.size / (1024 * 1024); // 驗證檔案是否是圖片 if (!reg.test(file.name)) { alert('請選擇jpg,png,jpeg,gif檔案上傳'); ipt.value = ''; return false; } // 驗證圖片大小是否超過5M if (sizeMB > 10) { alert('請選擇10M以下的圖片'); ipt.value = ''; return false; } return true; } if (validateImg(files[0], e.currentTarget)) { var fileData = files[0]; // console.log(fileData) let formData = new FormData(); // console.log(fileData) formData.append('files', fileData); formData.append('token', token); uploadFile(formData, e.currentTarget); } else { return; } }); //圖片上傳的函式 function uploadFile(formData, ipt) { let _page = this; let xhr = new XMLHttpRequest(); xhr.open('POST',"upload/img" ); xhr.onloadstart = function (e) { // console.log(e); } xhr.onloadend = function (e) { // console.log(e); } xhr.onreadystatechange = function() { if (xhr.readyState == 4) { //本地模擬成功的 請求 if (xhr.status != 200) { // let rst = JSON.parse(xhr.responseText); // 上傳成功後回撥函式 ipt.value = ''; // console.log("ok") target_num+=1; console.log(target_num); var rst = { "code":200, "data":{ "host":"http://fph-property.oss-cn-hangzhou.aliyuncs.com/", "path":"other/20170321/616d565574d583d599612d09295f9e6c.png" }, "message":"ok" }; console.log("ok") //把返回的資料的 資料放在一個數組裡 // imgPathArr.push(rst.data.path); // console.log(imgPathArr); //建立一個img標籤 var $img = $("<img class='img' >"); $img.attr("src",rst.data.host+rst.data.path) ; //建立一個刪除的標籤 var $del_img =$("<span class='del_img'> 刪除</span>") //建立一個li標籤 var $img_list = $("<li class='img_list'></li>") //把li標籤放新增在ul裡 $(".img_lists").append($img_list); //把圖片放在裡裡面 $img_list.prepend($img); // 把刪除的按鈕放在li裡裡面 $img_list.prepend($del_img) // 在這裡去獲取 已經上傳的圖片的個數 // var img_num = $(".img_list").length; // console.log(img_num); //如果大於了指定的張數的移除上傳的按鈕 console.log(target_num) if(target_num>=12){ $(".img_upload").hide(); } //點選圖片的刪除按鈕 刪除該圖片，並判當前的圖片的張數，並顯示上傳按鈕 $(".del_img").click(function () { target_num-=1; console.log(target_num) $(this).parent(".img_list").remove(); if(target_num<12){ $(".img_upload").show() } }) } else{ // 上傳失敗的回撥 alert("上傳圖片失敗") /*var rst = { "code":200, "data":{ "host":"http://fph-property.oss-cn-hangzhou.aliyuncs.com/", "path":"other/20170321/616d565574d583d599612d09295f9e6c.png" }, "message":"ok" } var $img_item = $("<img class='img_item' src='/public/pc/images/zzlwang.ico'>"); $(".img_list").prepend($img_item)*/ } } } xhr.send(formData); };
使用須知：
1，後臺介面要求是上傳的是流檔案；
寫的很詳細可以直接拿去用的呦，具體的針對不同的瀏覽器的相容性的問題沒有處理；
歡迎指正問題，共同進步； 檔案上傳其實是一樣的道理