有的项目会要求我们一次性选取多个图片上传，multiple=”multiple”，而不是增加多个上传的input，我们需要在单张上传的基础上进行一下改进。
图1 多图上传效果图
1、图片上传：
<input type='file' id='x_duotu' multiple="multiple" name='' accept="image/*" size='30'><button type='button' class='layui-btn submis' >上传</button>
<div class='multbox'><dl></dl></div>//用于展示上传的多张图片，上传的每个图片都将存放到<dd></dd>里边。
<input type='text' class='x_duotu'>
在单选的基础上加入了multiple="multiple"可以选择多张图片。 思路：既然在单图上传$(“#x_pic”).get(0). files[0]; 取第一个文件，那么files[1],files[2]则是取第2，第3个文件，只需要知道选择了多少个图片使用for循环即可实现多图上传。
首先，获取选择了多少个图片
var count=$(“#x_duotu”)[0].files.length；
可以使用count限制每次可以上传多少个图片，例如：if(count>5){alert(‘每次最多上传5张图片’);}
其次，索引是0开始，count-1结束
var ddstr='';
var instr='';
for(i=0;i<=count-1;i++){
$("#x_duotu").get(0).files[i];
//由于使用是for循环，本质也是一个一个的上传;返回的图片地址赋值给ddstr
ddstr+="<dd><img src='图片地址'></dd>":
//还需要图片地址拼接字符串，存放到input里边，提交到数据库保存
instr+="图片地址,";
} - $(“.multbox dl”).html(ddstr);图片展示到<div class=’multbox’><dl></dl></div>；可以对图片大小进行css设置;
- instr结尾是多了个逗号的需要截取长度：
instr.substring(0,instr.length-1);//截取以后的字符串
$(“.x_duotu”).val( instr.substring(0,instr.length-1));赋值到文本框
2、图片删除：
上传的多张图片，点击图片弹出提示是否删除，确认删除以后存放图片地址的文本框内对应的图片地址也需要同时删除。
if(!confirm("确认要删除吗？")){
return false;
};
var clickeq=$(this).parent().find("dd").index(this);//点击的是第几个
var instr=$(“.x_duotu”).val();//获取文本框内图片地址
var tagarr=instr.split(",");//分割成数组，以便接下来删除对应的数组元素
tagarr.splice(clickeq, 1);//删除元素
var newstr=tagarr.join(',');//重新转换成字符串
$(“.x_duotu”).val(newstr)
$(this).parent().find("dd").eq(clickeq).remove();//移除点击的图片所在的dd 3、图片拖动排序：
加载jquery-ui.js，使用sortable拖动排序。图片排序以后文本框图片地址也要改变排序
思路：在排序以后重新获取每个dd内图片的地址，拼接字符串赋值到input，即可实现文本里内图片顺序的改变。
$( ".multbox " ).sortable({
cursor: "move",
items :"dd", //dd拖动
opacity: 0.6, //透明度
revert: false, //动画
update : function(event, ui){
//这里是图片排序以后的事件
var ctdd=$( ".multbox dd" ).length;
var fistr='';
for(i=0;i<ctdd;i++){
fistr+=$( ".multbox dd img" ).eq(i).attr('src');
console.log(fistr);
//截取字符串长度减一
fistr= fistr.substring(0,fistr.length-1)
$(".x_duotu" ).val(fistr);
}
}) 4、安全性
同单图上传一样，要判断图片木马，这是最主要的，然后是判断登陆、大小、格式等；
