extjs - EXT जेएस का उपयोग कर फ़ाइल अपलोड करें




(5)

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

Ext Js का उपयोग कर फ़ाइल अपलोड फ़ील्ड बनाने के चरण


यदि आप www.ExtJS.com पर उपलब्ध उदाहरणों को देखते हैं, तो आपको यह मिल जाएगा।

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


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


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

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

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

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

अफसोस की बात है, एक्सएस जेएस के इस तत्व पर बड़ी संख्या में दस्तावेज नहीं है- हालांकि बुनियादी कार्यक्षमता के लिए, आप नीचे दिए गए एसिंक अपलोड फ़ील्ड के साथ एक फॉर्म बना सकते हैं:

            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');
                                }
                            });
                        }
                    }
                }]
            })

यह कोड क्या करेगा एक अपलोड फ़ील्ड और अपलोड बटन के साथ एक नया फॉर्मपैन बनाएं। जब आप अपलोड बटन पर क्लिक करते हैं- चयनित फ़ाइल को सर्वरसाइड स्क्रिप्ट 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); 

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

उम्मीद है की यह मदद करेगा!


इन उत्तरों में से कई को सबसे अधिक तरीके से जोड़ना .... ग्रिड बनाने के दौरान ग्रिड के दृश्य में TrueTextSelection को सही पर सेट करें।

var grid = new Ext.grid.GridPanel({
   viewConfig: {
      enableTextSelection: true
   },
});