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




jquery ajax (20)

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

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

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

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

2008 से मेरा जवाब निम्नानुसार है।

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

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

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

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

मैं jQuery के साथ असीमित रूप से एक फ़ाइल अपलोड करना चाहता हूं। यह मेरा एचटीएमएल है:

<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 फॉर्म प्लगइन का उपयोग कर रहा हूँ।


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

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

यहां कुछ हैं:

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


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

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

<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 की सामग्री भी पढ़ सकते हैं और उसके बाद उपयोगकर्ता को आउटपुट कर सकते हैं।

क्रोम, iFrames, और ऑनलोड

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

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

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

मूल रूप से जब अपलोड / डाउनलोड शुरू होता है:

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

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

डाउनलोड करते समय क्रोम के लिए इस समस्या को संभालने के लिए मैंने एक 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, "/");

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


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

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

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

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


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

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

एचटीएमएल भाग

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

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


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


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

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

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

एचटीएमएल

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


यह AJAX फ़ाइल अपलोड 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');
  }
});

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

एचटीएमएल:

<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-form प्लगइन का उपयोग करते हैं, तो यह केवल जावास्क्रिप्ट की लगभग पांच पंक्तियां है।

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

यही वह जगह है जहां jQuery-form प्लगइन खेल में आता है।

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

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

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


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

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

Demo


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

<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)
{
    return Json(":)");
}

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

// The input DOM element
const inputElement = document.querySelector('input');

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

    // Post to server
    fetch('/uploadImage', {
        method: 'POST',
        body: data
    })
});

एचटीएमएल 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 ऑब्जेक्ट बनाएँ

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

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

परिवर्तनीय = नया XMLHttpRequest ();


डोमेन भर में प्रवेश करें

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

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

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

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

अधिक जानकारी के लिए, आप here पढ़ना जारी रख सकते here ...


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

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 का उपयोग कर सकते हैं । ऐशे ही:

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

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


एचटीएमएल 5 के readAsDataURL() या कुछ बेस 64 एन्कोडर का उपयोग कर फ़ाइल को बेस 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);

नमूना: यदि आप 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
  }
});

मुझे आशा है कि यह सहायक होगा






upload