blueimp JQuery Файл Загрузить Multiple Instance

Question

Я пытаюсь реализовать blueimp ajaxfile загрузчиком на веб-сайте ASP.Net

Blueimp JQuery File Upload

я смог реализовать загрузчик успешно помимо настройки некоторые CSS из-за ограничений пространства.

Теперь мое фактическое требование - реализовать несколько экземпляров этого элемента управления на этой же странице asp.net.

Если кто-то попытался реализовать несколько экземпляров загрузки файла Blueimp JQuery для ASP.Net на той же странице, пожалуйста, помогите мне в этой проблеме.

Ниже основная часть кода я использую, чтобы добавить элемент управления на странице

<div id="fileupload"> 
<form action="Handler.ashx" method="post" enctype="multipart/form-data"> 
<div class="fileupload-buttonbar"> 
    <label class="fileinput-button"> 
     <span>Add files...</span> 
     <input id="file" type="file" name="files[]" multiple /> 
     <input id="hdnFundID" name="hdnFundID" value="1236" type="hidden" /> 
    </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> 
</form> 
<div class="fileupload-content"> 
    <table class="files"> 
    </table> 
    <div class="fileupload-progressbar"> 
    </div> 
</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">${namefdsa}</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">${Length}</td> 
     <td colspan="2"></td> 
    {{/if}} 
    <td class="delete"> 
     <button data-type="${delete_type}" data-url="${delete_url}">Delete</button> 
    </td> 
</tr> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script> 
<script src="//ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"></script> 
<script src="example/jquery.iframe-transport.js" type="text/javascript"></script> 
<script src="example/jquery.fileupload.js" type="text/javascript"></script> 
<script src="example/jquery.fileupload-ui.js" type="text/javascript"></script> 
<script src="example/application.js" type="text/javascript"></script> 

application.js (вставленный из автора комментарий)

$(function() 
{ 
    'use strict'; 
    // Initialize the jQuery File Upload widget: 
    $('#fileupload').fileupload({ }); 
    $('#fileupload').bind('fileuploaddone', function (e, data) { ...... }); 
    // Open download dialogs via iframes, 
    // to prevent aborting current uploads: 
    $('#fileupload .files a:not([target^=_blank])').live('click', function (e) 
    { 
    e.preventDefault(); ....... 
    }); 
}); 

Просьба представить ваши предложения.

Answer 1

На это ответил blueimp. Посмотрите здесь:

Итак, вам нужна форма для каждой загрузки и отдельных шаблонов, которые вы можете передать ссылки на инициализацию.

дать каждому виду один и тот же класс, например. 'FileUpload'

инициализировать их всех с

$('.fileupload').each(function() { 
    $(this).fileupload({ 
     dropZone: $(this) 
    }) 
    .bind('fileuploaddone', function(){}) 
    .bind('fileuploadfail', function(){}) 
}); 

отдельные шаблоны могут быть переданы на формах в качестве атрибутов.

<form ... 
    data-upload-template-id="template-upload-1" 
    data-download-template-id="template-download-1"> 
</form> 

Answer 2

Это то, что работает для меня:

Создать 1 экземпляр с идентификатором «FileUpload» (это идентификатор входного элемента). Второй экземпляр должен быть с другим идентификатором (например, fileupload2). также изменяют идентификатор «прогресса» div второго экземпляра (например, progress2) все остальное может быть идентичным между двумя экземплярами. использовать api на fileupload (первый экземпляр), как вы обычно делали (например, $ ('# fileupload'). Fileupload ({url: url, dataType: 'json', done: ........});

Затем привяжите изменение экземпляра SECOND к первому экземпляру (выбранные файлы будут фактически загружены через экземпляр FIRST).Вы можете сделать это следующим образом:

$('#fileupload2').bind('change', function (e) { 
$('#fileupload').fileupload('add', {files: $('#fileupload2')[0].files })                            });