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>