मैंनें इस्तेमाल किया <input type= "file" name="Upload" >
अब मैं केवल .pdf और .xls फ़ाइलों को स्वीकार करके इसे प्रतिबंधित करना चाहूंगा।
जब मैं सबमिट बटन पर क्लिक करता हूं तो इसे इसे मान्य करना चाहिए।
और जब मैं वेबपेज पर फाइलों (पीडीएफ / एक्सएलएस) पर क्लिक करता हूं तो यह अपने आप खुल जाना चाहिए।
क्या कोई इसके लिए कुछ उदाहरण दे सकता है?
जवाबों:
आप विशेषता का उपयोग करके acceptऔर इसके लिए अनुमत माइम-प्रकार जोड़कर ऐसा कर सकते हैं । लेकिन सभी ब्राउज़र उस विशेषता का सम्मान नहीं करते हैं और इसे आसानी से कुछ कोड निरीक्षक के माध्यम से हटाया जा सकता है। तो या तो मामले में आपको सर्वर साइड (आपके दूसरे प्रश्न) पर फ़ाइल प्रकार की जांच करने की आवश्यकता है।
उदाहरण:
<input type="file" name="upload" accept="application/pdf,application/vnd.ms-excel" />
आपके तीसरे प्रश्न के लिए "और जब मैं वेबपेज पर फ़ाइलों (पीडीएफ / एक्सएलएस) को क्लिक करता हूं तो यह अपने आप खुल जाना चाहिए।"
आप इसे हासिल नहीं कर सकते। क्लाइंट द्वारा क्लाइंट मशीन पर एक PDF या XLS कैसे खोला जाता है।
आप इसका उपयोग कर सकते हैं:
एचटीएमएल
<input name="userfile" type="file" accept="application/pdf, application/vnd.ms-excel" />
केवल समर्थन करें। पीडीएफ और। XLS फ़ाइलें
दुर्भाग्य से, चयन के समय इसे करने का कोई गारंटी तरीका नहीं है।
कुछ ब्राउज़र टैग के acceptलिए विशेषता का समर्थन करते हैं input। यह एक अच्छी शुरुआत है, लेकिन पूरी तरह से इस पर भरोसा नहीं किया जा सकता है।
<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
आप cfinputफ़ाइल एक्सटेंशन को प्रस्तुत करने के लिए एक सत्यापन का उपयोग कर सकते हैं और सत्यापन चला सकते हैं , लेकिन माइम-प्रकार नहीं। यह बेहतर है, लेकिन फिर भी मूर्खतापूर्ण नहीं है। OSX पर फ़ाइलों में अक्सर कोई फ़ाइल एक्सटेंशन नहीं होता है या उपयोगकर्ता दुर्भावनापूर्ण रूप से फ़ाइल प्रकारों को भ्रमित कर सकते हैं।
कोल्डफ़्यूज़न के परिणाम cffileकी contentTypeसंपत्ति ( cffile.contentType) का उपयोग करके माइम-प्रकार की जांच कर सकते हैं , लेकिन यह केवल अपलोड के बाद किया जा सकता है । यह आपकी सबसे अच्छी शर्त है, लेकिन अभी भी 100% सुरक्षित नहीं है क्योंकि माइम-प्रकार अभी भी गलत हो सकते हैं।
acceptपर विशेषता inputटैग जोड़ा जा सकता है लेकिन 100% प्रभावी नहीं है।
आप जावास्क्रिप्ट का उपयोग कर सकते हैं। ध्यान रखें कि जावास्क्रिप्ट के साथ ऐसा करने में बड़ी समस्या इनपुट फ़ाइल को रीसेट करना है। खैर, यह केवल JPG तक सीमित है (पीडीएफ के लिए आपको माइम प्रकार और मैजिक नंबर बदलना होगा ):
<form id="form-id">
<input type="file" id="input-id" accept="image/jpeg"/>
</form>
<script type="text/javascript">
$(function(){
$("#input-id").on('change', function(event) {
var file = event.target.files[0];
if(file.size>=2*1024*1024) {
alert("JPG images of maximum 2MB");
$("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
return;
}
if(!file.type.match('image/jp.*')) {
alert("only JPG images");
$("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
return;
}
var fileReader = new FileReader();
fileReader.onload = function(e) {
var int32View = new Uint8Array(e.target.result);
//verify the magic number
// for JPG is 0xFF 0xD8 0xFF 0xE0 (see https://en.wikipedia.org/wiki/List_of_file_signatures)
if(int32View.length>4 && int32View[0]==0xFF && int32View[1]==0xD8 && int32View[2]==0xFF && int32View[3]==0xE0) {
alert("ok!");
} else {
alert("only valid JPG images");
$("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
return;
}
};
fileReader.readAsArrayBuffer(file);
});
});
</script>
ध्यान रखें कि यह फ़ायरफ़ॉक्स और क्रोम के नवीनतम संस्करणों और IExplore 10 पर परीक्षण किया गया था।
आप निम्न तरीके से कोशिश कर सकते हैं
<input type= "file" name="Upload" accept = "application/pdf,.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
या (asp.net mvc में)
@Html.TextBoxFor(x => x.FileName, new { @id = "doc", @type = "file", @accept = "application/pdf,.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" })
मैं फ़ाइल सर्वर साइड को फ़िल्टर करूंगा, क्योंकि फ़ायरफ़ॉक्स पर लाइव HTTP हेडर्स जैसे टूल हैं, जो शेल सहित किसी भी फ़ाइल को अपलोड करने की अनुमति देगा। लोग आपकी साइट को हैक कर सकते हैं। सुरक्षित होने के लिए इसे सर्वर साइट करें।
हालांकि यह विशेष उदाहरण एक बहु फ़ाइल अपलोड के लिए है, यह सामान्य जानकारी को एक आवश्यकता देता है:
https://developer.mozilla.org/en-US/docs/DOM/File.type
जहाँ तक एक फ़ाइल पर / डाउनलोड / इस पर कार्य करना एक जावास्क्रिप्ट प्रश्न नहीं है - बल्कि एक सर्वर विन्यास है। यदि उपयोगकर्ता के पास पीडीएफ या एक्सएलएस फाइलें खोलने के लिए कुछ स्थापित नहीं है, तो उनकी एकमात्र पसंद उन्हें डाउनलोड करना होगा।
यदि आप चाहते हैं कि फ़ाइल अपलोड नियंत्रण एक उपयोगकर्ता के प्रकारों को एक बटन क्लिक पर अपलोड कर सके, तो यह इस प्रकार है ..
<script type="text/JavaScript">
<!-- Begin
function TestFileType( fileName, fileTypes ) {
if (!fileName) return;
dots = fileName.split(".")
//get the part AFTER the LAST period.
fileType = "." + dots[dots.length-1];
return (fileTypes.join(".").indexOf(fileType) != -1) ?
alert('That file is OK!') :
alert("Please only upload files that end in types: \n\n" + (fileTypes.join(" .")) + "\n\nPlease select a new file and try again.");
}
// -->
</script>
फिर आप उपरोक्त बटन की तरह एक घटना से फ़ंक्शन को कॉल कर सकते हैं, जो दिखता है:
onClick = "TestFileType (this.form.uploadfile.value, ['gif', 'jpg', 'png', 'jpeg']];"
आप इसे बदल सकते हैं: PDFऔरXLS
आप इसे यहाँ पर लागू देख सकते हैं: डेमो
accept-Attribute की तुलना में , स्थानीय मशीन पर फ़ाइल का चयन करते समय यह विधि चयनित फ़ाइल प्रकारों के लिए फ़ोल्डर सामग्री को कम नहीं करती है।