上传图片input,type=file
最近在外面做项目遇到了一个变态的需求,就是在手机网页端上传图片的时候,客户想一次性选择多张图片,注意是选择多张不是上传多张图片,在这里用到了H5的一个属性,multiple,在这里郑重说明,multiple这个属性,在pc端是可以的,但是在手机端,ios本机的浏览器是好用的,安卓方面,只有qq浏览器和chrome浏览器好用,其他的uc和本机自带的浏览器都不会出现选择多张的情况。在和客户沟通之后,放弃的选择多张的情况,可以做成每次选择一张,之后上传多张的情况。
之后还对上传数量做了限制,在这里大部分都封装了公共的方法,可以按照自己的业务酌情的修改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片上传</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="form-group">
<div class="col-xs-8 col-sm-9">
<div id="fileInputDiv">
<input id="load" multiple="multiple" type="file" class="btn btn-primary" name="pictures[]" accept="image/**" onchange="upload(this.files,'name','name')"/>
</div>
<div id="name">
<!-- <div class="imgList"><span class="remove">remove</span><img class="img" src="" style="width:100px;margin:0 5px 0 5px"></div>-->
</div>
</div>
</div>
</body>
<script type="text/javascript">
var imgArr = [];
var imgList = {
"name":5,
"nameimg":0,
}
function upload(f,name,imgListName) {
console.log(f);
for (var i = 0; i < f.length; i++) {
if(imgList[name+"img"]>=imgList[name]){
alert("上传已经超过了文件数量");
return ;
}
imgList[name+"img"]++;
imgArr = [];
var reader = new FileReader();
reader.readAsDataURL(f[i]);
imgArr.push[f];
reader.onload = function(e) {
var str = "<div class=\"imgList\"><span class=\"remove\" onclick=\"remove(this,'"+name+"')\">remove</span><img class=\"img\" src=\""+e.target.result+"\" style=\"width:100px;margin:0 5px 0 5px\"></div>";
$('#'+imgListName).append(str);
}
}
}
function remove(obj,name){
$(obj).parent().remove();
if(imgList[name+"img"]>0){
imgList[name+"img"]--;
}
var fileInputDiv = document.getElementById("fileInputDiv");
var file = document.getElementById("load");
if (file.outerHTML) {
fileInputDiv.innerHTML = file.outerHTML;
} else {
file.value = "";
}
}
</script>
</html>