手机端简单的多图上传可控制上传数目可预览

最新推荐文章于 2021-04-11 01:03:04 发布

浅藏深蓝

最新推荐文章于 2021-04-11 01:03:04 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/qq_35700004/article/details/53065657

版权

这个上传主要针对的手机端动态添加图片。电脑端的案例太多就不多说了。上代码。

需要引用两个文件 jquery.min 以及一张关闭的图片，随便改改就好了。

我是在ssm框架上使用的。想得到这些图片文件只需要在action参数里面放入@RequestParam MultipartFile[] file就可以了。怎么取值我就不多说了。

<HTML>
<head>
<meta http-equiv="Content-Type" content="textml;charset=UTF-8">
<title>Document</title>
</head>
<BODY>
<div style="margin :0px auto; width:397px;">
<div id="div_show" style=" width:397px;">
<div></div>
<input type="file" name="file" id="file_0" style="width:150px;" οnchange="javascript:imgchange(0);" accept="image/*" />
</div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
//定义一个保存文件名数组
var nameList=[];
//最大上传数目
var maxNum=3;
var deleteonepic=function(i){
var files=$("#file_"+i);
nameList[i]=null;
if($("input[type='file']").length==1){
$("#img"+i).parent().remove();
files.before(files.clone().val(""));
files.remove();
}
else{
if($("input[type='file']").length==maxNum){
var flag=false;
$("input[type='file']").each(function(){
if(this.value==""){
flag=true;
return false;
}
});
if(flag){
$("#img"+i).parent().remove();
files.remove();
}
else{
$("input[type='file']:first").before(files.clone().val(""));
$("#img"+i).parent().remove();
files.remove();
$("input[type='file']:first").css("display","block");
}
}
else{
$("#img"+i).parent().remove();
files.remove();
}
}
}
function imgchange(y) {
var lastFile=$('input[type="file"]:first');
var imgtype = lastFile.val().substring(lastFile.val().lastIndexOf(".")+1);
imgtype = imgtype.toLowerCase();//处理大小写
if(imgtype!= "bmp"&&imgtype!= "jpg"&&imgtype!= "gif"&&imgtype!="png"){
alert("只能上传bmp,jpg,gif格式的图片！");
$("input[type='file']:first").before(lastFile.clone().val(""));
$("#img"+y).parent().remove();
lastFile.remove();
$("input[type='file']:first").css("display","block");
}
else{
$("#img"+y).parent().remove();
var docObj =document.getElementById("file_"+y);
var div_show= document.getElementById("div_show");
var filePath=lastFile.val().substring(lastFile.val().lastIndexOf("\\")+1);
if($.inArray(filePath, nameList)!=-1)
{

lastFile.before(lastFile.clone().val(""));
lastFile.remove();
alert("请不要重复上传图片");
}
else{
nameList[y]=filePath;
lastFile.css("display","none");
var no=lastFile.attr("id").substring(lastFile.attr("id").lastIndexOf("_")+1,lastFile.attr("id").length);
if($("input[type='file']").length<maxNum){
lastFile.before("<input type='file' name='file' id='file_"+(new Number(no)+1)+"' style='width:150px;display:block;' οnchange='javascript:imgchange("+(new Number(no)+1)+");' accept='image/*' />");
}
$("#div_show div:first").before("<div style='float:left' ><img id='img" + y + "' /><img src='./timg.jpg' style='width:20px;height:20px;'οnclick='deleteonepic("+y+")'></img></div>");
var imgObjPreview = document.getElementById("img"+y);
if (docObj.files && docObj.files[0]) {
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '100px';
imgObjPreview.style.height = '60px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();不显示
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}

else {
//使用滤镜(ie)
docObj.select();
var imgSrc = document.selection.createRange().text;
alert(imgSrc);
var localImagId = document.getElementById("img" + i);
//初始大小
localImagId.style.width = "100px";
localImagId.style.height = "60px";
//图片异常，防止用户修改后缀来伪造图片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch (e) {
alert("您上传的图片格式不正确，请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
}
return true;
}
}
</script>
</BODY>
</HTML>