Суть: Как я могу reset подключиться к файловому файлу blueimp jQuery, чтобы он думал, что файлы уже не загружены?
Я попытался вызвать fileupload ('destroy'), а затем повторить инициализацию, но, похоже, не имел результата (я надеялся, что уничтожение также срывает отслеживание экземпляра).
FYI, я нахожусь на v8.8.1 - я бы предпочел не обновляться, потому что коллега каким-то образом изменил код - тьфу. Мы планируем удалить эту настройку и обновление, но в запланированную дату. Если мне нужно обновить, чтобы решить эту проблему, не стесняйтесь сообщить мне, потому что это абсолютно справедливо.
Первый элемент управления загрузкой на странице:
<form id="summaryFileUploadForm" action="/api/InvoiceDetailsFile/PostForProcessing" method="POST"
enctype="multipart/form-data" data-bind="disableFileUpload: InvoiceHasSummaryDocument() || (!InvoiceDataIsFilledIn())">
<div class="fileupload-buttonbar">
<div class="fileupload-buttons">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="fileinput-button">
<span>Add files...</span>
<input id="file" type="file" name="file" />
</span>
<span class="fileupload-loading"></span>
</div>
<!-- The global progress information -->
<div class="fileupload-progress fade" style="display: none">
<!-- The global progress bar -->
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
<!-- The extended global progress information -->
<div class="progress-extended"> </div>
</div>
</div>
<div data-bind="fadeVisible: InvoiceHasSummaryDocument()">
<span class="ui-icon ui-icon-check float-left"></span><span>A summary document has been uploaded.</span>
</div>
<span data-bind="fadeVisible: (!InvoiceDataIsFilledIn())">Please fill out invoice information before uploading a file.</span>
<!-- The table listing the files available for upload/download -->
<table role="presentation">
<tbody class="files" id="Tbody1"></tbody>
</table>
<script id="summaryFileDownloadTemplate" type="text/x-tmpl">
</script>
</form>
Второй элемент управления загрузкой на странице:
<form id="detailsFileUploadForm" action="/api/InvoiceDetailsFile/PostForProcessing" method="POST"
enctype="multipart/form-data" data-bind="disableFileUpload: Invoice().DetailItems().length > 0 || (!InvoiceHasSummaryDocument())">
<div class="fileupload-buttonbar">
<div class="fileupload-buttons">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="fileinput-button">
<span>Add files...</span>
<input id="file" type="file" name="file" />
</span>
<span class="fileupload-loading"></span>
</div>
<!-- The global progress information -->
<div class="fileupload-progress fade" style="display: none">
<!-- The global progress bar -->
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
<!-- The extended global progress information -->
<div class="progress-extended"> </div>
</div>
</div>
<span><strong>NOTE: </strong>Only Excel 2007+ (.xlsx) files are accepted. <a href="<%= ResolveUrl("~/asset/xlsx/Ligado_InvoiceUploadTemplate_Standard.xlsx") %>" target="_blank" id="A1">Need a blank Invoice Upload template?</a><br />
</span>
<span data-bind="fadeVisible: Invoice().DetailItems().length > 0">Invoice details have been uploaded.</span>
<span data-bind="fadeVisible: (!InvoiceHasSummaryDocument())">Please upload a summary file prior to uploading a details file.</span>
<!-- The table listing the files available for upload/download -->
<table role="presentation">
<tbody class="files" id="fileList"></tbody>
</table>
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade" style="display:none">
<td>
<span class="preview"></span>
</td>
<td>
<p class="name">{%=file.name%}</p>
{% if (file.error) { %}
<div><span class="error">Error:</span> {%=file.error%}</div>
{% } %}
</td>
<td>
<p class="size">{%=o.formatFileSize(file.size)%}</p>
{% if (!o.files.error) { %}
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
{% } %}
</td>
<td>
{% if (!o.files.error && !i && !o.options.autoUpload) { %}
<button class="start">Start</button>
{% } %}
{% if (!i) { %}
<button class="cancel">Cancel</button>
{% } %}
</td>
</tr>
{% } %}
</script>
<script id="template-download" type="text/x-tmpl">
</script>
</form>
Я могу очистить первый элемент управления, используя:
$("tbody.files").empty();
предположительно, потому что файл уже был загружен в этой точке (что хорошо).
Однако это не работает для второй формы. Я пробовал:
$("#detailsFileUploadForm").find('.cancel').click();
Это приводит к тому, что элементы исчезают со страницы, но они снова появляются при добавлении дополнительного файла.
Я также пробовал $("#detailsFileUploadForm").fileupload('destroy') без успеха (по-видимому, потому, что он не обрабатывает эти функции и больше связан с привязками.
Ответ на это был намного проще, чем я ожидал:
$("table tbody.files").empty();
Раньше, я думаю, я делал слишком много - попытка уничтожить / reset контейнер тоже не работал.
С этой одной строкой кода списки выглядят как reset, и все работает хорошо, насколько я могу судить.