Загрузить несколько кнопок - одна страница

Question

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

Проблема в том, что я не могу найти способ иметь несколько кнопок загрузки на одной странице, где каждый из них будет заполнять собственное поле «Изображение». И клиент будет иметь n количество разделов на одной странице.

Вот мой JS код:

$(document).ready(function() { 
    $('.file_upload').uploadify({ 
    'uploader' : 'content/plugins/category_manager/upload/js/uploadify.swf', 
    'script' : 'content/plugins/category_manager/upload/upload.php', 
    'cancelImg' : 'content/plugins/category_manager/upload/js/cancel.png', 
    'folder' : 'content/plugins/category_manager/upload/uploads', 
    'fileExt'  : '*.jpg;*.gif;*.png', 
    'fileDesc'  : 'Image Files', 
    'auto'  : true, 
    'onComplete' : function(event, ID, fileObj, response, data) { 
     $("input[name=image]").empty(this).val(fileObj.name); 
     } 
    }); 
}); 

Answer 1

Этот код:

jQuery(".file_upload").each(function() { 
    jQuery(this).uploadify({ 
     height  : 30, 
     swf   : '/uploadify/uploadify.swf', 
     uploader  : '/script/uploadify/uploadify.php', 
     width   : 120 
    }); 
}); 

работает очень хорошо.

Это также требует, чтобы идентификаторы в элементах .file_upload были уникальными, даже если они не используются.

Answer 2

Ну вместо вызова Uploadify в классе CSS, вам нужно вызвать Uploadify для определенного ID, в противном случае он не будет работать.

Так что вам понадобится:

$('#upload1').uploadify({ 
$('#upload2').uploadify((

и т.д ....

Answer 3

У меня была точно такая же проблема. Я думаю, что вам нужно будет сделать пользовательский контроль для каждого экземпляра загрузки, которую вы хотите иметь на своей странице. Пример моего рабочего Uploadify управления:

//ascx 
<style type="text/css"> 
.hidden { display:none; } 
</style> 

<script src="/Uploadify/jquery.uploadify.v2.1.4.js" type="text/javascript"></script> 
<script src="/Uploadify/jquery.uploadify.v2.1.4.min.js" type="text/javascript"></script> 
<script src="/Uploadify/swfobject.js" type="text/javascript"></script> 
<link href="/Uploadify/uploadify.css" rel="stylesheet" type="text/css" /> 

<script type="text/javascript"> 

    $(document).ready(function() { 
     var obj = document.getElementById('<%= this.fileInput.ClientID %>'); 

     $(obj).uploadify({ 
      'uploader': '/uploadify/uploadify.swf', 
      'script': '/_handlers/Upload.ashx', 
      'cancelImg': '/uploadify/cancel.png', 
      'auto': true, 
      'multi': true, 
      'fileDesc': 'Image Files', 
      'fileExt': document.getElementById('<%= this.uTypes.ClientID %>').value, 
      'buttonText': 'Choose Images', 
      'folder': '/' + document.getElementById('<%= this.fileDest.ClientID %>').value, 
      'onAllComplete': function (event, queueID, fileObj, response, data) { 
       var btn = document.getElementById('<%= this.uploadButton.ClientID %>').click(); 
      } 
     }); 
    }); 

</script> 

<input id="fileInput" name="fileInput" type="file" runat="server" style="display:none" /> 
<input id="fileDest" name="fileDest" type="text" runat="server" style="display:none"/> 
<input id="uTypes" name="uTypes" type="text" runat="server" style="display:none"/> 

<asp:Button ID="uploadButton" runat="server" CssClass="hidden" OnClick="uploadButton_Clicked" CausesValidation="false"/> 

Это код позади секции управления, некоторые из параметров, которые вы видите, передаются в внешне

//Code behind 
public partial class UploadifyUpload : System.Web.UI.UserControl 
{ 
    private string fileDestination; 
    public string FileDestination 
    { 
     get { return fileDestination; } 
     set { fileDestination = value; } 
    } 

    private string uploadTypes; 
    public string UploadTypes 
    { 
     get { return uploadTypes; } 
     set { uploadTypes = value; } 
    } 

    public event EventHandler UploadButtonClicked; 

    protected void Page_Load(object sender, EventArgs e) 
    {  
     string virtualPath = fileDestination.Replace(Request.PhysicalApplicationPath, "/"); 
     virtualPath = virtualPath.Replace('\\', '/'); 
     this.fileDest.Value = virtualPath; 
     this.uTypes.Value = uploadTypes; 
    } 

    protected void uploadButton_Clicked(object sender, EventArgs e) 
    { 
     if (this.UploadButtonClicked != null) 
     { 
      this.UploadButtonClicked(this, new EventArgs()); 
     } 
    } 
} 

создать элемент управления, как это и передать несколько переменных. Место назначения файла и событие click обрабатываются в кодовом коде любой страницы, использующей элемент управления.

<mgmtControls:UploadifyUpload ID="uploadifyUpload" runat="server" UploadTypes="*.jpg;*.png;*.gif;*.bmp;*.jpeg" /> 

this.uploadifyUpload.UploadButtonClicked += new EventHandler(UploadifyUploadClicked); 
this.uploadifyUpload.FileDestination = DocumentPath; 

Это отлично работает для меня в Firefox, Chrome и IE, это должно привести вас в правильном направлении. Возможно, вам захочется добавить параметр загрузки по умолчанию, если у пользователя нет установленной флеш-памяти.

Answer 4

Я не уверен, что приведенные выше ответы охватывают элементы добавления, которые добавляются динамически (через AJAX после загрузки страницы). Я столкнулся с этой проблемой. Тогда при чтении функции «live()» на API JQuery, я понял, что это можно сделать так:

$(document).ready(function(){ 
    $('.upload_child_photograph').live('uploadifyEvent', function(){ 
     var child_id = $(this).attr('id').replace('upload_child_photograph_', ""); 

     $('#upload_child_photograph_' + child_id).uploadify({ 
      'auto'  : false, 
      'swf'  : 'uploadify.swf', 
      'uploader' : 'uploadify.php', 
      'uploadLimit' : 10, 
      'multi': true, 
      'fileSizeLimit' : 0 
     }); 
    }); 

    $(".upload_child_photograph").trigger("uploadifyEvent"); 
});