通过修改ajaxFileUpload.js实现多图片动态上传并实现预览
参考：http://smotive.iteye.com/blog/1903606
大部分我也是根据他的方法修改的，我也要根据name实现动态的多文件上传功能，但是有个问题使我一直无法实现多文件上传。
就是我发现上传到后台的文件的数目是你要上传数量的平方。找了很久才发现这是因为他的代码还是有点小问题：
前段时间做项目有个一个实现多文件上传的功能，因为以前也没有接触过，于是花了好几天时间才给弄好了，但是回头一看也没什么，咋就花了那么长时间呢，看来自己的效率有待提高啊。axFileUpload.js里面的代码修改一下就能支持多个Id同时上传，把源码中的这个：
if (typeof (fileElementId) == 'string') { fileElementId = [fileElementId]; } for (var i in fileElementId) { //按name取值 var oldElement = jQuery("input[name=" + fileElementId[i] + "]"); oldElement.each(function () { var newElement = jQuery($(this)).clone(); jQuery(oldElement).attr('id', fileId);//只将旧元素的Id修改，没有修改name jQuery(oldElement).before(newElement); jQuery(oldElement).appendTo(form); }); }
因为是按name上传，那么我们需要把原页面中的name属性给修改掉，再加一行就ok了：
if (typeof (fileElementId) == 'string') { fileElementId = [fileElementId]; } for (var i in fileElementId) { //按name取值 var oldElement = jQuery("input[name=" + fileElementId[i] + "]"); oldElement.each(function () { var newElement = jQuery($(this)).clone(); //jQuery(this).attr('id', fileId); jQuery(this).attr('name', fileId); jQuery(this).before(newElement); jQuery(this).appendTo(form); }); }
,这样就能实现根据name动态多文件上传了。
页面代码如下:
<body style="background: #FFFFFF;"> <form action="/Home/UploadImage" id="form1" name="form1" method="post"> <table style="width: 100%" class="SubTable"> <tbody> <tr class="tr"> <td style="width: 80%"> <input name="upload" type="file" onchange="IsRepeat(this)" style="width: 100%" /> </td> <td style="width: 20%"> <input type="button" value="删除" onclick="deletefile(this, 4)" /> </td> </tr> <tr class="footTr"> <td colspan="2"> <input type="button" value="添加" onclick="addfile(this, 4)" /></td> </tr> <tr> <td style="text-align: center" colspan="2"> <input type="button" value="提交" id="BtnSub" /></td> </tr> </tbody> </table> <table> <tr> <td style="height: 130px; width: 18%">图片预览: </td> <td style="height: 130px; width: 82%"> <table style="width: 100%" class="SubTable"> <tbody> <tr class="tr"> <td> <div id="trimagedivBef" style="display: none"></div> </td> <td style="width: 25%"> <input style="width: 100px; height: 80px; display: none" type="image"> </td> <td style="width: 25%"> <input style="width: 100px; height: 80px; display: none" type="image"> </td> <td style="width: 25%"> <input style="width: 100px; height: 80px; display: none" type="image"> </td> <td style="width: 25%"> <input style="width: 100px; height: 80px; display: none" type="image"> </td> <td> <div id="trimagedivAft" style="display: none"></div> </td> </tr> <tr class="footer"> <td> <div id="footerimagedivBef" style="display: none"></div> </td> <td class='footertd' style="width: 25%"> <div style="display: none"><a href="#">删除</a></div> </td> <td class='footertd' style="width: 25%"> <div style="display: none"><a href="#">删除</a></div> </td> <td class='footertd' style="width: 25%"> <div style="display: none"><a href="#">删除</a></div> </td> <td class='footertd' style="width: 25%"> <div style="display: none"><a href="#">删除</a></div> </td> <td style="text-align: center"> <div id="footerimagedivAft" style="display: none"></div> </td> </tr> </tbody> </table> </td> </tr> </table> </form> </body>
js代码,上传成功后要实现预览功能，如果不考虑安全因素的话直接获取图片保存在的路径就行，但是这样是肯定不被允许的，太不安全，于是把文件放到一个指定的文件夹下
后再通过一个action获取该图片的路径:
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/js/ajaxfileupload.js"></script>
<script type="text/javascript">
function IsRepeat(obj) {
var filters = "jpg png bmp";
var val = $(obj).val();
var arr = val.split('.');
if (filters.indexOf(arr[arr.length - 1]) < 0) {
$(obj).val("");
alert("请上传 " + filters + " 格式的图片", "提示");
return;
}
var count = 0;
$("input[name='upload']").each(function () {
if ($(this).val()) {
if ($(this).val() == val) {
if (count >= 1) {
$(this).val("");
alert("已上传该图片，请重新选择！", "提示");
return;
}
count++;
}
}
})
}
function deleteImage(val) {
if (confirm("是否删除图片？")) {
falg = false;
var id = "#del_" + val;
$(id).parent().remove();
id = "#image_" + val;
$(id).parent().remove();
$("#trimagedivAft").closest("td").before("<td style=\"width:25%\"><input style=\"width:100px;height:80px;display:none\" type=\"image\" src=\"#\"></td>");
$("#footerimagedivAft").closest("td").before("<td class='footertd' style=\"text-align:center;width:25%\"><div style=\"display:none\"><a href=\"#\">删除</a></div></td>");
}
}
function addfile(obj, maxNum) {
$(obj).closest("tr").before(" <tr class=\"tr\"><td width=\"80%\"><input name=\"upload\" type=\"file\" onchange=\"IsRepeat(this)\" style=\"width:100%;\" /></td><td width=\"20%\"><input type=\"button\" value=\"删除\" onclick=\"deletefile(this," + maxNum + ");\" /> </td></tr>");
//检测是否已经到达最大的个数，需要隐藏添加按钮
if (maxNum > 0) {
if ($(obj).closest("table").children().children(".tr").length == maxNum) {
$(obj).hide();
}
}
return false;
}
function deletefile(obj, maxNum) {
//检测是否已经到达最大的个数，需要隐藏添加按钮
if (maxNum > 0) {
var inputAdd = $(obj).closest("table").children().children(".footTr").children().children("input");
var num = $(obj).closest("table").children().children(".tr").length;
$(obj).closest("tr").remove();
if ((num - 1) < maxNum) {
inputAdd.show(); //定位到添加按钮
}
}
else {
$(obj).closest("tr").remove();
}
return false;
}
var falg = false;
var countFalg = 0;
$("#BtnSub").click(function () {
var falg = true;
$("input[name='upload']").each(function () {
if ($(this).val() == "") {
falg = false;
}
})
if (!falg) {
alert("上传图片不能为空", "提示");
return;
}
$.ajaxFileUpload({
url: "@Url.Action("PhotoUploadImage", "Home")",
secureuri: false,
fileElementId: 'upload',//修改了ajaxFileUpload.js源码，支持上传多个name相同的文件，修改处在45行~57行
dataType: 'json',
success: function (data, status) {
//alert(data['status'] + '-----' + data['fileName'] + '-----' + data['extName']);
if (data != null) {
var returnValue = data['filePath'];
if (returnValue) {
var array = returnValue.split('|');
var retLen = array.length;
var ss = "";
for (var i = 0; i < array.length; i++) {
if (array[i]) {
var len = $("#trimagedivAft").closest("tr").children(".td").length;
var ran = Math.ceil(Math.random() * 9999999999999999);
var fp = "";
fp = "@Url.Action("ShowImage", "Home")" + "?filePath=" + array[i].split(',')[0];
if (!falg) {
$("#trimagedivAft").parent().prev().remove();
$("#footerimagedivAft").parent().prev().remove();
$("#trimagedivBef").closest("td").after("<td class='td' style=\"width:25%\"><input width='100px' id='image_" + ran + "' height='80px' value=" + array[i] + " src=" + fp + " type=\"image\"/></td>");
$("#footerimagedivBef").closest("td").after("<td class='footertd' style=\"text-align:center;width:25%\"><div onclick='deleteImage(" + ran + ")' id='del_" + ran + "'><a href=\"#\">删除</a></div></td>");
} else {
$("#trimagedivBef").parent().next().remove();
$("#footerimagedivBef").parent().next().remove();
$("#trimagedivAft").closest("td").before("<td class='td' style=\"width:25%\"><input width='100px' id='image_" + ran + "' height='80px' value=" + array[i] + " src=" + fp + " type=\"image\"/></td>");
$("#footerimagedivAft").closest("td").before("<td class='footertd' style=\"text-align:center;width:25%\"><div onclick='deleteImage(" + ran + ")' id='del_" + ran + "'><a href=\"#\">删除</a></div></td>");
}
countFalg++;
if (countFalg >= 4) {
falg = true;
}
}
}
}
}
},
error: function (data, status, e) {
//alert(e);
alert("上传失败");
return false;
}
})
})
</script>
后台上传代码:
//上传附件 public void PhotoUploadImage(object sender, EventArgs e) { var files = Request.Files; DateTime now = DateTime.Now; string time = DateTime.Now.ToString("yyyy-MM"); string tmpPath = Server.MapPath("~/App_Data/upload/images/" + time); string filesPathArr = ""; if (files != null && files.Count > 0) { for (int i = 0; i < files.Count; i++) { var file = files[i]; if (Directory.Exists(tmpPath) == false)//如果不存在就创建file文件夹 { Directory.CreateDirectory(tmpPath); } double fileSize = file.ContentLength; Thread.Sleep(10); string name = Path.GetFileNameWithoutExtension(file.FileName); string extName = Path.GetExtension(file.FileName); string fileName = DateTime.Now.ToString("yyyyMMddHHmmssfffff") + extName; try { string filePath = tmpPath + "/" + fileName; file.SaveAs(filePath); filesPathArr += "/App_Data/upload/images/" + time + "/" + fileName + "," + fileSize + "," + name + "," + extName + "|"; } catch (Exception ex) { Response.Write(@"{ status : 'error', msg : '" + ex.Message + @"' }"); Response.End(); return; } } } Response.Write(@"{ status : 'success', msg: { Origin : '' }, filePath:'" + filesPathArr + @"' }"); }
获取上传图片路径的代码:
public ActionResult ShowImage(string filePath = "") { string path = Server.MapPath("~" + filePath); return base.File(path, "Image/jpeg"); }