दिलचस्प पोस्ट
सी / सी + पार्सर / विश्लेषक बनाने के लिए अच्छे उपकरण SSK-PK- प्रमाणीकरण में बाद में उपयोग के लिए PKCS12 फ़ाइल से सार्वजनिक / निजी कुंजी को निकालें एचटीएमएल पाठ इनपुट फ़ील्ड क्या मैं टाइप करता हूं? सी # वस्तु के लिए JSON स्ट्रिंग कन्वर्ट जावा में दो एक्सएमएल फ़ाइलें मर्ज करें घातक त्रुटि: अपरिभाषित फ़ंक्शन पर कॉल करें mb_detect_encoding () पेज का मेमोरी उपयोग खोजने के लिए jQuery या जावास्क्रिप्ट PHP से MySQL में डालें (jQuery / AJAX) DOMSubtreemodified घटना DOM स्तर 3 में पदावनत क्यों है? जावा में वस्तु बनाने के सभी अलग-अलग तरीके क्या हैं? स्थिर const vs #define क्या Google परिणामों से डेटा को स्क्रैप करना ठीक है? विजुअल स्टूडियो बिल्ड विफल रहता है: obj \ debug से bin \ debug को exe-file कॉपी करने में असमर्थ PHP – foreach लूप में वर्तमान ऑब्जेक्ट को संशोधित करें कॉलम की अलग संख्या के साथ दो तालिकाओं का संघ बनाना

मैं अतुल्यकालिक फाइल कैसे अपलोड कर सकता हूं?

मैं एक फाइल asynchronously jQuery के साथ अपलोड करना चाहूंगा यह मेरा HTML है:

<span>File</span> <input type="file" id="file" name="file" size="10"/> <input id="uploadbutton" type="button" value="Upload"/> 

और यहां मेरा Jquery कोड है:

 $(document).ready(function () { $("#uploadbutton").click(function () { var filename = $("#file").val(); $.ajax({ type: "POST", url: "addFile.do", enctype: 'multipart/form-data', data: { file: filename }, success: function () { alert("Data Uploaded: "); } }); }); }); 

फ़ाइल अपलोड होने के बजाय, मुझे केवल फ़ाइल नाम मिल रहा है इस समस्या को सुलझाने में मैं क्या कर सकता हूं?

वर्तमान समाधान

मैं फ़ाइलों को अपलोड करने के लिए jQuery प्रपत्र प्लगइन का उपयोग कर रहा हूँ

वेब के समाधान से एकत्रित समाधान "मैं अतुल्यकालिक फाइल कैसे अपलोड कर सकता हूं?"

HTML5 के साथ आप अजाक्स और jQuery के साथ फाइल अपलोड कर सकते हैं। इतना ही नहीं, आप फ़ाइल मान्यताओं (नाम, आकार, और माइम प्रकार) कर सकते हैं या प्रगति ईवेंट को HTML5 प्रगति टैग (या एक डिव) के साथ संभाल सकते हैं। हाल ही में मुझे एक फ़ाइल अपलोडर बनाना था, लेकिन मैं फ्लैश और न ही IFrames या plugins का उपयोग करना चाहता था और कुछ शोध के बाद मैं समाधान के साथ आया था

एचटीएमएल:

 <form enctype="multipart/form-data"> <input name="file" type="file" /> <input type="button" value="Upload" /> </form> <progress></progress> 

सबसे पहले, यदि आप चाहें तो कुछ सत्यापन कर सकते हैं उदाहरण के लिए, फ़ाइल की ऑन-चेंज इवेंट में:

 $(':file').on('change', function() { var file = this.files[0]; if (file.size > 1024) { alert('max upload size is 1k') } // Also see .name, .type }); 

अब अजाक्स बटन के क्लिक के साथ सबमिट करें:

 $(':button').on('click', function() { $.ajax({ // Your server script to process the upload url: 'upload.php', type: 'POST', // Form data data: new FormData($('form')[0]), // Tell jQuery not to process data or worry about content-type // You *must* include these options! cache: false, contentType: false, processData: false, // Custom XMLHttpRequest xhr: function() { var myXhr = $.ajaxSettings.xhr(); if (myXhr.upload) { // For handling the progress of the upload myXhr.upload.addEventListener('progress', function(e) { if (e.lengthComputable) { $('progress').attr({ value: e.loaded, max: e.total, }); } } , false); } return myXhr; }, }); }); 

जैसा कि आप देख सकते हैं, HTML5 (और कुछ शोध) फ़ाइल अपलोड करने के साथ ही संभव नहीं हो लेकिन सुपर आसान इसे Google क्रोम के साथ आज़माएं क्योंकि उदाहरणों में से कुछ HTML5 घटक हर ब्राउज़र में उपलब्ध नहीं हैं।

JQuery के लिए फ़ाइल अपलोड करने पर कई तैयार किए गए प्लगइन्स हैं।

इस प्रकार के अपलोड करने के तरीके को एक सुखद अनुभव नहीं है, ताकि लोग तैयार-किए गए समाधानों का आनंद उठा सकें।

यहाँ कुछ है:

  • JQuery फ़ाइल अपलोडर
  • एकाधिक फ़ाइल अपलोड प्लगइन
  • मिनी मल्टीपल फाइल अपलोड
  • jQuery फ़ाइल अपलोड करें

आप एनपीएम पर अधिक परियोजनाओं (खोजशब्द के रूप में "jquery-plugin" का उपयोग करके) या जिथूब पर खोज सकते हैं।

2017 अद्यतन: यह अभी भी आपके जनसांख्यिकीय ब्राउज़रों पर निर्भर करता है।

"नई" एचटीएमएल 5 file एपीआई से समझने के लिए एक महत्वपूर्ण बात यह है कि IE 10 तक समर्थित नहीं किया गया था । यदि आप जिस विशिष्ट बाजार पर लक्ष्य कर रहे हैं, तो उसके पास विंडोज़ के पुराने संस्करणों की तुलना में औसत से अधिक औसत दर्जे का है, हो सकता है कि आपके पास इसका उपयोग न हो।

2017 में जा रहे हैं, लगभग 5% ब्राउज़र IE 6, 7, 8 या 9 में से एक हैं। यदि आप किसी बड़े निगम (जैसे यह एक बी 2 बी टूल है, या कुछ ऐसी चीज है जिसे आप प्रशिक्षण के लिए दे रहे हैं) तो वह नंबर रॉकेट हो सकता है। कुछ महीने पहले – 2016 में – मैंने अपनी मशीनों का 60% से अधिक IE8 का उपयोग कर एक कंपनी के साथ काम किया था।

तो इससे पहले कि आप कुछ करें: अपने उपयोगकर्ताओं द्वारा उपयोग किए जाने वाले ब्राउज़र की जांच करें अगर आप ऐसा नहीं करते हैं, तो आप एक त्वरित और दर्दनाक सबक सीखेंगे कि "मेरे लिए काम करता है" एक ग्राहक के लिए डिलीवर करने में पर्याप्त नहीं है।

2008 से मेरा जवाब इस प्रकार है।


हालांकि, फ़ाइल अपलोड की व्यवहार्य गैर-जेएस विधियां हैं। आप पृष्ठ पर एक आइफ्रेम बना सकते हैं (जो कि आप सीएसएस के साथ छिपाते हैं) और उसके बाद अपने फार्म को उस आइफ्रेम पर पोस्ट करने के लिए लक्षित करें। मुख्य पृष्ठ को स्थानांतरित करने की आवश्यकता नहीं है

यह एक "वास्तविक" पोस्ट है, इसलिए यह पूरी तरह से इंटरैक्टिव नहीं है। यदि आपको स्थिति की आवश्यकता है तो उस पर कार्रवाई करने के लिए आपको कुछ सर्वर-साइड की आवश्यकता होती है। यह आपके सर्वर पर निर्भर करता है। एएसपी.नेट के पास अच्छे तंत्र हैं PHP सादे विफल हो जाता है, लेकिन आप इसके आसपास पाने के लिए पर्ल या अपाचे संशोधनों का उपयोग कर सकते हैं।

यदि आपको कई फाइल अपलोड की आवश्यकता है, तो एक समय में प्रत्येक फाइल एक साथ करना सबसे बेहतर है (अधिकतम फ़ाइल अपलोड सीमाओं को पार करने के लिए) Iframe के पहले फार्म को पोस्ट करें, उपर्युक्त का उपयोग करते हुए उसकी प्रगति की निगरानी करें और पूरा होने पर, iframe में दूसरे फॉर्म को पोस्ट करें, और इसी तरह।

या जावा / फ्लैश समाधान का उपयोग करें वे अपने पदों के साथ क्या कर सकते हैं, वे बहुत अधिक लचीले हैं …

मैं इस उद्देश्य के लिए ठीक अपलोडर प्लगइन का उपयोग करने की सलाह देता हूं। आपका JavaScript कोड होगा:

 $(document).ready(function() { $("#uploadbutton").jsupload({ action: "addFile.do", onComplete: function(response){ alert( "server response: " + response); } }); }); 

यह एजेएक्स फ़ाइल अपलोड jQuery प्लगइन फ़ाइल को कुछ अपलोड करता है, और एक कॉलबैक के जवाब, कुछ और नहीं पास करता है

  • यह विशिष्ट HTML पर निर्भर नहीं करता है, बस इसे एक <input type="file">
  • यह आपके सर्वर को किसी खास तरीके से जवाब देने की आवश्यकता नहीं है
  • इससे कोई फर्क नहीं पड़ता कि आप कितने फ़ाइलों का उपयोग करते हैं, या वे पृष्ठ पर कहां हैं

– जितना छोटा उपयोग करें –

 $('#one-specific-file').ajaxfileupload({ 'action': '/upload.php' }); 

– या जितना –

 $('input[type="file"]').ajaxfileupload({ 'action': '/upload.php', 'params': { 'extra': 'info' }, 'onComplete': function(response) { console.log('custom handler for file:'); alert(JSON.stringify(response)); }, 'onStart': function() { if(weWantedTo) return false; // cancels upload }, 'onCancel': function() { console.log('no file selected'); } }); 

नोट: यह उत्तर पुराना है, XHR का उपयोग करके फाइल अपलोड करना अब संभव है।


आप XMLHttpRequest (Ajax) का उपयोग कर फाइल अपलोड नहीं कर सकते। आप आइफ्रेम या फ्लैश का उपयोग करके प्रभाव को अनुकरण कर सकते हैं SWF (फ्लैश) अपलोडर SWFUpload आज़माएं।

या उत्कृष्ट jQuery प्रपत्र प्लगइन जो प्रभाव पाने के लिए एक आइफ्रेम के माध्यम से आपकी फ़ाइलों को पोस्ट करता है।

भविष्य के पाठकों के लिए रैपिंग।

अतुल्यकालिक फ़ाइल अपलोड

HTML5 के साथ

अगर फॉर्मडाटा और फ़ाइल एपीआई (एचटीएमएल 5 विशेषताएं दोनों) समर्थित हैं, तो आप $.ajax() एजेक्स $.ajax() विधि का उपयोग कर jQuery के साथ फाइल अपलोड कर सकते हैं।

आप फॉर्मडाटा के बिना फाइल भी भेज सकते हैं, लेकिन फाइल एपीआई इस तरह से फाइलों पर प्रोसेस करने के लिए किसी भी तरह से मौजूद होनी चाहिए ताकि उन्हें XMLHttpRequest (Ajax) के साथ भेजा जा सके।

 $.ajax({ url: 'file/destination.html', type: 'POST', data: new FormData($('#formWithFiles')[0]), // The form with the file inputs. processData: false // Using FormData, no need to process data. }).done(function(){ console.log("Success: Files sent!"); }).fail(function(){ console.log("An error occurred, the files couldn't be sent!"); }); 

एक त्वरित, शुद्ध जावास्क्रिप्ट ( कोई jQuery ) उदाहरण के लिए " एक फॉर्मडाटा ऑब्जेक्ट का उपयोग कर फ़ाइलें भेजना " देखें

मैदान छोड़ना

जब एचटीएमएल 5 समर्थित नहीं है (कोई फ़ाइल एपीआई ) केवल अन्य शुद्ध जावास्क्रिप्ट समाधान (कोई फ्लैश नहीं है या कोई अन्य ब्राउजर प्लगइन) छिपी आईफ्रेम तकनीक है, जो एक्सएमएचटीपीआरएक्वेस्ट ऑब्जेक्ट का उपयोग किए बिना एक एसिंक्रोनस अनुरोध का अनुकरण करने की अनुमति देता है।

इसमें फ़ाइल आदानों के साथ फ़ॉर्म के लक्ष्य के रूप में एक आइफ्रेम सेट करना शामिल है। जब उपयोगकर्ता द्वारा अनुरोध सबमिट किया जाता है और फाइल अपलोड की जाती है, लेकिन मुख्य पृष्ठ को पुन: प्रस्तुत करने के बजाय प्रतिक्रिया iframe के अंदर प्रदर्शित होती है Iframe छिपाना पूरी प्रक्रिया को उपयोगकर्ता के लिए पारदर्शी बनाता है और एक अतुल्यकालिक अनुरोध emulates।

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

इस मामले में आप आइफ्रेम तकनीक का उपयोग करने वाले Bifröst जैसे एक आवरण प्लगइन का उपयोग करना पसंद कर सकते हैं, लेकिन यह भी एक jQuery अजाक्स परिवहन प्रदान करता है जो सिर्फ $.ajax() विधि के साथ फाइल भेजने की अनुमति देता है:

 $.ajax({ url: 'file/destination.html', type: 'POST', // Set the transport to use (iframe means to use Bifröst) // and the expected data type (json in this case). dataType: 'iframe json', fileInputs: $('input[type="file"]'), // The file inputs containing the files to send. data: { msg: 'Some extra data you might need.'} }).done(function(){ console.log("Success: Files sent!"); }).fail(function(){ console.log("An error occurred, the files couldn't be sent!"); }); 

प्लगइन्स

Bifröst सिर्फ एक छोटा सा आवरण है जो jQuery के AJAX विधि के लिए फ़ॉलबैक समर्थन जोड़ता है, लेकिन jQuery प्रपत्र प्लगइन या jQuery फ़ाइल अपलोड जैसी कई पूर्ववर्ती प्लगइन्स में इस प्रक्रिया को कम करने के लिए HTML5 से लेकर अलग-अलग फ़ॉलबैक और कुछ उपयोगी सुविधाओं को शामिल किया गया है। आपकी ज़रूरतों और आवश्यकताओं के आधार पर आप एक नंगे कार्यान्वयन या इनमें से किसी भी प्लग इन पर विचार करना चाह सकते हैं।

मैं छवियों को अपलोड करने के लिए नीचे स्क्रिप्ट का उपयोग कर रहा हूं जो ठीक काम करती हैं।

एचटीएमएल

 <input id="file" type="file" name="file"/> <div id="response"></div> 

जावास्क्रिप्ट

 jQuery('document').ready(function(){ var input = document.getElementById("file"); var formdata = false; if (window.FormData) { formdata = new FormData(); } input.addEventListener("change", function (evt) { var i = 0, len = this.files.length, img, reader, file; for ( ; i < len; i++ ) { file = this.files[i]; if (!!file.type.match(/image.*/)) { if ( window.FileReader ) { reader = new FileReader(); reader.onloadend = function (e) { //showUploadedItem(e.target.result, file.fileName); }; reader.readAsDataURL(file); } if (formdata) { formdata.append("image", file); formdata.append("extra",'extra-data'); } if (formdata) { jQuery('div#response').html('<br /><img src="ajax-loader.gif"/>'); jQuery.ajax({ url: "upload.php", type: "POST", data: formdata, processData: false, contentType: false, success: function (res) { jQuery('div#response').html("Successfully uploaded"); } }); } } else { alert('Not a vaild image!'); } } }, false); }); 

व्याख्या

अपलोडिंग एनीमेशन दिखाने के लिए और अपलोड होने के बाद प्रतिक्रिया दिखाने के लिए मैं प्रतिसाद div का उपयोग करता हूं।

सबसे अच्छी बात यह है कि जब आप इस स्क्रिप्ट का उपयोग करते हैं तो फाइल के साथ आईडी आदि जैसे अतिरिक्त डेटा भेज सकते हैं। मैंने इसे स्क्रिप्ट में extra-data उल्लेख किया है।

PHP स्तर पर यह सामान्य फ़ाइल अपलोड के रूप में काम करेगा। अतिरिक्त डेटा $_POST डेटा के रूप में पुनर्प्राप्त किया जा सकता है

यहां आप एक प्लगइन और सामान का उपयोग नहीं कर रहे हैं आप चाहें तो कोड बदल सकते हैं। आप आँख बंद करके यहां कोडन नहीं कर रहे हैं। यह किसी भी jQuery फ़ाइल अपलोड की मुख्य कार्यक्षमता है। वास्तव में जावास्क्रिप्ट

मैं कुछ बहुत ही शक्तिशाली jQuery-आधारित फ़ाइल अपलोड लाइब्रेरी में आया हूं। इनकी जांच करें:

  1. plupload
  2. jQuery फ़ाइल अपलोड करें
  3. FineUploader

आप वेनिला जावास्क्रिप्ट में इसे आसानी से कर सकते हैं। मेरे वर्तमान प्रोजेक्ट से एक स्निपेट यहां है:

 var xhr = new XMLHttpRequest(); xhr.upload.onprogress = function(e) { var percent = (e.position/ e.totalSize); // Render a pretty progress bar }; xhr.onreadystatechange = function(e) { if(this.readyState === 4) { // Handle file upload complete } }; xhr.open('POST', '/upload', true); xhr.setRequestHeader('X-FileName',file.name); // Pass the filename along xhr.send(file); 

आप बस jQuery .ajax() साथ अपलोड कर सकते हैं।

HTML:

 <form id="upload-form"> <div> <label for="file">File:</label> <input type="file" id="file" name="file" /> <progress class="progress" value="0" max="100"></progress> </div> <hr /> <input type="submit" value="Submit" /> </form> 

सीएसएस

 .progress { display: none; } 

जावास्क्रिप्ट:

 $(document).ready(function(ev) { $("#upload-form").on('submit', (function(ev) { ev.preventDefault(); $.ajax({ xhr: function() { var progress = $('.progress'), xhr = $.ajaxSettings.xhr(); progress.show(); xhr.upload.onprogress = function(ev) { if (ev.lengthComputable) { var percentComplete = parseInt((ev.loaded / ev.total) * 100); progress.val(percentComplete); if (percentComplete === 100) { progress.hide().val(0); } } }; return xhr; }, url: 'upload.php', type: 'POST', data: new FormData(this), contentType: false, cache: false, processData: false, success: function(data, status, xhr) { // ... }, error: function(xhr, status, error) { // ... } }); })); }); 

अतीत में मैंने सबसे सरल और सबसे मजबूत तरीके से यह किया है, तो अपने फार्म के साथ एक छिपी हुई आइफ्रेम टैग को लक्षित करना है – फिर यह पेज पुनः लोड किए बिना iframe के भीतर जमा करेगा।

ऐसा इसलिए है, जब आप किसी प्लगइन, जावास्क्रिप्ट या HTML के अलावा अन्य किसी भी "जादू" का उपयोग नहीं करना चाहते हैं बेशक आप इसे जावास्क्रिप्ट के साथ जोड़ सकते हैं या आप क्या कर सकते हैं …

 <form target="iframe" action="" method="post" enctype="multipart/form-data"> <input name="file" type="file" /> <input type="button" value="Upload" /> </form> <iframe name="iframe" id="iframe" style="display:none" ></iframe> 

आप सर्वर त्रुटियों या सफलता की प्रतिक्रियाओं के लिए iframe onLoad की सामग्री भी पढ़ सकते हैं और फिर उपयोगकर्ता के लिए आउटपुट।

क्रोम, आईफ्रेम और ऑनलोड

-नोट- आपको केवल पढ़ने की आवश्यकता है अगर आप अपलोड करने / डाउनलोड करने पर एक UI अवरोधक सेटअप करने में रुचि रखते हैं

फिलहाल क्रोम इनफ्रेम के लिए ऑन-लोड इवेंट को ट्रिगर नहीं करता है, जब यह फ़ाइलों को स्थानांतरित करने के लिए उपयोग किया जाता है फ़ायरफ़ॉक्स, आईई, और एज सभी फाइल हस्तांतरण के लिए ऑनलोड घटना को आग।

क्रोम के लिए काम करने का एकमात्र समाधान मुझे एक कुकी का इस्तेमाल करना था

मूल रूप से अपलोड / डाउनलोड शुरू होने पर ऐसा करने के लिए:

  • [क्लाइंट साइड] कुकी के अस्तित्व को देखने के लिए एक अंतराल प्रारंभ करें
  • [सर्वर साइड] फ़ाइल डेटा के साथ जो भी आपको जरुरत है
  • [सर्वर साइड] क्लाइंट साइड इंटरवल के लिए कुकी सेट करें
  • [क्लाइंट साइड] अंतराल कुकी को देखता है और इसे ऑन-लोड इवेंट जैसी उपयोग करता है। उदाहरण के लिए आप एक यूआई ब्लॉकर शुरू कर सकते हैं और फिर ऑनलोड (या जब कुकी बनाई जाती है) आप यूआई ब्लॉकर को हटा सकते हैं।

इसके लिए कुकी का उपयोग करना बदसूरत है लेकिन यह काम करता है।

डाउनलोड करने पर क्रोम के लिए इस मुद्दे को संभालने के लिए मैंने एक jQuery प्लगइन बनाया है, आप यहां पा सकते हैं

https://github.com/ArtisticPhoenix/jQuery-Plugins/blob/master/jQuery-Plugins/iDownloader.js

एक ही बुनियादी प्रिंसिपल अपलोड करने के लिए भी लागू होता है।

डाउनलोडर का उपयोग करने के लिए (जेएस शामिल करें, जाहिर है)

  $('body').iDownloader({ "onComplete" : function(){ $('#uiBlocker').css('display', 'none'); //hide ui blocker on complete } }); $('somebuttion').click( function(){ $('#uiBlocker').css('display', 'block'); //block the UI $('body').iDownloader('download', 'htttp://example.com/location/of/download'); }); 

और सर्वर साइड पर, फ़ाइल डेटा को स्थानांतरित करने से पहले, कुकी बनाएं

  setcookie('iDownloader', true, time() + 30, "/"); 

प्लगइन कुकी को देखेगा, और फिर पूर्ण कॉलबैक को ट्रिगर करेगा।

मैंने पाया कि एक समाधान था <form> छिपी हुई आइफ्रेम का लक्ष्य। आईफ्रेम तब जेएस को उपयोगकर्ता को प्रदर्शित करने के लिए चला सकता है कि यह पूर्ण है (पृष्ठ लोड पर)।

मैंने इसे रेल पर्यावरण में लिखा है यदि आप हल्के jQuery के प्रपत्र प्लगइन का उपयोग करते हैं, तो यह केवल जावास्क्रिप्ट की लगभग पांच पंक्तियां है

चुनौती यह है कि remote_form_for अपलोड को मानक remote_form_forremote_form_for रूप में काम करना है क्योंकि बहु-भाग के फॉर्म सबमिशन को नहीं समझता है। यह फ़ाइल डेटा भेजने वाला नहीं है रेलवे AJAX अनुरोध के साथ वापस चाहता है।

यही वह जगह है जहां jQuery के फॉर्म प्लगइन खेल में आता है।

इसके लिए रेल कोड है:

 <% remote_form_for(:image_form, :url => { :controller => "blogs", :action => :create_asset }, :html => { :method => :post, :id => 'uploadForm', :multipart => true }) do |f| %> Upload a file: <%= f.file_field :uploaded_data %> <% end %> 

यहां संबंधित जावास्क्रिप्ट है:

 $('#uploadForm input').change(function(){ $(this).parent().ajaxSubmit({ beforeSubmit: function(a,f,o) { o.dataType = 'json'; }, complete: function(XMLHttpRequest, textStatus) { // XMLHttpRequest.responseText will contain the URL of the uploaded image. // Put it in an image element you create, or do with it what you will. // For example, if you have an image elemtn with id "my_image", then // $('#my_image').attr('src', XMLHttpRequest.responseText); // Will set that image tag to display the uploaded image. }, }); }); 

और यहाँ रेल नियंत्रक कार्रवाई, सुंदर वेनिला है:

  @image = Image.new(params[:image_form]) @image.save render :text => @image.public_filename 

मैं ब्लॉगगेट के साथ पिछले कुछ हफ्तों से इस का उपयोग कर रहा हूं, और यह एक विजेता की तरह काम किया है

साधारण अजाक्स अपलोडर एक और विकल्प है:

https://github.com/LPology/Simple-Ajax-Uploader

  • क्रॉस-ब्राउज़र – IE7 +, फ़ायरफ़ॉक्स, क्रोम, सफारी, ओपेरा में काम करता है
  • एकाधिक, समवर्ती अपलोड का समर्थन करता है – गैर-एचटीएमएल ब्राउज़र में भी
  • कोई फ्लैश या बाहरी सीएसएस नहीं है – सिर्फ एक 5 केबी जावास्क्रिप्ट फ़ाइल
  • पूरी तरह से क्रॉस-ब्राउज़र प्रगति सलाखों के लिए वैकल्पिक, अंतर्निहित समर्थन (PHP के एपीसी विस्तार का उपयोग करके)
  • लचीला और उच्च अनुकूलन – अपलोड बटन के रूप में किसी भी तत्व का उपयोग करें, अपने स्वयं के प्रगति संकेतक को शैली दें
  • कोई फॉर्म की आवश्यकता नहीं है, बस एक ऐसे तत्व प्रदान करें जो अपलोड बटन के रूप में कार्य करेगा
  • एमआईटी लाइसेंस – वाणिज्यिक परियोजना में उपयोग करने के लिए नि: शुल्क

उदाहरण उपयोग:

 var uploader = new ss.SimpleUpload({ button: $('#uploadBtn'), // upload button url: '/uploadhandler', // URL of server-side upload handler name: 'userfile', // parameter name of the uploaded file onSubmit: function() { this.setProgressBar( $('#progressBar') ); // designate elem as our progress bar }, onComplete: function(file, response) { // do whatever after upload is finished } }); 

jQuery अपलोडिफ़ एक और अच्छा प्लगइन है जो मैंने फ़ाइलों को अपलोड करने से पहले उपयोग किया है। जावास्क्रिप्ट कोड निम्न के रूप में सरल है: कोड। हालांकि, नया संस्करण इंटरनेट एक्सप्लोरर में काम नहीं करता है।

 $('#file_upload').uploadify({ 'swf': '/public/js/uploadify.swf', 'uploader': '/Upload.ashx?formGuid=' + $('#formGuid').val(), 'cancelImg': '/public/images/uploadify-cancel.png', 'multi': true, 'onQueueComplete': function (queueData) { // ... }, 'onUploadStart': function (file) { // ... } }); 

मैंने बहुत खोज की है और मैं किसी भी प्लग इन के बिना और केवल एजेएक्स के साथ फाइल अपलोड करने के लिए एक और समाधान पर आया हूं। समाधान निम्नानुसार है:

 $(document).ready(function () { $('#btn_Upload').live('click', AjaxFileUpload); }); function AjaxFileUpload() { var fileInput = document.getElementById("#Uploader"); var file = fileInput.files[0]; var fd = new FormData(); fd.append("files", file); var xhr = new XMLHttpRequest(); xhr.open("POST", 'Uploader.ashx'); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { alert('success'); } else if (uploadResult == 'success') alert('error'); }; xhr.send(fd); } 

फ़ाइल अपलोड करने के तरीके का कोई अन्य समाधान यहां है ( बिना किसी प्लगिन के )

सरल जावास्क्रिप्ट और AJAX का प्रयोग (प्रगति बार के साथ)

HTML भाग

 <form id="upload_form" enctype="multipart/form-data" method="post"> <input type="file" name="file1" id="file1"><br> <input type="button" value="Upload File" onclick="uploadFile()"> <progress id="progressBar" value="0" max="100" style="width:300px;"></progress> <h3 id="status"></h3> <p id="loaded_n_total"></p> </form> 

जे एस हिस्सा

 function _(el){ return document.getElementById(el); } function uploadFile(){ var file = _("file1").files[0]; // alert(file.name+" | "+file.size+" | "+file.type); var formdata = new FormData(); formdata.append("file1", file); var ajax = new XMLHttpRequest(); ajax.upload.addEventListener("progress", progressHandler, false); ajax.addEventListener("load", completeHandler, false); ajax.addEventListener("error", errorHandler, false); ajax.addEventListener("abort", abortHandler, false); ajax.open("POST", "file_upload_parser.php"); ajax.send(formdata); } function progressHandler(event){ _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total; var percent = (event.loaded / event.total) * 100; _("progressBar").value = Math.round(percent); _("status").innerHTML = Math.round(percent)+"% uploaded... please wait"; } function completeHandler(event){ _("status").innerHTML = event.target.responseText; _("progressBar").value = 0; } function errorHandler(event){ _("status").innerHTML = "Upload Failed"; } function abortHandler(event){ _("status").innerHTML = "Upload Aborted"; } 

PHP भाग

 <?php $fileName = $_FILES["file1"]["name"]; // The file name $fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder $fileType = $_FILES["file1"]["type"]; // The type of file it is $fileSize = $_FILES["file1"]["size"]; // File size in bytes $fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true if (!$fileTmpLoc) { // if file not chosen echo "ERROR: Please browse for a file before clicking the upload button."; exit(); } if(move_uploaded_file($fileTmpLoc, "test_uploads/$fileName")){ // assuming the directory name 'test_uploads' echo "$fileName upload is complete"; } else { echo "move_uploaded_file function failed"; } ?> 

Here's the EXAMPLE application

 var formData=new FormData(); formData.append("fieldname","value"); formData.append("image",$('[name="filename"]')[0].files[0]); $.ajax({ url:"page.php", data:formData, type: 'POST', dataType:"JSON", cache: false, contentType: false, processData: false, success:function(data){ } }); 

You can use form data to post all your values including images.

To upload file asynchronously with Jquery use below steps:

step 1 In your project open Nuget manager and add package (jquery fileupload(only you need to write it in search box it will come up and install it.)) URL: https://github.com/blueimp/jQuery-File-Upload

step 2 Add below scripts in the HTML files, which are already added to the project by running above package:

jquery.ui.widget.js

jquery.iframe-transport.js

jquery.fileupload.js

step 3 Write file upload control as per below code:

 <input id="upload" name="upload" type="file" /> 

step 4 write a js method as uploadFile as below:

  function uploadFile(element) { $(element).fileupload({ dataType: 'json', url: '../DocumentUpload/upload', autoUpload: true, add: function (e, data) { // write code for implementing, while selecting a file. // data represents the file data. //below code triggers the action in mvc controller data.formData = { files: data.files[0] }; data.submit(); }, done: function (e, data) { // after file uploaded }, progress: function (e, data) { // progress }, fail: function (e, data) { //fail operation }, stop: function () { code for cancel operation } }); }; 

step 5 In ready function call element file upload to initiate the process as per below:

 $(document).ready(function() { uploadFile($('#upload')); }); 

step 6 Write MVC controller and Action as per below:

 public class DocumentUploadController : Controller { [System.Web.Mvc.HttpPost] public JsonResult upload(ICollection<HttpPostedFileBase> files) { bool result = false; if (files != null || files.Count > 0) { try { foreach (HttpPostedFileBase file in files) { if (file.ContentLength == 0) throw new Exception("Zero length file!"); else //code for saving a file } } catch (Exception) { result = false; } } return new JsonResult() { Data=result }; } } 

You can use

 $(function() { $("#file_upload_1").uploadify({ height : 30, swf : '/uploadify/uploadify.swf', uploader : '/uploadify/uploadify.php', width : 120 }); }); 

Demo

Convert file to base64 using |HTML5's readAsDataURL() or some base64 encoder . Fiddle here

 var reader = new FileReader(); reader.onload = function(readerEvt) { var binaryString = readerEvt.target.result; document.getElementById("base64textarea").value = btoa(binaryString); }; reader.readAsBinaryString(file); 

Then to retrieve:

 window.open("data:application/octet-stream;base64," + base64); 

You can see a solved solution with a working demo here that allows you to preview and submit form files to the server. For your case, you need to use Ajax to facilitate the file upload to the server:

 <from action="" id="formContent" method="post" enctype="multipart/form-data"> <span>File</span> <input type="file" id="file" name="file" size="10"/> <input id="uploadbutton" type="button" value="Upload"/> </form> 

The data being submitted is a formdata. On your jQuery, use a form submit function instead of a button click to submit the form file as shown below.

 $(document).ready(function () { $("#formContent").submit(function(e){ e.preventDefault(); var formdata = new FormData(this); $.ajax({ url: "ajax_upload_image.php", type: "POST", data: formdata, mimeTypes:"multipart/form-data", contentType: false, cache: false, processData: false, success: function(){ alert("successfully submitted"); }); }); }); 

View more details

Sample: If you use jQuery, you can do easy to an upload file. This is a small and strong jQuery plugin, http://jquery.malsup.com/form/ .

उदाहरण

 var $bar = $('.ProgressBar'); $('.Form').ajaxForm({ dataType: 'json', beforeSend: function(xhr) { var percentVal = '0%'; $bar.width(percentVal); }, uploadProgress: function(event, position, total, percentComplete) { var percentVal = percentComplete + '%'; $bar.width(percentVal) }, success: function(response) { // Response } }); 

I hope it would be helpful

This is my solution for mvc using ajax.

 <form enctype="multipart/form-data"> <div class="form-group"> <label class="control-label col-md-2" for="apta_Description">Description</label> <div class="col-md-10"> <input class="form-control text-box single-line" id="apta_Description" name="apta_Description" type="text" value=""> </div> </div> <input name="file" type="file" /> <input type="button" value="Upload" /> </form> 

and the js

 <script> $(':button').click(function () { var formData = new FormData($('form')[0]); $.ajax({ url: '@Url.Action("Save", "Home")', type: 'POST', success: completeHandler, data: formData, cache: false, contentType: false, processData: false }); }); function completeHandler() { alert(":)"); } </script> 

नियंत्रक

 [HttpPost] public ActionResult Save(string apta_Description, HttpPostedFileBase file) { return Json(":)"); } 

Look for Handling the upload process for a file, asynchronously in here: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

Sample from the link

 <?php if (isset($_FILES['myFile'])) { // Example: move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']); exit; } ?><!DOCTYPE html> <html> <head> <title>dnd binary upload</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function sendFile(file) { var uri = "/index.php"; var xhr = new XMLHttpRequest(); var fd = new FormData(); xhr.open("POST", uri, true); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { // Handle response. alert(xhr.responseText); // handle response. } }; fd.append('myFile', file); // Initiate a multipart/form-data upload xhr.send(fd); } window.onload = function() { var dropzone = document.getElementById("dropzone"); dropzone.ondragover = dropzone.ondragenter = function(event) { event.stopPropagation(); event.preventDefault(); } dropzone.ondrop = function(event) { event.stopPropagation(); event.preventDefault(); var filesArray = event.dataTransfer.files; for (var i=0; i<filesArray.length; i++) { sendFile(filesArray[i]); } } } </script> </head> <body> <div> <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div> </div> </body> </html>