Загрузить несколько кнопок - одна страница - PullRequest
6 голосов
/ 25 января 2012

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

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

enter image description here

Вот мой код 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);
        }
  });
});

Ответы [ 4 ]

19 голосов
/ 29 июня 2012

Этот код:

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

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

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

2 голосов
/ 25 января 2012

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

 //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());
        }
    }
}

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

<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, оно должно привести вас в правильном направлении. Возможно, вы захотите добавить опцию загрузки по умолчанию, если у пользователя также не установлена ​​флэш-память.

Multiple buttons working

2 голосов
/ 25 января 2012

Что ж, вместо вызова uploadify для класса css, вам нужно вызвать uploadify для определенного идентификатора, иначе это не сработает.

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

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

и т.д ....

0 голосов
/ 06 июня 2013

Я не уверен, охватывают ли вышеуказанные ответы элементы загрузки, которые добавляются динамически (через 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");
});
...