在MVC.net中处理多个文件上载的最佳方法

时间:2011-07-26 19:54:24

标签: c# asp.net-mvc-3

我有一个表格,我可以将一个或多个文件(文件路径和名称)(pdf,excel,pictures,kml)链接到Land对象。我不知道处理这个问题的最佳方法是什么,我搜索并发现了很多方法,但似乎没有一种方法是正确的。我无法在AJAX中执行此操作,因为我的对象在创建新对象时未保存在数据库中。如果我发布表单并且出现错误,则返回视图,但我的“上传”文档将被清除(因为它是文件输入)。另外,我应该如何处理此对象的编辑以显示我的文档列表并允许删除/添加其他或仅编辑名称?

是否存在任何文件处理程序,我见过http://nuget.org/List/Packages/microsoft-web-helpers但它看起来不是很有趣。

2 个答案:

答案 0 :(得分:2)

telerik ASP.NET MVC上传扩展很不错。 http://demos.telerik.com/aspnet-mvc/razor/upload

答案 1 :(得分:2)

我已尝试pluploadjquery file upload

Jquery文件上传效果最好,因为plupload与表单提交混乱,我无法让防伪标记工作(还是!)。

您可能还想考虑uploadify,但我自己没有尝试过。

telerik库仅对某些项目是免费的,例如开源/非商业。

这是我用jQuery文件上传的代码......

 @section Header
{
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css"
        id="theme" />
    <link href="/Content/plugins/jqUpload/files/jquery.fileupload-ui.css" rel="stylesheet"
        type="text/css" />
    <link href="/Content/plugins/jqUpload/style.css" rel="stylesheet" type="text/css" />
}
<div id="fileupload" class="grid_24">
    @using (@Html.BeginForm("Upload", "Photo", new { Model.Id }, FormMethod.Post, new { enctype = "multipart/form-data" }))
 { 
        @Html.AntiForgeryToken()
        <div class="fileupload-buttonbar">
            <label class="fileinput-button">
                <span>Add files...</span>
                <input type="file" name="files" multiple="multiple" />
            </label>
            <button type="submit" class="start">
                Start upload</button>
            <button type="reset" class="cancel">
                Cancel upload</button>
            <button type="button" class="delete">
                Delete files</button>
        </div> 
 }
    <div class="fileupload-content">
        <table class="files">
        </table>
        <div class="fileupload-progressbar">
        </div>
    </div>
</div>
<div class="clear"></div>
<script id="template-upload" type="text/x-jquery-tmpl">
    <tr class="template-upload{{if error}} ui-state-error{{/if}}">
        <td class="preview"></td>
        <td class="name">${name}</td>
        <td class="size">${sizef}</td>
        {{if error}}
            <td class="error" colspan="2">Error:
                {{if error === 'maxFileSize'}}File is too big
                {{else error === 'minFileSize'}}File is too small
                {{else error === 'acceptFileTypes'}}Filetype not allowed
                {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
                {{else}}${error}
                {{/if}}
            </td>
        {{else}}
            <td class="progress"><div></div></td>
            <td class="start"><button>Start</button></td>
        {{/if}}
        <td class="cancel"><button>Cancel</button></td>
    </tr>
</script>
<script id="template-download" type="text/x-jquery-tmpl">
    <tr class="template-download{{if error}} ui-state-error{{/if}}">
        {{if error}}
            <td></td>
            <td class="name">${name}</td>
            <td class="size">${sizef}</td>
            <td class="error" colspan="2">Error:
                {{if error === 1}}File exceeds upload_max_filesize (php.ini directive)
                {{else error === 2}}File exceeds MAX_FILE_SIZE (HTML form directive)
                {{else error === 3}}File was only partially uploaded
                {{else error === 4}}No File was uploaded
                {{else error === 5}}Missing a temporary folder
                {{else error === 6}}Failed to write file to disk
                {{else error === 7}}File upload stopped by extension
                {{else error === 'maxFileSize'}}File is too big
                {{else error === 'minFileSize'}}File is too small
                {{else error === 'acceptFileTypes'}}Filetype not allowed
                {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
                {{else error === 'uploadedBytes'}}Uploaded bytes exceed file size
                {{else error === 'emptyResult'}}Empty file upload result
                {{else}}${error}
                {{/if}}
            </td>
        {{else}}
            <td class="preview">
                {{if thumbnail_url}}
                    <a href="${url}" target="_blank"><img src="${thumbnail_url}"></a>
                {{/if}}
            </td>
            <td class="name">
                <a href="${url}"{{if thumbnail_url}} target="_blank"{{/if}}>${name}</a>
            </td>
            <td class="size">${sizef}</td>
            <td colspan="2"></td>
        {{/if}}
        <td class="delete">
            <button data-type="${delete_type}" data-url="${delete_url}">Delete</button>
        </td>
    </tr>
</script>
@section Scripts
{
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
    <script src="/Content/plugins/jqUpload/files/jquery.iframe-transport.js" type="text/javascript"></script>
    <script type="text/javascript" src="/Content/plugins/jqUpload/files/jquery.iframe-transport.js"></script>
    <script type="text/javascript" src="/Content/plugins/jqUpload/files/jquery.fileupload.js"></script>
    <script type="text/javascript" src="/Content/plugins/jqUpload/files/jquery.fileupload-ui.js"></script>
    <script src="/Content/plugins/jqUpload/application.js" type="text/javascript"></script>
}

和控制器...

[HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Upload(int? id, IEnumerable<HttpPostedFileBase> files)
        {
            foreach (var file in files)
            {
                if (file.ContentLength > 0)
                {
                    var fileName = id + "_" + Path.GetFileName(file.FileName);
                    var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
                    file.SaveAs(path);
                }
            }
            return Json(new {name = fileName, type = "image/jpeg"});
        }