2. 科技
  3. JQuery多图片上传预览

JQuery多图片上传预览

it2022-05-05  103

JQuery多图片上传+预览

参考自

这是CSS部分代码

.float{ float:left; width : 200px; height: 200px; overflow: hidden; border: 1px solid #CCCCCC; border-radius: 10px; padding: 5px; margin: 5px; } img{ position: relative; } .result{ width: 200px; height: 200px; text-align: center; box-sizing: border-box; } #file_input{ /*display: none; */ } .delete{ width: 200px; height:200px; position: absolute; text-align: center; line-height: 200px; z-index: 10; font-size: 30px; background-color: rgba(255,255,255,0.8); color: #777; opacity: 0; transition-duration: 0.7s; -webkit-transition-duration: 0.7s; } .delete:hover{ cursor: pointer; opacity: 1; }

这是body部分

<div class="container"> <label>图片选择：</label> <button id="select">更换图片</button> <button id="add">追加图片</button> <input type="file" id="file_input" multiple/> <!--multiple是多选的关键--> <button id="submit">提交</button> </div> <div class="get"></div>

这是引入的依赖

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

这是js部分

$(function(){ var input = $("#file_input"); var result; var dataArr = []; // 储存所选图片的结果(文件名和base64数据) var fd; //FormData方式发送请求 var oSelect = $("#select"); var oAdd = $("#add"); var oSubmit = $("#submit"); var oInput = $("#file_input"); if(typeof FileReader==='undefined'){ alert("抱歉，你的浏览器不支持 FileReader"); input.setAttribute('disabled','disabled'); }else{ $("#file_input").on('change',readFile); }　　　　　//handler function readFile(){ fd = new FormData(); var iLen = this.files.length; var path=$("#file_input").val(); var extStart =path.lastIndexOf('.'); var ext = path.substring(extStart,path.length).toUpperCase(); for(var i=0;i<iLen;i++){ if (ext !== '.PNG' && ext !== '.JPG' && ext !== '.JPEG' && ext !== '.GIF'){　　//判断上传文件格式 return alert("上传的图片格式不正确，请重新选择"); } var reader = new FileReader(); fd.append(i,this.files[i]); reader.readAsDataURL(this.files[i]); //转成base64 reader.fileName = this.files[i].name; reader.onload = function(e){ var imgMsg = { name : this.fileName,//获取文件名 base64 : this.result //reader.readAsDataURL方法执行完后，base64数据储存在reader.result里 } dataArr.push(imgMsg); result = '<div class="delete">删除</div><div class="result"><img class="subPic" src="'+this.result+'" alt="'+this.fileName+'"/></div>'; var div = document.createElement('div'); div.innerHTML = result; div['className'] = 'float'; $(".get")[0].append(div); 　　//插入dom树 var img = div.getElementsByTagName('img')[0]; img.onload = function(){ var nowHeight = ReSizePic(this); //设置图片大小 this.parentNode.style.display = 'block'; var oParent = this.parentNode; if(nowHeight){ oParent.style.paddingTop = (oParent.offsetHeight - nowHeight)/2 + 'px'; } } div.onclick = function(){ $(this).remove(); // 在页面中删除该图片元素 } } } } function send(){ var submitArr = []; $('.subPic').each(function () { submitArr.push({ name: $(this).attr('alt'), base64: $(this).attr('src') }); } ); $.ajax({ url : 'http://123.206.89.242:9999', type : 'post', data : JSON.stringify(submitArr), dataType: 'json', //processData: false, 用FormData传fd时需有这两项 //contentType: false, success : function(data){ console.log('返回的数据：'+JSON.stringify(data)) 　} }) } $("#select").click(function(){ oInput.value = ""; // 先将oInput值清空，否则选择图片与上次相同时change事件不会触发 //清空已选图片 $('.float').remove(); oInput.click(); }) $("#add").click(function(){ oInput.value = ""; // 先将oInput值清空，否则选择图片与上次相同时change事件不会触发 oInput.click(); }) $("#submit").click(function(){ if(!dataArr.length){ return alert('请先选择文件'); } send(); }) } ) function ReSizePic(ThisPic) { var RePicWidth = 200; //这里修改为您想显示的宽度值 var TrueWidth = ThisPic.width; //图片实际宽度 var TrueHeight = ThisPic.height; //图片实际高度 if(TrueWidth>TrueHeight){ //宽大于高 var reWidth = RePicWidth; ThisPic.width = reWidth; //垂直居中 var nowHeight = TrueHeight * (reWidth/TrueWidth); return nowHeight; //将图片修改后的高度返回，供垂直居中用 }else{ //宽小于高 var reHeight = RePicWidth; ThisPic.height = reHeight; } }

接下来是全部的代码

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>showImages</title> <style type="text/css"> .float{ float:left; width : 200px; height: 200px; overflow: hidden; border: 1px solid #CCCCCC; border-radius: 10px; padding: 5px; margin: 5px; } img{ position: relative; } .result{ width: 200px; height: 200px; text-align: center; box-sizing: border-box; } #file_input{ /*display: none; */ } .delete{ width: 200px; height:200px; position: absolute; text-align: center; line-height: 200px; z-index: 10; font-size: 30px; background-color: rgba(255,255,255,0.8); color: #777; opacity: 0; transition-duration: 0.7s; -webkit-transition-duration: 0.7s; } .delete:hover{ cursor: pointer; opacity: 1; } </style> </head> <body> <div class="container"> <label>添加图片：</label> <button id="select">更新图片</button> <button id="add">继续添加</button> <input type="file" id="file_input" multiple/> <button id="submit">提交</button> </div> <div class="get"></div> </body> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(function(){ var result; var dataArr = []; // 储存所选图片的结果(文件名和base64数据) var fd; //FormData方式发送请求 var oInput = $("#file_input"); if(typeof FileReader==='undefined'){ alert("抱歉，你的浏览器不支持 FileReader"); input.setAttribute('disabled','disabled'); }else{ $("#file_input").on('change',readFile); }　　　　　//handler function readFile(){ fd = new FormData(); var iLen = this.files.length; var path=$("#file_input").val(); var extStart =path.lastIndexOf('.'); var ext = path.substring(extStart,path.length).toUpperCase(); for(var i=0;i<iLen;i++){ if (ext !== '.PNG' && ext !== '.JPG' && ext !== '.JPEG' && ext !== '.GIF'){　　//判断上传文件格式 return alert("上传的图片格式不正确，请重新选择"); } var reader = new FileReader(); fd.append(i,this.files[i]); reader.readAsDataURL(this.files[i]); //转成base64 reader.fileName = this.files[i].name; reader.onload = function(e){ var imgMsg = { name : this.fileName,//获取文件名 base64 : this.result //reader.readAsDataURL方法执行完后，base64数据储存在reader.result里 } dataArr.push(imgMsg); result = '<div class="delete">删除</div><div class="result"><img class="subPic" src="'+this.result+'" alt="'+this.fileName+'"/></div>'; var div = document.createElement('div'); div.innerHTML = result; div['className'] = 'float'; $(".get")[0].append(div); 　　//插入dom树 var img = div.getElementsByTagName('img')[0]; img.onload = function(){ var nowHeight = ReSizePic(this); //设置图片大小 this.parentNode.style.display = 'block'; var oParent = this.parentNode; if(nowHeight){ oParent.style.paddingTop = (oParent.offsetHeight - nowHeight)/2 + 'px'; } } div.onclick = function(){ $(this).remove(); // 在页面中删除该图片元素 } } } } function send(){ var submitArr = []; $('.subPic').each(function () { submitArr.push({ name: $(this).attr('alt'), base64: $(this).attr('src') }); } ); $.ajax({ url : 'http://123.206.89.242:9999', type : 'post', data : JSON.stringify(submitArr), dataType: 'json', //processData: false, 用FormData传fd时需有这两项 //contentType: false, success : function(data){ console.log('返回的数据：'+JSON.stringify(data)) 　} }) } $("#select").click(function(){ oInput.value = ""; // 先将oInput值清空，否则选择图片与上次相同时change事件不会触发 //清空已选图片 $('.float').remove(); oInput.click(); }) $("#add").click(function(){ oInput.value = ""; // 先将oInput值清空，否则选择图片与上次相同时change事件不会触发 oInput.click(); }) $("#submit").click(function(){ if(!dataArr.length){ return alert('请先选择文件'); } send(); }) } ) function ReSizePic(ThisPic) { var RePicWidth = 200; //这里修改为您想显示的宽度值 var TrueWidth = ThisPic.width; //图片实际宽度 var TrueHeight = ThisPic.height; //图片实际高度 if(TrueWidth>TrueHeight){ //宽大于高 var reWidth = RePicWidth; ThisPic.width = reWidth; //垂直居中 var nowHeight = TrueHeight * (reWidth/TrueWidth); return nowHeight; //将图片修改后的高度返回，供垂直居中用 }else{ //宽小于高 var reHeight = RePicWidth; ThisPic.height = reHeight; } } </script> </html>

写的第一条博客，谢谢支持

专利

最新回复(0)