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