使用jquery插件ajaxfileupload一次上传多个文件，示例
Posted itjeff
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用jquery插件ajaxfileupload一次上传多个文件，示例相关的知识，希望对你有一定的参考价值。
@{ 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一次上传多个文件，示例的主要内容，如果未能解决你的问题，请参考以下文章
jQuery插件ajaxfileupload.js源码与使用
jsp中使用jquery的ajaxfileupload插件怎么实现异步上传