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>
来源: http://www.bubuko.com/infodetail-3346592.html