एकाधिक बटन अपलोड करें - एक पृष्ठ

Question

मैं एक ग्राहक के लिए एक वेबसाइट बना रहा हूं, और वह एक पेज, कई अपलोड बटन में सक्षम होना चाहता है। जब वह चुनिंदा फाइलों पर क्लिक करता है, अपलोड फ़ाइल को सर्वर पर अपलोड करता है और फिर छवि के पथ में इनपुट फ़ील्ड "छवि" के मान को बदलता है।

समस्या यह है कि मुझे एक पृष्ठ में एकाधिक अपलोड बटन रखने का कोई तरीका नहीं मिल रहा है, जहां प्रत्येक व्यक्ति व्यक्तिगत रूप से अपने स्वयं के div के "छवि" फ़ील्ड को भर देगा। और ग्राहक के पास एक ही पृष्ठ में div की संख्या होगी।

यहाँ मेरी जे एस कोड है: एक सीएसएस वर्ग प्रति uploadify बुलाने की

$(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 कॉल करने के लिए की जरूरत है।

तो तुम आवश्यकता होगी:

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

यह फ़ायरफ़ॉक्स, क्रोम और आईई में मेरे लिए बहुत अच्छा काम करता है, यह आपको सही दिशा में ले जाना चाहिए। यदि उपयोगकर्ता फ़्लैश फ्लैश भी स्थापित नहीं करता है तो आप एक डिफ़ॉल्ट अपलोड विकल्प जोड़ने पर विचार करना चाहेंगे।

Answer 4

मुझे यकीन नहीं है कि उपरोक्त उत्तरों में उन तत्वों को अपलोड करने के लिए कवर किया गया है जो गतिशील रूप से जोड़े गए हैं (AJAX के माध्यम से, पृष्ठ लोड होने के बाद)। मुझे इस समस्या का सामना करना पड़ा। फिर "live()" 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"); 
});