Asp.Net MVC的幾個文件上傳方式

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