MvcFileUploader添加/編輯自定義字段

Question

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

這個作品真的很好在我的MVC項目上傳圖片，並將它們與實體相關聯。

當我嘗試爲每個可編輯的圖像添加一個標題字段時，我無法使其工作。我不確定我是否正確地採用這種方法。我修改了_MvcFileLoad.cshtml中的模板以增加字段。我可以在每次上傳時在控制器中獲得標題輸入，但我不知道如何使用此項目的實施將其發送回視圖。

這是_MvcFileUpload.cshtml，我已經添加autoUpload：真

$('#@(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

只要你的控制方法是HttpPost，您可以在(string title)參數添加到方法，它會自動抓取從輸入框中的值。否則，您需要將一個data屬性添加到javascript ajax調用中。

要在標題上傳後編輯標題，應該有不同的頁面。讓他們查看圖像，並在可編輯字段中顯示帶有標題的文本框，然後在那裏提交提交按鈕。您不必再次上傳圖像，只需在表單中提供圖像的ID即可。