<इनपुट प्रकार = "फ़ाइल"> के साथ कई फ़ाइलों का चयन कैसे करें?

Question

कई फ़ाइलों का चयन कैसे करें <input type="file">?

Comments

यह जावास्क्रिप्ट और HTML के बारे में है

— मास्क

क्या आपका मतलब है एक बार में कई फाइलें अपलोड करना (जब आप एक समय में एक का चयन करते हैं और फिर अपलोड पर क्लिक करते हैं)? या क्या आप मतलब है कि एक ब्राउज़र विंडो में कई फ़ाइलों का चयन करने के लिए ctrl + क्लिक का उपयोग करें?

— क्लेटस

आप इनपुट तत्व पर कई विशेषता का उपयोग करके इसे HTML5 के साथ कर सकते हैं। <input type = 'file' multiple = ''> यहाँ एक बढ़िया फ़ील है जो इसका उपयोग करता है: jsfiddle.net/0GiS0/Yvgc2

— Costa

Answer 1

नया उत्तर:

HTML5 में आप multiple1 से अधिक फ़ाइल का चयन करने के लिए विशेषता जोड़ सकते हैं ।

<input type="file" name="filefield" multiple="multiple">

---

पुराना उत्तर:

आप केवल 1 फ़ाइल प्रति चुन सकते हैं <input type="file" />। यदि आप कई फाइलें भेजना चाहते हैं तो आपको कई इनपुट टैग का उपयोग करना होगा या फ्लैश या सिल्वरलाइट का उपयोग करना होगा।

Comments

Gmail ऐसा करने के लिए Flash का उपयोग करता है

— Fabien Ménager

HTML5 के बाद से नहीं। इनपुट क्षेत्र के लिए एक बहु गुण है।

— कोस्टा

@ कोस्टा 2009 के 20 अक्टूबर को अधिकांश ब्राउज़रों ने उस सुविधा का समर्थन नहीं किया और Niavlys ने 2 साल पहले ही html5 समाधान दिखाया था।

— ZippyV

यह उत्तर डायनासोर की तुलना में अधिक प्राचीन है

— क्लिक करें

यह एकाधिक = "मल्टीपल" उपयोगकर्ता के अनुकूल नहीं है, एवरेज उपयोगकर्ता इसे नहीं समझता है, यह भी नहीं जानता है कि "ctrl बटन" क्या करता है, और यह विभिन्न फ़ोल्डरों में फ़ाइलों का चयन नहीं कर सकता है।

— जीन-पॉल

Answer 2

HTML5 <input type="file" multiple />( विनिर्देशन ) भी है।

डेस्कटॉप पर ब्राउज़र का समर्थन काफी अच्छा है (बस IE 9 और पूर्व द्वारा समर्थित नहीं है), मोबाइल पर कम अच्छा है, मुझे लगता है क्योंकि यह प्लेटफॉर्म और संस्करण के आधार पर सही ढंग से लागू करना कठिन है।

Comments

IE9 और पूर्व पर समर्थित नहीं :(

— आशीष वोरा

जोड़ने पर विचार करेंname="files[]"

— वार

Answer 3

पूरी बात इस तरह दिखनी चाहिए:

<form enctype='multipart/form-data' method='POST' action='submitFormTo.php'> 
    <input type='file' name='files[]' multiple />
    <button type='submit'>Submit</button>
</form>

सुनिश्चित करें कि आपके पास enctype='multipart/form-data'अपने <form>टैग में विशेषता है , या आप सबमिशन के बाद फाइल को सर्वर साइड पर नहीं पढ़ सकते हैं!

Comments

जब तक आप इसे वेबसीकेट या अजाक्स

— ब्लूजैके

Answer 4

यह jQuery प्लगइन ( jQuery फ़ाइल अपलोड डेमो ) फ्लैश के बिना करता है, जिस रूप में यह उपयोग कर रहा है:

<input type='file' name='files[]' multiple />

Comments

IE9-, github.com/blueimp/jQuery-File-Upload/wiki/…

— जैरीडीडीजी

Answer 5

अब आप इसे HTML5 के साथ कर सकते हैं

संक्षेप में आप फ़ाइल इनपुट पर कई विशेषता का उपयोग करते हैं।

<input type='file' multiple>

Comments

इस बात के लिए समर्थन के बारे में क्या? Canisuse.com के पास जानकारी नहीं है।

— ह्यूबर्ट ओजी

मुझे यकीन नहीं हो रहा है, मैंने उसी जगह की जाँच की, हाहा।

— कोस्टा

FileReader के पास .nameसंपत्ति नहीं है , इसलिए आपके उदाहरण में शीर्षक हमेशा होता है undefined: jsfiddle.net/m5jeyeyt/1

— vladkras

Answer 6

एचटीएमएल 5 ने इनपुट तत्व के लिए नई विशेषता एकाधिक प्रदान की है जिसका प्रकार विशेषता फ़ाइल है। तो आप कई फ़ाइलों का चयन कर सकते हैं और IE9 और पिछले संस्करण इसका समर्थन नहीं करते हैं।

नोट: इनपुट तत्व के नाम के साथ carefull हो। जब आप एक से अधिक फ़ाइल अपलोड करना चाहते हैं, तो आपको सरणी का उपयोग करना चाहिए और नाम विशेषता के मूल्य के रूप में स्ट्रिंग नहीं करना चाहिए।

पूर्व: इनपुट प्रकार = "फ़ाइल" नाम = "myPhotos []" एकाधिक = "एकाधिक"

और यदि आप php का उपयोग कर रहे हैं, तो आपको $ _FILES में डेटा मिलेगा और var_dump ($ _ FILES) का उपयोग करें और आउटपुट देखें और प्रसंस्करण करें। अब आप इसे पुन: व्यवस्थित कर सकते हैं और बाकी काम कर सकते हैं

Answer 7

यह आसान है ...

<input type='file' multiple>
$('#file').on('change',function(){
     _readFileDataUrl(this,function(err,files){
           if(err){return}
           console.log(files)//contains base64 encoded string array holding the 
           image data 
     });
});
var _readFileDataUrl=function(input,callback){
    var len=input.files.length,_files=[],res=[];
    var readFile=function(filePos){
        if(!filePos){
            callback(false,res);
        }else{
            var reader=new FileReader();
            reader.onload=function(e){              
                res.push(e.target.result);
                readFile(_files.shift());
            };
            reader.readAsDataURL(filePos);
        }
    };
    for(var x=0;x<len;x++){
        _files.push(input.files[x]);
    }
    readFile(_files.shift());
};

Comments

यह पहले से ही स्पष्ट रूप से उत्तर दिया गया है। जावास्क्रिप्ट उदाहरण जोड़ने की क्या आवश्यकता है?

— राइटहंडेडमोंकी

इसका अच्छा कारण?

— थॉमस लुडविग

Answer 8

<form action="" method="post" enctype="multipart/form-data">
<input type="file" multiple name="img[]"/>
<input type="submit">
</form>
<?php
print_r($_FILES['img']['name']);
?>

Answer 9

इसे अपने HTML में कॉपी और पेस्ट करें:

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object

// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
  output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
              f.size, ' bytes, last modified: ',
              f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
              '</li>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}

यह आपके माध्यम से, इस वेबपेज से, मेरे पास आता है: http://www.html5rocks.com/en/tutorials/file/drff/