MVC表单
优点:学习成本低;操作方便无需额外代码;
缺点:外观一般;无法实时查看上传的效果;
中性:同步上传;
<!--CSHTML: 一定不要少了enctype = "multipart/form-data",否则,控制器收不到文件 --> @using (Html.BeginForm("#Uploader_Save","#控制器名称",FormMethod.Post, new { enctype = "multipart/form-data" })) { <input type="file" name="file" id="file" class="form-control" onchange='$("#File_Name").val(getFileName(this.value))' /> }
//控制器 public class 控制器Controller:Controller { [HttpGet] public ActionResult Uploader(Guid? Id) { return View(model); } [HttpPost] public ActionResult Uploader_Save(Guid? Id, HttpPostedFileBase file) { return JavaScript("dialog.close();"); } }
AJAXFileuploader
优点:jQuery系操作方便;
缺点:代码相对多了点;要额外学习jQuery;外观一般;
中性:异步上传;
$.ajaxFileUpload({ type: 'post', url: 'Upload_Save', fileElementId: "file",//<input type=file id=file name=file/> dataType: "json", data: { "Id": "" } , success: function (dd) { } , error: function (status, responseText) { } });
webuploader
优点:外观好看;中文文档;
缺点:代码相对多了点;要额外学习该插件;
中性:异步上传;
var opt = { auto: true, //自动上传 swf: '/Content/scripts/plugins/webuploader/uploader.swf', //SWF路径 server: '/Uploader_Save'), //上传地址 pick: { id: document.getElementById('file'), multiple: false }, //accept: { // title: 'Images', // extensions: 'jpg,jpge,png,gif', // mimeTypes: 'image/*' //}, formData: { 'Id': '' //定义参数 }, fileVal: 'file', //上传域的名称 duplicate: duplicate, //允许重复上传 //fileSingleSizeLimit: 2048 * 1024 //文件大小 }; var uploader = WebUploader.create(opt);