移動端一次上傳多個圖片(動態建立file型別的input)
阿新 • • 發佈:2019-02-15
描述
最近在做公司的一個移動端上傳圖片的業務,如果這是在PC端,將非常的簡單,因為給input設定屬性multiple後PC端按住ctrl鍵就可以一次性選擇多個圖片,但是在移動端確不可以,移動端選擇一張圖片後會自動返回到APP中,想再新增一張的話還需要再次進入,所以體驗不是很好,目前沒找到合適的方法,只能暫時先這樣了,我們今天的焦點是:如何一次性上傳多張圖片(注意:不是一次性選擇多個圖片)?
因為移動端無法一次性選擇多個圖片的緣故,用單個type=”file”的input也無法做到讓伺服器端接收到多個圖片源,所以解決思路就是:動態建立type=”file”的input,每新增一張圖片前,就建立一個type=”file”類,然後js控制立即觸發,即可進入到手機的圖片選擇介面,多張圖片新增完之後最後通過FormData將整個form表單(動態建立的type=”file”都在form中)一次性提交。
效果 ##
目錄結構
目錄結構很簡單,就用了jquery,這個大家自己下載一個,為了讓大家更多的將關注點放在技術功能上,在這裡我簡化了程式碼,去掉了bootstrap的樣式,但功能是完整的,下面是程式碼
toUpload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content ="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>檔案上傳</title>
<style type="text/css">
#images{min-height:7em;max-height:21em;text-align:left;overflow-y:auto}
#images img{
width: 7em;
height : 7em;
margin:0.5em;
}
.inputFiles{display:none;}
</style>
</head>
<body>
<div class="content" >
<div id="images"></div>
<form id="uploadForm" enctype="multipart/form-data" method="post" target="saveTo">
<div class="inputFiles"></div>
</form>
<div class="btn_submit">
<button type="button" class="btn btn-success btn_upImg" onClick="addinputFile()">選擇圖片</button>
<button id="save" type="button" class="btn btn-success" onClick="uploadFile()">提交</button>
</div>
</div>
<iframe name="saveTo" style="display: none"></iframe>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/toUpload.js"></script>
</body>
</html>
toUpload.js
//選擇圖片,馬上預覽
function xmTanUploadImg(obj) {
var fl=obj.files.length;
for(var i=0;i<fl;i++){
var file=obj.files[i];
var reader = new FileReader();
//讀取檔案過程方法
reader.onload = function (e) {
var imgstr='<img src="'+e.target.result+'"/>';
var oimgbox=$("#images");
oimgbox.append(imgstr);
}
reader.readAsDataURL(file);
}
}
// 提交
function uploadFile() {
//看最後一個file型別的input是否有檔案,沒有則移除
if($("input[type='file']:last").prop('files')){
if($(":file").prop('files').length==0){
$("input[type='file']:last").remove();
if($("input[type='file']").length==0){
alert("請選擇圖片");
}
}
var form = new FormData($("#uploadForm")[0]);
$.ajax({
type:"post",
url:url,//根據自己專案的需要寫請求地址
data:form,
processData:false,
contentType:false,
success:function(msg){
console.log(msg);
},
error:function(e){
console.log(e.responseText);
}
})
}else{
alert("請選擇圖片");
}
}
//新增type="file"
function addinputFile(){
//檢查最後一個type="file"有沒有選擇圖片,沒有則去使用,不再建新的
var lastObj=$("input[type='file']:last");
if(lastObj.prop('files')){
if(lastObj.prop('files').length==0){
lastObj.click();
}else{
$(".inputFiles").append("<input type='file' name='fileAttach' multiple='multiple' accept='image/*' onChange='xmTanUploadImg(this);' />");
$("input[type='file']:last").click();
}
}else{
//第一個
$(".inputFiles").append("<input type='file' name='fileAttach' multiple='multiple' accept='image/*' onChange='xmTanUploadImg(this);' />");
$("input[type='file']:last").click();
}
}