jquery插件文件上传

文件上传有很多jQuery插件,一般我最为常用的就是uploadify.js和ajaxfileupload.js，二者都是以file标签为依托，前者需要在页面初始化时就渲染插件，比较适合单纯的文件上传，如果用户操作完之后（比如选择了某个单选框或者复选框）再点击上传往后台传递的参数不会发生改变，只能页面初始化的时候把相应的参数写到formData对象中，但是样式比较好看一些；后者实用唯一的缺憾就是需要自己去设计样式。下面分别介绍二者使用。

uploadify.js：

            $(\'#file\').uploadify({//前台file标签id
                \'formData\': { \'Method\': \'UploadFile\' },//提交参数
                \'auto\': true, //默认值是true，默认自动上传 ,自动上传文件会上传所有的文件，但是一个一个上传的
                \'multi\': false, //默认值true 选择框内可同时选择多个文件，此处false只能选择一个
                \'uploadLimit\': 30, //上传个数显示，一次只能上传一个
                \'width\': 140,
                \'height\': 20,
                \'fileSizeLimit\': \'50MB\',
                \'fileTypeDesc\': \'上传附件类型\',
                \'fileTypeExts\': \'*.doc;*.docx;*.xls;*.xlsx;*.jpg;*.png;*.bmp;*.pdf;*.txt;\', //选择的格式
                \'fileObjName\': \'Filedata\', //后台获取到的文件的名称 
                \'buttonText\': \'浏览\',
                \'swf\': \'../../../../uploadify/uploadify.swf\',
                \'queueID\': \'queue\',//用于显示上传过程或作其他处理
                \'uploader\': Attachements.url, //后台处理上传的URL
                \'onUploadError\': function (event, ID, fileObj, errorObj) {
                    if (errorObj.type.toLowerCase() == \'file size\') {
                        $.messager.alert(\'系統提示\', \'文件太大，限值50MB\', \'error\');
                    }
                },
                \'onUploadSuccess\': function (file, data, response) {
                   //上传成功操作
                }
            });
        html:<div id="queue"></div><input type=\'file\' id=\'file\'/>

ajaxfileupload.js

              $.ajaxFileUpload({
                    url: \'webs/Sewage/AJAX/ImportData.ashx?Type=DataImport&SheetName=\' + escape(sheetName),
                    type: \'post\',
                    secureuri: false,
                    fileElementId: \'file1\',
                    dataType: \'text\',//或‘json’
                    success: function (msg, status) {
                        if (msg.indexOf("ok") > 0)
                            alert("数据导入成功！点击\"查看日志\"查看本次导入日志记录。");
                        else if (msg.indexOf("error") > 0) {
                            alert("数据导入完成，但导入过程出现错误！点击\"查看日志\"查看错误信息。");
                        }
                        else
                            alert(msg)
                        $(\'#file1\').val(\'\');
                    }
                });
        <pre name="code" class="javascript">  html:<input type=\'file\' id=\'file1\' name=\'file1\'/> <!--注意使用ajaxfileupload.js时html标签需要添加name属性否则后台获取不到数据-->

后台代码：

                //HttpFileCollection file = HttpContext.Current.Request.Files; 或使用这个方式   获取form所有上传的内容返回的是一个集合
                HttpPostedFile file = HttpContext.Current.Request.Files["file1"];//
                if (file.FileName.EndsWith("xls"))
                    extension = ".xls";
                else
                    extension = ".xlsx";                
                //path = "ImportData"+DateTime.Now.ToString("yyyyMMddmmss") + Path.GetExtension(file.FileName).ToLower();
                 path = DateTime.Now.ToString("yyyyMMddHHmmss")+"ImportData"+extension;
                string filePath=HttpContext.Current.Server.MapPath("~/uploadfiles/" + path);
                file.SaveAs(filePath);