Uploadify複数のボタン - 1ページ

Question

私はクライアント用のウェブサイトを作成しており、1ページに多数のアップロードボタンを持つことを望んでいます。彼がファイルの選択をクリックすると、uploadifyはファイルをサーバーにアップロードし、入力フィールド「Image」の値をイメージのパスに変更します。

問題は、1つのページに複数のアップロードボタンを表示する方法が見つからないことです。それぞれのページには、それぞれのdivの「画像」フィールドが1つずつ埋められます。クライアントは同じページにn個のdivを持つことになります。

ここに私の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要素のIDが使用されていなくても一意であることを要求します。

Answer 2

まあ代わりにCSSクラスごとuploadify呼び出すのは、あなたがそれ以外の場合は動作しないだろう、特定のIDのためにuploadify呼び出す必要があります。

だから、必要があるでしょう：

$('#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()); 
     } 
    } 
} 

に渡された参照パラメータの一部いくつかの変数。ファイルの送り先とクリックイベントは、コントロールを使用しているページのコードビハインドで処理されます。

<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を介して動的に追加された要素をアップロードすることについてはわかりません。私はこの問題に直面した。

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