MvcFileUploader 添加/编辑自定义字段

Question

我正在使用 MVCFileUploader https://github.com/marufbd/MvcFileUploader

这非常适合在我的 MVC 项目中上传图像并将它们与实体相关联。

当我尝试为每个可编辑的图像添加标题字段时，我无法让它工作。我不确定我是否以正确的方式处理这个问题。我已修改 _MvcFileLoad.cshtml 中的模板以具有附加字段。我可以在每次上传时在控制器中获取标题输入，但我不知道如何使用此项目的实现将其发送回视图。

这是 _MvcFileUpload.cshtml，我添加了 autoUpload:true

  $('#@(formId)').fileupload('option', { 
    autoUpload: true,
    maxFileSize: @Model.MaxFileSizeInBytes,
    resizeMaxWidth: 1920,
    resizeMaxHeight: 1200,
    acceptFileTypes: @Model.FileTypes
}); 

我为标题添加了输入

<form id="@formId" action="@Model.UploadUrl" method="POST" enctype="multipart/form-data">        
    <div class="row fileupload-buttonbar">                    
        <div class="col-lg-7">
            <!-- The fileinput-button span is used to style the file input field as button -->
            <span class="btn btn-success fileinput-button">
                <i class="glyphicon glyphicon-plus"></i>
                <span>Add files...</span>
                <input type="file" name="files[]" multiple>

            </span>
            Title: <input name="title" required />

在每次自动上传时，我都可以保存标题并将其与控制器中的文件和实体相关联。如果用户愿意，我无法将其返回视图进行编辑。我试图修改_MvcFileUpload.cshtml中的模板下载

<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        <td>
            <span class="preview">
                {% if (file.thumbnailUrl) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
                {% } %}
            </span>
        </td>
        <td>
            <p class="name">
                {% if (file.url) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
                {% } else { %}
                    <span>{%=file.name%}</span>
                {% } %}
            </p>
            {% if (file.error) { %}
                <div><span class="label label-danger">Error</span> {%=file.error%}</div>
            {% } %}
        </td>
        <td>
        Title: <input name="title" required />
             </td>
        <td>
            <span class="size">{%=o.formatFileSize(file.size)%}</span>
        </td>
        <button class="btn btn-save" data-type="What to put here?" data-url="What to put here?" >
                    <i class="glyphicon glyphicon-save"></i>
                    <span>Save</span>
                </button>
            {% if (file.deleteUrl) { %}
                <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                    <i class="glyphicon glyphicon-trash"></i>
                    <span>Delete</span>
                </button>
                <input type="checkbox" name="delete" value="1" class="toggle">
            {% } else { %}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>

我看到的下一个问题是，如果我得到标题以进行编辑，如何将更新后的输入发回？只有 UploadFile 和 DeleteFile 方法可以调用。

总之，我正在尝试对此进行修改，以便用户可以上传多张照片并编辑其标题。
MvcFileUploader 使用 blueimp jQuery-File-Upload。我查看了该文档，在 PHP 的文档中有一些类似于我所要求的内容，但我无法让它与 MVC 一起使用。 https://github.com/blueimp/jQuery-File-Upload/wiki/PHP-MySQL-database-integration

Answer 1

只要你的Controller方法是HttpPost，你可以在方法中添加(string title)参数，它会自动从输入框中获取值。否则，您需要在 javascript ajax 调用中添加 data 属性。

要在上传后编辑标题，您应该有一个不同的页面。让他们查看图像，并在可编辑字段中显示一个带有标题的文本框，然后在那里有一个提交按钮。您无需再次上传图片，只需在表单中输入图片的 ID。