Uploadify Pulsanti multipli - una pagina

Question

Sto creando un sito Web per un cliente e vuole essere in grado di avere in una pagina, molti pulsanti di caricamento. Quando fa clic su seleziona i file, uploadify carica il file sul server e quindi modifica il valore del campo di input "Immagine" sul percorso dell'immagine.

Il problema è che non riesco a trovare un modo per avere più pulsanti di caricamento in una pagina, dove ognuno di essi riempirà individualmente il proprio campo "Immagine" del div. E il cliente avrà n numero di div nella stessa pagina.

Ecco il mio codice 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

Questo codice:

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

opere molto fine.

Ciò richiede anche che gli ID negli elementi .file_upload siano univoci, anche se non vengono utilizzati.

Answer 2

Bene invece di chiamare uploadify per una classe CSS, è necessario chiamare uploadify per uno specifico ID, altrimenti non funzionerà.

Quindi si avrebbe bisogno:

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

ecc ....

Answer 3

Ho avuto questo problema esattamente lo stesso. Penso che quello che vorrete fare è creare un controllo utente per ogni istanza del caricamento che volete avere sulla vostra pagina. Esempio del mio lavoro di controllo 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"/> 

Questo è il codice dietro la sezione del controllo, alcuni dei parametri che vedete sono passati in esternamente

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

creo il controllo come questo e passano in alcune variabili. La destinazione del file e l'evento click sono gestiti nel codebehind di qualunque pagina sta usando il controllo.

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

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

Questo funziona perfettamente per me in Firefox, Chrome e IE, dovrebbe guidarti nella giusta direzione. Potresti prendere in considerazione l'aggiunta di un'opzione di caricamento predefinita se anche l'utente non ha installato Flash.

Answer 4

Non sono sicuro che le risposte precedenti coprano gli elementi uploadify che vengono aggiunti dinamicamente (tramite AJAX, dopo che la pagina è stata caricata). Ho affrontato questo problema. Poi durante la lettura della funzione "live()" sulle API jQuery, mi sono reso conto che può essere fatto in questo modo:

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