@{ ???ViewBag.Title = "Index"; ???Layout = "";}<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> ???<script src="/jquery-1.7.1.js" type="text/javascript"></script> ???<script src="/ajaxfileupload.js" type="text/javascript"></script> ???<script type="text/javascript"> ???????$(function () { ???????????//$(":button").click(function () { ???????????// ???if ($("#file1").val().length > 0) { ???????????// ???????ajaxFileUpload(); ???????????// ???} ???????????// ???else { ???????????// ???????alert("请选择图片"); ???????????// ???} ???????????//}) ???????????bindFileChange(); ???????}) ???????function bindFileChange() ???????{ ???????????$("#file1").change(function () { ???????????????if ($("#file1").val().length > 0) { ???????????????????ajaxFileUpload(); ???????????????} ???????????}); ???????} ???????function showUploadImgs(data) ???????{ ???????????if(data.imgList) ???????????{ ???????????????$("#dvUploadImgs").empty(); ???????????????for(var i in data.imgList) ???????????????{ ???????????????????$("#dvUploadImgs").append("<br/><span>" + data.nameList[i] + "</span><br/>"); ???????????????????if (/.(jpg|jpeg|png|gif|bmp)$/.test(data.nameList[i].toLowerCase())) ???????????????????{ ???????????????????????$("#dvUploadImgs").append("<img id=‘Img" + i + "‘ width=‘500px‘ src=‘" + data.imgList[i] + "‘ /><br/>"); ???????????????????} ???????????????} ???????????} ???????} ???????function ajaxFileUpload() { ???????????$.ajaxFileUpload ???????????( ???????????????{ ???????????????????url: ‘/Home/Upload‘, //用于文件上传的服务器端请求地址 ???????????????????type: ‘post‘, ???????????????????data: { Id: ‘123‘, name: ‘lunis‘ }, //此参数非常严谨，写错一个引号都不行 ???????????????????secureuri: false, //一般设置为false ???????????????????fileElementId: ‘file1‘, //文件上传空间的id属性 ?<input type="file" id="file" name="file" /> ???????????????????dataType: ‘json‘, //返回值类型 一般设置为json ???????????????????//async: false, ???????????????????success: function (data, status) ?//服务器成功响应处理函数 ???????????????????{ ???????????????????????showUploadImgs(data); ???????????????????????if (typeof (data.error) != ‘undefined‘) { ???????????????????????????if (data.error != ‘‘) { ???????????????????????????????alert(data.error); ???????????????????????????} else { ???????????????????????????????alert(data.msg); ???????????????????????????} ???????????????????????} ???????????????????????//由于ajaxFileUpload把原来的file元素替换成新的file元素，所以之前绑定的change事件就失效了，需要重新绑定一下 ???????????????????????bindFileChange(); ???????????????????}, ???????????????????error: function (data, status, e)//服务器响应失败处理函数 ???????????????????{ ???????????????????????alert(e); ???????????????????} ???????????????} ???????????) ???????????return false; ???????} ???????function checkFile(fileName) { //自己添加的文件后缀名的验证 ???????????return /.(jpg|png|gif|bmp|pdf|doc|docx)$/.test(fileName) ? true : (function () { ???????????????alert(‘文件格式仅支持jpg|png|gif|bmp|pdf|doc|docx格式！‘); ???????????????return false; ???????????})(); ???????} ???</script></head><body> ???<p><input type="file" id="file1" name="file" multiple="multiple" accept="image/gif, image/jpeg, image/jpg, image/png, *.pdf"/></p> ???@*<input type="button" value="上传" />*@ ???@*<p><img id="img1" alt="上传成功啦" src="" /></p>*@ ???<div id="dvUploadImgs"> ???</div></body></html>public ActionResult Upload() ???????{ ???????????NameValueCollection nvc = System.Web.HttpContext.Current.Request.Form; ???????????HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files; ???????????string imgPath = ""; ???????????List<string> imgList = new List<string>(); ???????????List<string> nameList = new List<string>(); ???????????if (hfc.Count > 0) ???????????{ ???????????????int i = 0; ???????????????while(i<hfc.Count) ???????????????{ ???????????????????imgPath = "/FileUpload/mytest_" + hfc[i].FileName; ???????????????????string PhysicalPath = Server.MapPath(imgPath); ???????????????????hfc[i].SaveAs(PhysicalPath); ???????????????????nameList.Add(hfc[i].FileName); ???????????????????imgList.Add(imgPath); ???????????????????i += 1; ???????????????} ???????????} ???????????//注意要写好后面的第二第三个参数 ???????????return Json(new { Id = nvc.Get("Id"), name = nvc.Get("name"), nameList = nameList, imgList = imgList }, "text/html", JsonRequestBehavior.AllowGet); ???????}//也可以使用百度的插件webuploader.js，前端不同，后端和上面的一样，示例如下：@{ ???ViewBag.Title = "Index"; ???Layout = "";}<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> ???<script src="/jquery-1.7.1.js" type="text/javascript"></script> ???<script src="/webuploader.js" type="text/javascript"></script> ???<link rel="stylesheet" type="text/css" href="/webuploader.css"> ???<script type="text/javascript"> ???????$(function () { ???????????// 初始化Web Uploader ???????????var uploader = WebUploader.create({ ???????????????// 选完文件后，是否自动上传。 ???????????????auto: true, ???????????????// swf文件路径 ???????????????swf: ‘/Uploader.swf‘, ???????????????// 文件接收服务端。 ???????????????server: ‘/Home/Upload‘, ???????????????// 选择文件的按钮。可选。 ???????????????// 内部根据当前运行是创建，可能是input元素，也可能是flash. ???????????????pick: ‘#filePicker‘, ???????????????// 只允许选择图片文件。 ???????????????accept: { ???????????????????title: ‘Images‘, ???????????????????extensions: ‘gif,jpg,jpeg,bmp,png‘, ???????????????????mimeTypes: ‘image/*‘ ???????????????} ???????????}); ???????????// 当有文件添加进来的时候 ???????????uploader.on(‘fileQueued‘, function (file) { ???????????????var $li = $( ???????????????????????‘<div id="‘ + file.id + ‘" class="file-item thumbnail">‘ + ???????????????????????????‘<img>‘ + ???????????????????????????‘<div class="info">‘ + file.name + ‘</div>‘ + ???????????????????????‘</div>‘ ???????????????????????), ???????????????????$img = $li.find(‘img‘); ???????????????// $list为容器jQuery实例 ???????????????var $list = $("#fileList"); ???????????????$list.append($li); ???????????????// 创建缩略图 ???????????????// 如果为非图片文件，可以不用调用此方法。 ???????????????// thumbnailWidth x thumbnailHeight 为 100 x 100 ???????????????var thumbnailWidth = 100; ???????????????var thumbnailHeight = 100; ???????????????uploader.makeThumb(file, function (error, src) { ???????????????????if (error) { ???????????????????????$img.replaceWith(‘<span>不能预览</span>‘); ???????????????????????return; ???????????????????} ???????????????????$img.attr(‘src‘, src); ???????????????}, thumbnailWidth, thumbnailHeight); ???????????}); ???????????// 文件上传过程中创建进度条实时显示。 ???????????uploader.on(‘uploadProgress‘, function (file, percentage) { ???????????????var $li = $(‘#‘ + file.id), ???????????????????$percent = $li.find(‘.progress span‘); ???????????????// 避免重复创建 ???????????????if (!$percent.length) { ???????????????????$percent = $(‘<p class="progress"><span></span></p>‘) ???????????????????????????.appendTo($li) ???????????????????????????.find(‘span‘); ???????????????} ???????????????$percent.css(‘width‘, percentage * 100 + ‘%‘); ???????????}); ???????????// 文件上传成功，给item添加成功class, 用样式标记上传成功。 ???????????uploader.on(‘uploadSuccess‘, function (file) { ???????????????$(‘#‘ + file.id).addClass(‘upload-state-done‘); ???????????}); ???????????// 文件上传失败，显示上传出错。 ???????????uploader.on(‘uploadError‘, function (file) { ???????????????var $li = $(‘#‘ + file.id), ???????????????????$error = $li.find(‘div.error‘); ???????????????// 避免重复创建 ???????????????if (!$error.length) { ???????????????????$error = $(‘<div class="error"></div>‘).appendTo($li); ???????????????} ???????????????$error.text(‘上传失败‘); ???????????}); ???????????// 完成上传完了，成功或者失败，先删除进度条。 ???????????uploader.on(‘uploadComplete‘, function (file) { ???????????????$(‘#‘ + file.id).find(‘.progress‘).remove(); ???????????}); ???????}); ???????????</script></head><body> ???<!--dom结构部分--> ???<div id="uploader-demo"> ???????<!--用来存放item--> ???????<div id="fileList" class="uploader-list"></div> ???????<div id="filePicker">选择图片</div> ???</div></body></html>使用jquery插件ajaxfileupload一次上传多个文件，示例
原文地址：https://www.cnblogs.com/itjeff/p/9372100.html