MVC4中使用Jquery.Multifile.js和Jquery.form.js一次上传多个文件

最近有一个小型的内部网站的任务，需要一次上传多个小文件到服务器上功能，网上找了好久上传文件的插件，谢谢网上的帮助，找到了Jquery.Multifile.js和Jquery.form.js

使用过程中遇到了很多问题。介绍下给需要的人，免得别人也走我的弯路。但是不是很会写文章，若不明白就跟帖吧。

1. html文档代码片段：引入jquery-1.7.1.js; jquery.form.js;jquery.MultiFile.js;json2.js

<script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.form.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.MultiFile.js" type="text/javascript"></script>
<script src="../../Scripts/json2.js" type="text/javascript"></script>
<style type=""text/css">
#funDetail td,#funDetail tr{ padding:4px; border:#333 1px solid; border-collapse:collapse; cellspacing:0px; }
</style>
<form id="addUploadForm" method="POST" action= "/FileUpload/IndexFile"  tartget="outputifr" enctype="multipart/form-data">
        <label >
            文件路径：
      </label>
      <input name="filePath" type="file" id="filePath" />
       <input id="uploadAdd" name="uploadAdd" class="button" type="button" value="上传" />
       <div id="files_list"></div>
       <span id="message" name="msg" style="display : none"></span>
</form>
<iframe id="output" name="outputifr" style="display:none"></iframe>

<iframe id="output" name="outputifr" style="display:none"></iframe> 是为了防止页面刷新用的隐藏的iframe，此处查了网上的帮助，网址如下

点击打开链接

2. jquery.Multifile.js 是一个文件选择器，其网址在点击打开链接 点击打开链接可以阅读其帮助和下载文件

   看帮助可以知道其有多种风格，js中的使用方法如下：

 $("#filePath").MultiFile({
            accept: 'pdf',
            max: 3,
            STRING: {
                remove: '移除',
                selected: '已经选择了: $file',
                denied: '不能选择： $ext!',
                duplicate: '文件重复:\n$file!'
            },
            list: '#files_list',
            afterFileSelect: function (element, value, master_element) {
                element.name = value;
            }
        });

afterFileSelect: 很重要，没有这个函数，提交上去的文件只有一个，而不能是多个

 

3. 上传文件提交采用jquery.form.js：可以从点击打开链接  下载并学习

 var options = {
            url: '/FileUpload/IndexFile',
            type: 'POST',
            target: '#output',
            iframe: true,
            //timeout: 3000,
            success: function (responseText, statusText, xhr, $form) {
                var vartext = JSON.parse(responseText);
                $('input:file').MultiFile('reset');
                $('#message').html(vartext.msg);
                $('#message').show();
                setTimeout(function () { $('#message').hide() }, 5000);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.responseText);
            }
        };

        $('#addUploadForm').submit(function () {
            $(this).ajaxSubmit(options);
            return false;
        });

    用  ajaxSubmit时注意iframe需要指定为true，否则ie下用的是xhr，而firefox用的是iframe;

    函数返回值也必须十分注意，不能指定datatype也不能指定为"json"，否则会解析的不正确，其返回类型应该是{key，value}样式的值，

   需指定函数返回类型为"text/html"； 需要调用JSON.parse(responseText)将其转化为json格式；返回值这块儿花了我非常多的时间才搞清楚。

 4. MVC中controller代码片段如下：

        [HttpPost]
        public ActionResult IndexFile()
        {
            foreach (string upload in Request.Files)
            {
                string filename = Path.GetFileName(Request.Files[upload].FileName);
                string path = AppDomain.CurrentDomain.BaseDirectory + @"Uploads\";
                if (!Directory.Exists(path)) Directory.CreateDirectory(path);
                Request.Files[upload].SaveAs(Path.Combine(path, filename));
            }
            Dictionary<string, string> map1 = new Dictionary<string, string>();
            map1.Add("msg", "success");
            return Json(map1, "text/html");
        }

   5. 附源代码下载地址：点击打开链接