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 />

在每个autoUpload中，我可以保存标题并将其与控制器中的文件和实体关联。如果用户想要，我无法将其恢复到视图以进行编辑。我试图修改_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。

MvcFileUploader添加/编辑自定义字段

1 个答案: