2010-03-25 31 views

उत्तर

7

का उपयोग कर आप उदाहरण www.ExtJS.com पर उपलब्ध को देखें, तो आप this one मिल जाएगा फाइल अपलोड क्षेत्र बनाने के लिए।

हालांकि यह मानक HTML फ़ाइल अपलोड पर आधारित है - जैसे this answer सुझाव देता है।

26

जहां तक ​​विशेष कदम ExtJS 3x में समर्थित कार्यक्षमता का उपयोग, चिंतित हैं, अपने सबसे अच्छे सबसे अच्छा इस मॉड्यूल/प्लगइन का उपयोग करने के लिए है:

http://dev.sencha.com/deploy/dev/examples/form/file-upload.html

कोर स्क्रिप्ट Ext जे एस पैकेज के साथ आता है, में आपका मुख्य HTML फ़ाइल (जहां कोर Ext स्क्रिप्ट से जुड़ा हुआ है), अपने अन्य लिपियों के बाद सिर अनुभाग में डाल:

<script type="text/javascript" src="nameofyourextfolder/examples/ux/fileuploadfield/FileUploadField.js"></script> 

दुख की बात है, वहाँ तथापि Ext JS- के इस तत्व पर प्रलेखन की एक बड़ी राशि नहीं है बुनियादी के लिए कार्यक्षमता, आप नीचे दिए गए का उपयोग कर एक async अपलोड क्षेत्र के साथ एक रूप बना सकते हैं:

  myuploadform= new Ext.FormPanel({ 
       fileUpload: true, 
       width: 500, 
       autoHeight: true, 
       bodyStyle: 'padding: 10px 10px 10px 10px;', 
       labelWidth: 50, 
       defaults: { 
        anchor: '95%', 
        allowBlank: false, 
        msgTarget: 'side' 
       }, 
       items:[ 
       { 
        xtype: 'fileuploadfield', 
        id: 'filedata', 
        emptyText: 'Select a document to upload...', 
        fieldLabel: 'File', 
        buttonText: 'Browse' 
       }], 
       buttons: [{ 
        text: 'Upload', 
        handler: function(){ 
         if(myuploadform.getForm().isValid()){ 
          form_action=1; 
          myuploadform.getForm().submit({ 
           url: 'handleupload.php', 
           waitMsg: 'Uploading file...', 
           success: function(form,action){ 
            msg('Success', 'Processed file on the server'); 
           } 
          }); 
         } 
        } 
       }] 
      }) 

क्या इस कोड को करना होगा एक अपलोड क्षेत्र और एक अपलोड बटन के साथ एक नया FormPanel पैदा करते हैं। जब आप अपलोड बटन पर क्लिक करते हैं- चयनित फ़ाइल को सर्वरसाइड स्क्रिप्ट handleupload.php (या जो कुछ भी आप इसे कहते हैं) पर भेजा जाएगा। यह तब स्क्रिप्ट है जो फ़ाइल के साथ आप क्या करना चाहते हैं उसे संभालती है। इसका एक उदाहरण संभावित रूप से हो सकता है:

$fileName = $_FILES['filedata']['name']; 
    $tmpName = $_FILES['filedata']['tmp_name']; 
    $fileSize = $_FILES['filedata']['size']; 
    $fileType = $_FILES['filedata']['type']; 
    $fp  = fopen($tmpName, 'r'); 
    $content = fread($fp, filesize($tmpName)); 
    $content = addslashes($content); 
    fclose($fp); 
    if(!get_magic_quotes_gpc()){ 
     $fileName = addslashes($fileName); 
    } 
    $query = "INSERT INTO yourdatabasetable (`name`, `size`, `type`, `file`) VALUES ('".$fileName."','".$fileSize."', '".$fileType."', '".$content."')"; 
    mysql_query($query); 

जो फ़ाइल को SQL डीबी में इंजेक्ट करेगा। याद रखने की बात यह है कि सर्वर साइड फ़ाइल एक सामान्य एचटीएमएल फॉर्म के रूप में एक अपलोड को संभालती है ...

उम्मीद है कि इससे मदद मिलती है!

+0

आप उदाहरण आप यहाँ स्थानों की कोशिश की है? – Eugene

+0

निश्चित- मेरे पास यह कार्यान्वयन कार्य करने में है ... आपको अपने कोड के लिए कुछ बदलाव करने की आवश्यकता होगी लेकिन यह निश्चित रूप से काम करता है। आपको किस हिस्से में परेशानी हो रही है? – SW4

+0

वह हिस्सा जहां आइटम 'xtype:' fileuploadfield '' ऑब्जेक्ट का विकल्प है 'name:' दादाता '' होना चाहिए। चूंकि इस विकल्प का उपयोग '$ _FILES' सरणी में किया गया है, न कि' id: 'filata''। – Eugene

0

आईडी को केवल सेट करने के परिणामस्वरूप $ _FILES सरणी नाम आईडी के समान होगा। यदि आपको किसी और चीज का उपयोग करने की आवश्यकता है तो नाम कॉन्फ़िगरेशन विकल्प सेट करें और इसके बजाय इसका उपयोग किया जाएगा।

0
items: { 
    xtype: 'form', 
    border: false, 
    bodyStyle: { 
     padding: '10px' 
    }, 
    items: { 
     xtype: 'multifilefield', 
     labelWidth: 80, 
     fieldLabel: 'Choose file(s)', 
     anchor: '100%', 
     allowBlank: false, 
     margin: 0 
    } 
}, 
ExtJS 4.2.2 के लिए

लाइव डेमो here

संबंधित मुद्दे