1. 概述
1.1 說明
在一些前后端不分離的項目中，經常有一些需要把文件或者圖片上傳的功能，故記錄此代碼以便后期使用。
1.2 要求
1.上傳，10M以內，限bmp,jpg,png,jpeg等圖片格式。提示語：限上傳10M以內bmp,jpg,png，jpeg等格式的圖片。
2.點擊上傳按鈕上傳圖片，圖片在按鈕下方展示；按鈕名稱更改為重新上傳。
3.點擊表單確定按鈕時，才把表單信息與上傳圖片信息一同上傳至服務器。
1.3 展示
未上傳展示：
上傳展示：
2. 代碼
- 引用jQuery
- 上傳后如果不符合要求，則清除上傳內容信息(直接.val('')賦值不起作用)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>圖片上傳示例</title> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <style type="text/css"> .imageWrapper { display: flex; flex-direction: column; } .imageWrapper .fontTip { color: #ccc; line-height: 24px; } .imageWrapper .btnUpload { height: 33px; min-width: 24px; padding: 0 20px; border: 1px solid #0064b6; border-radius: 3px; background: #0071ce; color: #fff; font-size: 14px; line-height: 33px; text-align: center; display: inline-block; cursor: pointer; } .imageShow { margin-top: 16px; width: 76px; height: 84px; border: 1px solid rgba(151, 151, 151, 1); } .imageShow>img { width: 100%; height: 100%; } </style> </head> <body> <div class="imageWrapper"> <div> <button id="uploadButton" type="button" class="btnUpload"></button> <input id="imagePic" name="imagePic" type="file" accept=".bmp,.jpg,.png,.jpeg,image/bmp,image/jpg,image/png,image/jpeg" style="display:none" /> </div> <div class="fontTip"> 限上傳不超過10M的bmp,jpg,png,jpeg格式的圖片 </div> <div class="imageShow"> <img id="uploadImageShow" src="" /> </div> </div> </body> <script type="text/javascript"> var btnUploadText = '上傳'; $(document).ready(function () { $("#uploadButton").text(btnUploadText) $(".imageShow").hide() $('#uploadButton').click(function () { $('#imagePic').click(); }); $("#imagePic").on("change", function (e) { var file = e.target.files[0]; //獲取圖片資源 var fileTypes = ["bmp", "jpg", "png", "jpeg"]; var bTypeMatch = false for (var i = 0; i < fileTypes.length; i++) { var start = file.name.lastIndexOf("."); var fileType = file.name.substring(start + 1); if (fileType.toLowerCase() == fileTypes[i]) { bTypeMatch = true; break; } } if (bTypeMatch) { if (file.size <= 1024 * 1024 * 10) { var reader = new FileReader(); reader.readAsDataURL(file); // 讀取文件 // 渲染文件 reader.onload = function (arg) { $(".imageShow").show() $("#uploadImageShow").attr("src", arg.target.result) btnUploadText = '重新上傳' $("#uploadButton").text(btnUploadText) } } else { alert('僅支持不超過10M的圖片'); emptyImageUpload("#imagePic") $("#uploadImageShow").attr("src", "") $(".imageShow").hide() btnUploadText = '上傳' $("#uploadButton").text(btnUploadText) return false; } } else { alert('僅限bmp，jpg，png，jpeg圖片格式'); emptyImageUpload("#imagePic") $("#uploadImageShow").attr("src", "") $(".imageShow").hide() btnUploadText = '上傳' $("#uploadButton").text(btnUploadText) return false; } }); }) //清空上傳圖片信息 function emptyImageUpload(selector) { var fi; var sourceParent; if (selector) { fi = $(selector); sourceParent = fi.parent(); } else { return; } $("<form id='tempImgForm'></form>").appendTo(document.body); var tempImgForm = $("#tempImgForm"); tempImgForm.append(fi); tempImgForm.get(0).reset(); sourceParent.append(fi); tempImgForm.remove(); } </script> </html>