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);