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"，否则会解析的不正确
4000
，其返回类型应该是{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. 附源代码下载地址：点击打开链接