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

Question

मैं 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: ");
            }
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>

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

Comments

JQuery के लिए फ़ाइल अपलोड करने पर विभिन्न तैयार किए गए प्लगइन्स हैं। इस तरह के अपलोड हैक करना एक सुखद अनुभव नहीं है, इसलिए लोग तैयार समाधान का उपयोग करने का आनंद लेते हैं। यहाँ कुछ है: - JQuery फ़ाइल अपलोडर - एकाधिक फ़ाइल अपलोड प्लगइन - मिनी एकाधिक फ़ाइल अपलोड - jQuery फ़ाइल अपलोड आप NPM (कीवर्ड के रूप में "jquery- प्लगइन" का उपयोग करके) या Github पर अधिक परियोजनाओं के लिए खोज कर सकते हैं।

— चीरी

आपको केवल फ़ाइल नाम मिल रहा है क्योंकि आपके var फ़ाइलनाम को $ ('# फ़ाइल') का मान मिल रहा है, इनपुट में निहित फ़ाइल को नहीं

— जिम्मी

यहाँ एक अच्छा एक है: http://blueimp.github.io/jQuery-File-Upload/ - HTML5 ajax अपलोडिंग - असमर्थित ब्राउज़रों के लिए iframes को ग्रेसफुल कमबैक - मल्टी-फाईल async अपलोड ने इसका उपयोग किया है और यह बहुत अच्छा काम करता है। ( यहां प्रलेखन )

— आशीष पनेरी

इसे भी देखें: stackoverflow.com/questions/6974684/… , यहाँ यह बताता है कि इसे jQuery के माध्यम से कैसे प्राप्त किया जाए

— Chococroc

@ जिमी उसे इनपुट में निहित फ़ाइल कैसे मिलेगी?

— एलेक्स

Answer 1

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

HTML:

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

यदि आप चाहें तो सबसे पहले, आप कुछ सत्यापन कर सकते हैं। उदाहरण के लिए, .on('change')फ़ाइल की स्थिति में:

$(':file').on('change', function () {
  var file = this.files[0];

  if (file.size > 1024) {
    alert('max upload size is 1k');
  }

  // Also see .name, .type
});

अब $.ajax()बटन के क्लिक के साथ सबमिट करें:

$(':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 Chrome के साथ इसे आज़माएं क्योंकि HTML5 के कुछ घटक हर ब्राउज़र में उपलब्ध नहीं हैं।

Comments

क्या मैं upload.php में $ _FILES का उपयोग कर सकता हूं?

— एलेसेंड्रो कॉसेंटिनो

यह Internet Explorer में काम करना चाहिए, लेकिन केवल संस्करण 10. ( caniuse.com/xhr2 )

— Tyler

नमस्ते, मैं सराहना करता हूं PHP आपकी पसंद की भाषा है ... लेकिन मुझे आश्चर्य है कि क्या आप जानते हैं कि यह ASP.NET MVC में भी काम करता है? मैं एक .NET डेवलपर हूं और मैंने कुछ AJAX फ़ाइल अपलोड करने के लिए आपके सरल उदाहरण का उपयोग करने की कोशिश की है, लेकिन सर्वर साइड मुझे वह फ़ाइल नहीं मिलती है जो मैंने AJAX के माध्यम से पोस्ट की थी। मैं नवीनतम क्रोम का उपयोग कर रहा हूं।

— शुम्मी

यह फॉर्मडाटा है जो यहां सभी जादू करता है। इन डॉक्स को ज़रूर देखें - यह आपके सभी सवालों को कई फाइलों और फील्ड्स के बारे में बताता है।

— अवतार लें

बस इतना है कि कोई व्यक्ति घंटों खर्च नहीं करता है ... यदि आप PHP (और शायद अन्य स्थानों) में डेटा का उपयोग करने जा रहे हैं तो फ़ाइल टैग name="file"पर यह बहुत महत्वपूर्ण है <input>। मैंने जावास्क्रिप्ट का उपयोग करके गतिशील रूप से एक फॉर्म बनाया है, इसलिए मुझे नाम विशेषता की आवश्यकता नहीं थी, लेकिन डेटा सर्वर-साइड को पुनः प्राप्त करने के लिए आपको कठिन तरीके की आवश्यकता है।

— किवाक वुल्फ

Answer 2

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

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

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

मेरे प्रारंभिक उत्तर के लगभग ११ साल बाद यह २०१ ९ है। IE9 और लोअर 1% मार्क के आसपास विश्व स्तर पर हैं लेकिन अभी भी उच्च उपयोग के क्लस्टर हैं।

इस से महत्वपूर्ण ले दूर - जो भी सुविधा है - यह जांचें कि आपके उपयोगकर्ता किस ब्राउज़र का उपयोग करते हैं । यदि आप नहीं करते हैं, तो आप एक त्वरित और दर्दनाक सबक सीखेंगे कि क्यों "मेरे लिए काम करता है" एक ग्राहक को वितरित करने में पर्याप्त अच्छा नहीं है। caniuse एक उपयोगी उपकरण है, लेकिन ध्यान दें कि वे कहाँ से अपनी जनसांख्यिकी प्राप्त करते हैं। वे आपके साथ संरेखित नहीं कर सकते हैं। यह उद्यम के वातावरण की तुलना में कभी ख़राब नहीं होता है।

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

---

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

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

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

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

Comments

रिकॉर्ड के लिए अब शुद्ध AJAX फ़ाइल अपलोड करना संभव है यदि ब्राउज़र फ़ाइल API का समर्थन करता है - developer.mozilla.org/en/use_files_from_web_applications

— meleyal

iframe समाधान काम करने के लिए बहुत सरल और आसान है

— मैथ्यू लॉक

यह काफी पुराना उत्तर है, लेकिन यह थोड़ा भ्रामक था। IE ने XHR को मूल रूप से IE7 के रूप में वापस समर्थित किया, और इसे IEX के रूप में वापस ActiveX के माध्यम से समर्थन किया। w3schools.com/ajax/ajax_xmlhttprequest_create.asp । ऐसा करने का व्यावहारिक तरीका निश्चित रूप से फ्लैश (शॉकवेव) घटकों को लक्षित करना था, या फ्लैश / एक्टिवएक्स (सिल्वरलाइट) नियंत्रण को बाहर करना था। यदि आप एक अनुरोध की उत्पत्ति कर सकते हैं और जावास्क्रिप्ट के माध्यम से प्रतिक्रिया को संभाल सकते हैं, तो यह अजाक्स है .. हालांकि, कहा है कि, अजाक्स xhr का पर्याय है, लेकिन यह स्वयं अंडरलाइन तंत्र / घटकों का वर्णन नहीं करता है जो पेलोड को बचाता / एक्सचेंज करता है।

— ब्रेट कैसवेल

@BrettCaswell मैं यह नहीं कह रहा था कि AJAX / XHR संभव नहीं थे, बस यह संभव नहीं था कि उनके साथ एक फाइल पोस्ट करना संभव था पुराने- लेकिन हमेशा के लिए- IE के संस्करण। वह था और पूरी तरह से सच है।

— ओली

ऐसा नहीं है, यह एक UX राय है - शायद यह मान्य है।

— निमजोक्स

Answer 3

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

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

Comments

यह JSON का उपयोग करता है - इसलिए PHP पुराने संस्करण के लिए यह गैर-संभव उपयोग होगा।

— लोरेंजो मनुची

अजाक्स फ़ाइल अपलोड की तुलना में बहुत क्लीनर लगता है, जहां मुझे लानत चीज का उपयोग करने के लिए कोड का एक बड़ा टुकड़ा शामिल करना होगा।

— ripper234

संस्करण 2 के लिए नया URL अब valums-file-uploader.github.com/file-uploader

— साइमन ईस्ट

"यह प्लगइन GNU GPL 2 या उसके बाद और GNU LGPL 2 या बाद में खुला है।" इसलिए जब तक आप कॉपी या संशोधित संस्करण वितरित नहीं करते, आपको अपना प्रोजेक्ट नहीं खोलना है।

— ट्रैंटोर लियू

क्या मैं कुछ भूल रहा हूँ? यह पुस्तकालय किसी भी अधिक jquery का उपयोग नहीं करता है, इसलिए यह उत्तर से वाक्यविन्यास का समर्थन नहीं करता है?

— जेम्स मैककॉर्मैक

Answer 4

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

---

आप XMLHttpRequest (Ajax) का उपयोग करके फ़ाइलें अपलोड नहीं कर सकते । आप इफ्रेम या फ्लैश का उपयोग करके प्रभाव का अनुकरण कर सकते हैं। उत्कृष्ट jQuery फॉर्म प्लगिन जो प्रभाव प्राप्त करने के लिए एक iframe के माध्यम से आपकी फ़ाइलों को पोस्ट करता है।

Comments

हां, आप एक iframe पर POST कर सकते हैं और वहां फाइल कैप्चर कर सकते हैं। मुझे हालांकि इसके साथ बहुत सीमित अनुभव है, इसलिए मैं वास्तव में इस पर टिप्पणी नहीं कर सकता।

— मैटिस

छोटी टिप्पणी: क्रोम और फ़ायरफ़ॉक्स के नवीनतम संस्करणों में यह संभव है, stackoverflow.com/questions/4856917/…

— एलेओ

IE9 और

— उससे

Answer 5

भविष्य के पाठकों के लिए लपेटना।

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

HTML5 के साथ

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

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

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  data: new FormData($('#formWithFiles')[0]), // The form with the file inputs.
  processData: false,
  contentType: 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 ) उदाहरण के लिए " फॉर्मडाटा ऑब्जेक्ट का उपयोग करके फ़ाइलें भेजना " देखें ।

मैदान छोड़ना

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

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

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

इस मामले में आप Bifröst जैसे रैपर प्लगइन का उपयोग करना पसंद कर सकते हैं, जो iframe तकनीक का उपयोग करता है, लेकिन एक jQuery Ajax ट्रांसपोर्ट भी प्रदान करता है जिससे इस तरह की विधि के साथ फाइल भेजने की अनुमति मिलती है $.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 से लेकर विभिन्न फॉलिकल तक के पूरे स्टैक और प्रक्रिया को आसान बनाने के लिए कुछ उपयोगी विशेषताएं शामिल हैं। अपनी आवश्यकताओं और आवश्यकताओं के आधार पर आप नंगे कार्यान्वयन या इस प्लगइन्स में से किसी पर भी विचार कर सकते हैं।

Comments

प्रलेखन के आधार पर एक बात ध्यान दें: आपको भी भेजना चाहिए contentType: false। जब मैंने इसे क्रोम के साथ नहीं भेजा था तो फ़ॉर्म सामग्री प्रकार को jQuery द्वारा अमान्य कर दिया गया था।

— राख

अच्छा उत्तर। सुधार के लिए कुछ सुझाव: उत्तर के लिए असंबंधित कोड के हिस्सों को हटा दें, उदाहरण के लिए .done()और .fail()कॉलबैक। इसके अलावा, FormDataप्रो और विपक्ष की सूची के उपयोग के बिना एक उदाहरण भयानक होगा।

— जीरो 3

मुझे यह त्रुटि मिली:TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement.

— कैंडलजैक

Answer 6

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

• यह विशिष्ट 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');
  }
});

Comments

@ user840250 jQuery 1.9.1?

— जॉर्डन फेल्डस्टीन

Answer 7

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

एचटीएमएल

<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 फ़ाइल अपलोड की मुख्य कार्यक्षमता है। वास्तव में जावास्क्रिप्ट।

Comments

-1 jQuery का उपयोग करने के लिए और यह चयनकर्ता इंजन और घटना संचालकों का उपयोग नहीं करने के लिए। addEventListenerक्रॉस-ब्राउज़र नहीं है।

— मार्क

क्योंकि एक अलग उत्तर को जोड़ना व्यर्थ होगा जो कि केवल कुछ बदलावों के साथ इस पर आधारित होगा। इसके बजाय, इस जवाब को सही किया जाना चाहिए।

— मार्क

@ RainFromHeaven, कृपया, क्या आप उत्तर को संपादित कर सकते हैं? मैं नहीं जानता कि इसे क्रॉस-ब्राउज़र तरीके से कैसे किया जाए।

— थियागो नेग्री

अभी भी IE 9 और नीचे में काम नहीं करता है। उपयोगकर्ताओं के आवंटन अभी भी IE के उन संस्करणों का उपयोग करते हैं।

— पियरे

किसी कृपया समझा सकते हैं कि यह asp.net में काम करने के लिए कैसे बनाया जा सकता है? क्या मैं webmethod का उपयोग करता हूं? यदि हाँ, तो यह कैसा दिखेगा?

— समुराईजैक

Answer 8

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

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);

Comments

@ गैरी: क्षमा करें, मुझे उस बिट को भी पोस्ट करना चाहिए था। मैं HTML5 में नई ड्रैग-एंड-ड्रॉप कार्यक्षमता का उपयोग कर रहा था; आप यहां एक उदाहरण पा सकते हैं: html5demos.com/file-api#view-source - बस "स्रोत देखें" पर क्लिक करें। अनिवार्य रूप से, ondropघटना के अंदर आप कर सकते हैंvar file = e.dataTransfer.files[0]

— एमपीएन

शायद इस सवाल को तब से संपादित किया गया है, लेकिन कुछ लोगों ने आइए चर्चा की कि मुझे लगता है कि एक वेनिला जेएस का जवाब है, अगर ओपी एक jQuery समाधान (एक मौजूद है) के लिए पूछता है और इस तरह के जवाब एक अलग सवाल के साथ हैं।

— एंडी

@ और मैं अच्छी तरह से असहमत हूं, और ऐसा लगता है कि 34 अन्य भी करते हैं। यदि आप jQuery का उपयोग कर सकते हैं, तो आप निश्चित रूप से जावास्क्रिप्ट का उपयोग कर सकते हैं। किसी भी मामले में, यह एक सामुदायिक साइट है - यह सिर्फ ओपी नहीं है कि मैं यहां मदद करने की कोशिश कर रहा हूं। हर कोई उन उत्तर को चुनने / उपयोग करने के लिए स्वतंत्र है जो उन्हें सबसे अच्छा लगता है। कुछ लोग सिर्फ jQuery की ओर बढ़ते हैं क्योंकि उन्हें लगता है कि यह कोड की इतनी आसान / कम लाइनें होगी, जब वास्तव में उन्हें अतिरिक्त लाइब्रेरी के ओवरहेड की आवश्यकता नहीं होती है।

— मपेन

Answer 9

आप बस 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) {
                // ...
            }
       });
    }));
});

Comments

@RaydenBlack केवल jQuery का।

— ज़ैन अली

अपलोड प्रगति कैसे प्राप्त करें?

— अली शराफत

Answer 10

सबसे सरल और सबसे मज़बूत तरीका, जो मैंने पिछले दिनों में किया है, वह है कि आप अपने फॉर्म के साथ एक छिपे हुए iFrame टैग को लक्षित करें - फिर वह पृष्ठ को पुनः लोड किए बिना 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>

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

Chrome, iFrames और onLoad

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

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

क्रोम के लिए काम करने का एकमात्र उपाय मुझे कुकी का उपयोग करना था।

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

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

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

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

https://github.com/ArtisticPhoenix/jQuery-Plugins/blob/master/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, "/");

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

Comments

मुझे यह पसंद है। यदि केवल कोई व्यक्ति इस शानदार समाधान के साथ संभावित समस्याओं का उल्लेख कर सकता है। मुझे वास्तव में समझ में नहीं आता है कि जब लोग समाधान होते हैं तो लोग इन क्लूनी लाइब्रेरी और प्लग इन का उपयोग क्यों करते हैं।

— येवगेनी अफनासायेव

खैर, मुझे लगता है कि अपलोड करते समय कुछ प्रगति की जानकारी दिखाने का कारण होगा।

— प्रखर मिश्रा

Answer 11

एक समाधान जो मुझे मिला वह था <form>एक छिपे हुए iFrame को लक्ष्य बनाना। IFrame तब जेएस को उस उपयोगकर्ता को प्रदर्शित करने के लिए चला सकता है जो पूरा हो गया है (पेज लोड पर)।

Comments

मुझे इस जवाब में दिलचस्पी है, क्या आपके पास एक डेमो है जिसे आप लिंक कर सकते हैं?

— lfender6445

Answer 12

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

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

यहीं से jQuery-form plugin प्ले में आता है।

यहाँ इसके लिए रेल कोड दिया गया है:

<% 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

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

Answer 13

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

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

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

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

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

Comments

यह अब तक का सबसे होनहार लग रहा है, तुम मुझे पर था IE7+! अभी इसे आजमा रहे हैं। धन्यवाद

— पियरे

Answer 14

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

$('#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);
}

Comments

अपलोड करना वर्षों से मृत है। अभी समर्थित या अनुरक्षित नहीं है।

— रे निकोलस

Answer 15

फाइल कैसे अपलोड करें ( बिना किसी प्लगइन के ) इसका सिर्फ एक और उपाय है

सरल जावास्क्रिप्ट और 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";
}
?>

यहाँ उदाहरण आवेदन है

Answer 16

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){ }
});

आप छवियों सहित अपने सभी मूल्यों को पोस्ट करने के लिए फ़ॉर्म डेटा का उपयोग कर सकते हैं।

Comments

नोट: कभी भी कैश न करने के अनुरोध cache: falseपर निरर्थक है । POSTPOST

— कोडिंग हुई

@ विवेक आसिथम्बी, मुझे यह त्रुटि मिली:TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement.

— मोमबत्ती

Answer 17

नीचे दिए गए चरणों के साथ Jquery उपयोग के साथ अतुल्यकालिक रूप से फ़ाइल अपलोड करने के लिए:

चरण 1 आपकी परियोजना में Nuget प्रबंधक खोलें और पैकेज (jquery fileupload जोड़ें (केवल आपको इसे सर्च बॉक्स में लिखना होगा और इसे इंस्टॉल करना होगा।)) URL: https://github.com/blueimp/jQuery-File- डालना

चरण 2 HTML फ़ाइलों में नीचे स्क्रिप्ट जोड़ें, जो पहले से ही पैकेज से ऊपर चलकर परियोजना में जोड़े गए हैं:

jquery.ui.widget.js

jquery.iframe-transport.js

jquery.fileupload.js

चरण 3 नीचे दिए गए कोड के अनुसार फ़ाइल अपलोड नियंत्रण लिखें:

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

चरण 4 नीचे के रूप में अपलोड के रूप में एक जे एस विधि लिखें:

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

        };

चरण 5 तैयार फ़ंक्शन कॉल एलिमेंट फ़ाइल अपलोड प्रक्रिया को नीचे के अनुसार शुरू करने के लिए:

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

});

चरण 6 MVC नियंत्रक और कार्रवाई को नीचे के अनुसार लिखें:

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
                };


        }

    }

Answer 18

एक आधुनिक दृष्टिकोण Jquery के बिना उपयोग करने के लिए है FileList से वस्तु वापस पहुंचने के लिए <input type="file">एक फ़ाइल (रों) जब उपयोगकर्ता चयन और उसके बाद का उपयोग लायें FileList एक के चारों ओर लिपटा पोस्ट करने के लिए FormData वस्तु।

// The input DOM element // <input type="file">
const inputElement = document.querySelector('input[type=file]');

// Listen for a file submit from user
inputElement.addEventListener('change', () => {
    const data = new FormData();
    data.append('file', inputElement.files[0]);
    data.append('imageName', 'flower');

    // You can then post it to your server.
    // Fetch can accept an object of type FormData on its  body
    fetch('/uploadImage', {
        method: 'POST',
        body: data
    });
});

Comments

जाहिर है IE पर समर्थित नहीं

— Marco Demaio

Answer 19

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

<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>

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

$(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");

     });
   });
});

अधिक विवरण देखें

Answer 20

नमूना: यदि आप jQuery का उपयोग करते हैं, तो आप एक अपलोड फ़ाइल के लिए आसान कर सकते हैं। यह एक छोटा और मजबूत jQuery प्लगइन है, 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
  }
});

मुझे उम्मीद है कि यह मददगार होगा

Answer 21

आप उपयोग कर सकते हैं

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

डेमो

Answer 22

का उपयोग कर फ़ाइल को base64 में कनवर्ट करें। HTML5 के रीडअर्सडाटा () या कुछ बेस 64 एनकोडर । इधर उधर करना

var reader = new FileReader();

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

        reader.readAsBinaryString(file);

फिर पुनः प्राप्त करने के लिए:

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

Answer 23

आप XMLHttpRequest (फ्लैश और iframe निर्भरता के बिना) का उपयोग करके अतुल्यकालिक अपलोड करने पर फ़ाइल नाम के साथ अतिरिक्त पैरामीटर पास कर सकते हैं। FormData के साथ अतिरिक्त पैरामीटर मान जोड़ें और अपलोड अनुरोध भेजें।

---

var formData = new FormData();
formData.append('parameter1', 'value1');
formData.append('parameter2', 'value2'); 
formData.append('file', $('input[type=file]')[0].files[0]);

$.ajax({
    url: 'post back url',
    data: formData,
// other attributes of AJAX
});

---

इसके अलावा, सिंकफ़्यूज़न जावास्क्रिप्ट यूआई फ़ाइल अपलोड इस परिदृश्य के लिए केवल तर्क का उपयोग करके समाधान प्रदान करता है। आप प्रलेखन पा सकते हैं यहाँ और इस पर नियंत्रण के बारे में अधिक जानकारी के लिए यहाँ लिंक विवरण दर्ज यहां

Answer 24

किसी फ़ाइल के लिए अपलोड प्रक्रिया को संभालने के लिए, यहां अतुल्य रूप से देखें : https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

लिंक से नमूना

<?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>

Answer 25

यह मेरा समाधान है।

<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>

और जे.एस.

<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)
{
    [...]
}

Comments

आपको लगता है कि आपके उत्तर में कुछ प्रकार की रूपरेखा है। आपको बहुत कम से कम इस बात का उल्लेख करना चाहिए कि आपका उत्तर किस रूपरेखा के लिए उपयोगी है। बेहतर अभी तक, सभी ढांचे के सामान को हटा दें और केवल प्रश्न का उत्तर प्रस्तुत करें।

— जीरो 3

तो वास्तव में "mvc" नामक एक पीवीसी फ्रेमवर्क है? और यह csharpish सिंटैक्स का उपयोग करता है? ये बहुत निर्दयी है।

— नॉनचिप

Answer 26

एचटीएमएल 5 और जावास्क्रिप्ट का उपयोग करना , एसक्यूएन अपलोड करना काफी आसान है, मैं आपके एचटीएमएल के साथ अपलोडिंग लॉजिक बनाता हूं, यह पूरी तरह से काम नहीं कर रहा है क्योंकि इसे एपीआई की आवश्यकता है, लेकिन यह प्रदर्शित करता है कि यह कैसे काम करता है, यदि आपके पास एंडपॉइंट /uploadआपकी वेबसाइट की जड़ से बुलाया गया है, यह कोड आपके लिए काम करना चाहिए:

const asyncFileUpload = () => {
  const fileInput = document.getElementById("file");
  const file = fileInput.files[0];
  const uri = "/upload";
  const xhr = new XMLHttpRequest();
  xhr.upload.onprogress = e => {
    const percentage = e.loaded / e.total;
    console.log(percentage);
  };
  xhr.onreadystatechange = e => {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log("file uploaded");
    }
  };
  xhr.open("POST", uri, true);
  xhr.setRequestHeader("X-FileName", file.name);
  xhr.send(file);
}

<form>
  <span>File</span>
  <input type="file" id="file" name="file" size="10" />
  <input onclick="asyncFileUpload()" id="upload" type="button" value="Upload" />
</form>

इसके अलावा XMLHttpReques के बारे में कुछ और जानकारी:

XMLHttpRequest ऑब्जेक्ट

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

XMLHttpRequest ऑब्जेक्ट बनाएँ

सभी आधुनिक ब्राउज़रों (क्रोम, फ़ायरफ़ॉक्स, IE7 +, एज, सफारी, ओपेरा) में एक अंतर्निहित XMLHttpRequest ऑब्जेक्ट है।

XMLHttpRequest ऑब्जेक्ट बनाने के लिए सिंटैक्स:

चर = नया XMLHttpRequest ();

डोमेन के पार पहुँचें

सुरक्षा कारणों से, आधुनिक ब्राउज़र डोमेन पर पहुंचने की अनुमति नहीं देते हैं।

इसका मतलब यह है कि वेब पेज और XML फ़ाइल जिसे यह लोड करने की कोशिश करता है, दोनों को एक ही सर्वर पर स्थित होना चाहिए।

W3Schools के सभी उदाहरण W3Schools डोमेन पर स्थित XML फाइलों को खोलते हैं।

यदि आप अपने स्वयं के वेब पेजों पर ऊपर दिए गए उदाहरण का उपयोग करना चाहते हैं, तो आपके द्वारा लोड की जाने वाली XML फाइलें आपके स्वयं के सर्वर पर स्थित होनी चाहिए।

अधिक जानकारी के लिए, आप यहाँ पढ़ सकते हैं ...

Answer 27

आप जावास्क्रिप्ट द्वारा नए Fetch API का उपयोग कर सकते हैं । ऐशे ही:

function uploadButtonCLicked(){
    var input = document.querySelector('input[type="file"]')

    fetch('/url', {
      method: 'POST',
      body: input.files[0]
    }).then(res => res.json())   // you can do something with response
      .catch(error => console.error('Error:', error))
      .then(response => console.log('Success:', response));
}                               

लाभ: Fetch API मूल रूप से सभी आधुनिक ब्राउज़रों द्वारा समर्थित है, इसलिए आपको कुछ भी आयात करने की आवश्यकता नहीं है। इसके अलावा, ध्यान दें कि भ्रूण () एक वादा करता है जो तब .then(..code to handle response..)अतुल्यकालिक रूप से उपयोग करके नियंत्रित किया जाता है ।

Answer 28

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

1. ASP.NET वेब फॉर्म मूली फाइल अपलोड फीचर को प्रगति बार के साथ अपलोड करता है
2. ASP.NET MVC आधारित एकाधिक फ़ाइल अपलोड jQuery में बनाया गया है

सर्वर साइड भाषा C # है, लेकिन आप इसे PHP जैसी अन्य भाषा के साथ काम करने के लिए कुछ संशोधन कर सकते हैं।

फ़ाइल अपलोड करें ASP.NET Core MVC:

HTML में View create file upload control:

<form method="post" asp-action="Add" enctype="multipart/form-data">
    <input type="file" multiple name="mediaUpload" />
    <button type="submit">Submit</button>
</form>

अब अपने कंट्रोलर में एक्शन मेथड बनाएँ:

[HttpPost]
public async Task<IActionResult> Add(IFormFile[] mediaUpload)
{
    //looping through all the files
    foreach (IFormFile file in mediaUpload)
    {
        //saving the files
        string path = Path.Combine(hostingEnvironment.WebRootPath, "some-folder-path"); 
        using (var stream = new FileStream(path, FileMode.Create))
        {
            await file.CopyToAsync(stream);
        }
    }
}

HostingEnvironment चर IHostingEnvironment का प्रकार है, जिसे निर्भरता इंजेक्शन का उपयोग करके नियंत्रक को इंजेक्ट किया जा सकता है, जैसे:

private IHostingEnvironment hostingEnvironment;
public MediaController(IHostingEnvironment environment)
{
    hostingEnvironment = environment;
}

Comments

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

— दीमा कोज़्विन

Answer 29

PHP के लिए, https://developer.hyvor.com/php/image-upload-ajax-php-mysql देखें

एचटीएमएल

<html>
<head>
    <title>Image Upload with AJAX, PHP and MYSQL</title>
</head>
<body>
<form onsubmit="submitForm(event);">
    <input type="file" name="image" id="image-selecter" accept="image/*">
    <input type="submit" name="submit" value="Upload Image">
</form>
<div id="uploading-text" style="display:none;">Uploading...</div>
<img id="preview">
</body>
</html>

JAVASCRIPT

var previewImage = document.getElementById("preview"),  
    uploadingText = document.getElementById("uploading-text");

function submitForm(event) {
    // prevent default form submission
    event.preventDefault();
    uploadImage();
}

function uploadImage() {
    var imageSelecter = document.getElementById("image-selecter"),
        file = imageSelecter.files[0];
    if (!file) 
        return alert("Please select a file");
    // clear the previous image
    previewImage.removeAttribute("src");
    // show uploading text
    uploadingText.style.display = "block";
    // create form data and append the file
    var formData = new FormData();
    formData.append("image", file);
    // do the ajax part
    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            var json = JSON.parse(this.responseText);
            if (!json || json.status !== true) 
                return uploadError(json.error);

            showImage(json.url);
        }
    }
    ajax.open("POST", "upload.php", true);
    ajax.send(formData); // send the form data
}

पीएचपी

<?php
$host = 'localhost';
$user = 'user';
$password = 'password';
$database = 'database';
$mysqli = new mysqli($host, $user, $password, $database);


 try {
    if (empty($_FILES['image'])) {
        throw new Exception('Image file is missing');
    }
    $image = $_FILES['image'];
    // check INI error
    if ($image['error'] !== 0) {
        if ($image['error'] === 1) 
            throw new Exception('Max upload size exceeded');

        throw new Exception('Image uploading error: INI Error');
    }
    // check if the file exists
    if (!file_exists($image['tmp_name']))
        throw new Exception('Image file is missing in the server');
    $maxFileSize = 2 * 10e6; // in bytes
    if ($image['size'] > $maxFileSize)
        throw new Exception('Max size limit exceeded'); 
    // check if uploaded file is an image
    $imageData = getimagesize($image['tmp_name']);
    if (!$imageData) 
        throw new Exception('Invalid image');
    $mimeType = $imageData['mime'];
    // validate mime type
    $allowedMimeTypes = ['image/jpeg', 'image/png', 'image/gif'];
    if (!in_array($mimeType, $allowedMimeTypes)) 
        throw new Exception('Only JPEG, PNG and GIFs are allowed');

    // nice! it's a valid image
    // get file extension (ex: jpg, png) not (.jpg)
    $fileExtention = strtolower(pathinfo($image['name'] ,PATHINFO_EXTENSION));
    // create random name for your image
    $fileName = round(microtime(true)) . mt_rand() . '.' . $fileExtention; // anyfilename.jpg
    // Create the path starting from DOCUMENT ROOT of your website
    $path = '/examples/image-upload/images/' . $fileName;
    // file path in the computer - where to save it 
    $destination = $_SERVER['DOCUMENT_ROOT'] . $path;

    if (!move_uploaded_file($image['tmp_name'], $destination))
        throw new Exception('Error in moving the uploaded file');

    // create the url
    $protocol = stripos($_SERVER['SERVER_PROTOCOL'],'https') === true ? 'https://' : 'http://';
    $domain = $protocol . $_SERVER['SERVER_NAME'];
    $url = $domain . $path;
    $stmt = $mysqli -> prepare('INSERT INTO image_uploads (url) VALUES (?)');
    if (
        $stmt &&
        $stmt -> bind_param('s', $url) &&
        $stmt -> execute()
    ) {
        exit(
            json_encode(
                array(
                    'status' => true,
                    'url' => $url
                )
            )
        );
    } else 
        throw new Exception('Error in saving into the database');

} catch (Exception $e) {
    exit(json_encode(
        array (
            'status' => false,
            'error' => $e -> getMessage()
        )
    ));
}

Answer 30

आप https://uppy.io जैसी किसी चीज़ का उपयोग करने पर भी विचार कर सकते हैं ।

यह पृष्ठ से दूर नेविगेट किए बिना फ़ाइल अपलोडिंग करता है और कुछ बोनस प्रदान करता है जैसे कि ड्रैग एंड ड्रॉप, ब्राउज़र क्रैश / परतदार नेटवर्क के मामले में अपलोड फिर से शुरू करना और उदाहरण के लिए Instagram से आयात करना। यह खुला स्रोत है और jQuery / React / Angular / Vue पर निर्भर नहीं करता है, लेकिन इसके साथ उपयोग किया जा सकता है। अस्वीकरण: इसके निर्माता के रूप में मैं पक्षपाती हूं;)

Comments

ऊपर लिंक मृत है। यहाँ github है: github.com/transloadit/uppy

— क्रिस चार्ल्स

uppy.io CloudFlare + GitHub पृष्ठ समर्थित और मेरे लिए है? फिर भी उपयोगी है कि सीधा रेपो लिंक भी है :)

— kvz