文件上傳控件 jQuery-File-Upload在 MVC3中的實現

今天見園友發的文章在介紹jquery file upload插件，忍不住去實操了一把，支持多選（IE除外），有上傳進度條，上傳完可以預覽，能批量刪除，批量停止下載等常功能，並且是非Activex,非Flash的，文件也不大，感覺還不錯。

但不是MVC的，於是乎，網上找了一個Demo，本地運行之后，發現有一點小Bug，但瑕不掩瑜，這里分享給園友，有興趣的可以來下載。

Demo中引用的JS和Css有Bug，修改后，還發現有些是可以刪除的，刪除后代碼如下：

@{
    ViewBag.Title = "Bootstrap version demo";

    Html.RequiresCss("Bootstrap/bootstrap.min.css", "Content", 2);
    //Html.RequiresCss("Bootstrap/bootstrap-responsive.min.css", "Content", 3);
    //Html.RequiresCss("Bootstrap/bootstrap-image-gallery.min.css", "Content", 4);

    Html.RequiresCss("FileUpload/jquery.fileupload-ui.css", "Content", 5);
    
    
    Html.RequiresJs("jquery/1.7.1/jquery.min.js", "googleCDN", 1);
    Html.RequiresJs("jqueryui/1.8.18/jquery-ui.min.js", "googleCDN", 2);

    Html.RequiresJs("FileUpload/tmpl.min.js", "Content", 5);
    //Html.RequiresJs("FileUpload/canvas-to-blob.min.js", "Content", 5);
    //Html.RequiresJs("FileUpload/load-image.min.js", "Content", 5);

    //Html.RequiresJs("Bootstrap/bootstrap-image-gallery.min.js", "Content", 6);
    //Html.RequiresJs("Bootstrap/bootstrap.min.js", "Content", 6);

    Html.RequiresJs("FileUpload/jquery.iframe-transport.js", "Content", 10);
    Html.RequiresJs("FileUpload/jquery.fileupload.js", "Content", 10);
    Html.RequiresJs("FileUpload/jquery.fileupload-ip.js", "Content", 20);
    Html.RequiresJs("FileUpload/jquery.fileupload-ui.js", "Content", 30);

    Html.RequiresJs("FileUpload/locale.js", "Content", 90);
    Html.RequiresJs("FileUpload/main.js", "Content", 99);
}

當然有些引用文件很小，可以合並，這里沒有合並，有興趣可以二次加工，以方便使用。

運行后效果如下：

下載地址：http://download.csdn.net/detail/wufei_8898/5233668