生活随笔
收集整理的這篇文章主要介紹了
多图片上传
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
上傳效果具體是這樣的`
此處需要js文件css文件
在這里沒法上傳想要的可以加我qq1374394031
<!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><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script type="text/javascript">window.onload = function(){var input = document.getElementById("file_input");var result;var dataArr = []; // 儲存所選圖片的結果(文件名和base64數據)var fd; //FormData方式發送請求var oSelect = document.getElementById("select");var oAdd = document.getElementById("add");var oSubmit = document.getElementById("submit");var oInput = document.getElementById("file_input");if(typeof FileReader==='undefined'){alert("抱歉，你的瀏覽器不支持 FileReader");input.setAttribute('disabled','disabled');}else{input.addEventListener('change',readFile,false);} //handlerfunction readFile(){fd = new FormData();var iLen = this.files.length;var index = 0;for(var i=0;i<iLen;i++){if (!input['value'].match(/.jpg|.gif|.png|.jpeg|.bmp/i)){ //判斷上傳文件格式return alert("上傳的圖片格式不正確，請重新選擇");}var reader = new FileReader();reader.index = i;fd.append(i,this.files[i]);reader.readAsDataURL(this.files[i]); //轉成base64reader.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">delete</div><div class="result"><img src="'+this.result+'" alt=""/></div>';var div = document.createElement('div');div.innerHTML = result;div['className'] = 'float';div['index'] = index;document.getElementsByTagName('body')[0].appendChild(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(); // 在頁面中刪除該圖片元素delete dataArr[this.index]; // 刪除dataArr對應的數據}index++;}}}function send(){var submitArr = [];for (var i = 0; i < dataArr.length; i++) {if (dataArr[i]) {submitArr.push(dataArr[i]);}}// console.log('提交的數據：'+JSON.stringify(submitArr))$.ajax({url : 'http://39.106.182.218',type : 'post',data : JSON.stringify(submitArr),dataType: 'json',//processData: false, 用FormData傳fd時需有這兩項//contentType: false,success : function(data){console.log('返回的數據：'+JSON.stringify(data))}})}oSelect.onclick=function(){oInput.value = ""; // 先將oInput值清空，否則選擇圖片與上次相同時change事件不會觸發//清空已選圖片$('.float').remove();dataArr = [];index = 0;oInput.click();}oAdd.onclick=function(){oInput.value = ""; // 先將oInput值清空，否則選擇圖片與上次相同時change事件不會觸發oInput.click();}oSubmit.onclick=function(){if(!dataArr.length){return alert('請先選擇文件');}send();}}/*用ajax發送fd參數時要告訴jQuery不要去處理發送的數據，不要去設置Content-Type請求頭才可以發送成功，否則會報“Illegal invocation”的錯誤，也就是非法調用，所以要加上“processData: false,contentType: false,”* */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>
</head>
<body>
<div class="container"><label>請選擇一個圖像文件：</label><button id="select">(重新)選擇圖片</button><button id="add">(追加)圖片</button><form action="" method="post" enctype="multipart/form-data"><input type="file" id="file_input" name="image[]" multiple/> <!--用input標簽并選擇type=file，記得帶上multiple，不然就只能單選圖片了--><button id="submit">提交</button>
</form></div>
</body>
</html>
總結
以上是生活随笔為你收集整理的多图片上传的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
