javascript - JQuery में अजाक्स-अनुरोधों के साथ FormData ऑब्जेक्ट्स कैसे भेजें?




ajax html5 (7)

अगर आप AJAX उपयोग "jquery.form.js" का उपयोग कर फाइलें जमा करना चाहते हैं तो यह सभी फॉर्म तत्वों को आसानी से सबमिट करता है।

नमूने http://jquery.malsup.com/form/#ajaxSubmit

किसी न किसी दृश्य:

<form id='AddPhotoForm' method='post' action='../photo/admin_save_photo.php' enctype='multipart/form-data'>


<script type="text/javascript">
function showResponseAfterAddPhoto(responseText, statusText)
{ 
    information= responseText;
    callAjaxtolist();
    $("#AddPhotoForm").resetForm();
    $("#photo_msg").html('<div class="album_msg">Photo uploaded Successfully...</div>');        
};

$(document).ready(function(){
    $('.add_new_photo_div').live('click',function(){
            var options = {success:showResponseAfterAddPhoto};  
            $("#AddPhotoForm").ajaxSubmit(options);
        });
});
</script>

इस प्रश्न का उत्तर यहां दिया गया है:

XMLHttpRequest स्तर 2 मानक (अभी भी एक कार्यरत ड्राफ्ट) FormData इंटरफ़ेस को परिभाषित करता है। यह इंटरफ़ेस File ऑब्जेक्ट्स को एक्सएचआर-अनुरोध (अजाक्स-अनुरोध) में जोड़ने में सक्षम बनाता है।

बीटीडब्ल्यू, यह एक नई सुविधा है - अतीत में, "छुपा-इफ्रेम-चाल" का उपयोग किया गया था (इसके बारे में मेरे अन्य प्रश्न में पढ़ें)।

इस तरह यह काम करता है (उदाहरण):

var xhr = new XMLHttpRequest(),
    fd = new FormData();

fd.append( 'file', input.files[0] );
xhr.open( 'POST', 'http://example.com/script.php', true );
xhr.onreadystatechange = handler;
xhr.send( fd );

जहां input एक <input type="file"> फ़ील्ड है, और handler अजाक्स-अनुरोध के लिए सफलता-हैंडलर है।

यह सभी ब्राउज़रों में खूबसूरती से काम करता है (फिर, आईई को छोड़कर)।

अब, मैं इस कार्यक्षमता को jQuery के साथ काम करना चाहता हूं। मैंने कोशिश की:

var fd = new FormData();    
fd.append( 'file', input.files[0] );

$.post( 'http://example.com/script.php', fd, handler );

दुर्भाग्यवश, यह काम नहीं करेगा (एक "अवैध आमंत्रण" त्रुटि फेंक दी गई है - स्क्रीनशॉट यहां है )। मुझे लगता है कि jQuery एक साधारण कुंजी-मूल्य वस्तु को फॉर्म-फ़ील्ड-नाम / मानों का प्रतिनिधित्व करने की FormData करता है, और FormData इंस्टेंस जो मैं गुजर रहा हूं वह स्पष्ट रूप से असंगत है।

अब, चूंकि xhr.send() में FormData इंस्टेंस पास करना संभव है, इसलिए मुझे उम्मीद है कि इसे jQuery के साथ काम करना भी संभव है।

अद्यतन करें:

मैंने jQuery के बग ट्रैकर पर "फीचर टिकट" बनाया है। यह यहां है: http://bugs.jquery.com/ticket/9995

मुझे "अजाक्स प्रीफिल्टर" का उपयोग करने का सुझाव दिया गया था ...

अद्यतन करें:

सबसे पहले, मुझे एक डेमो दें जो दर्शाता है कि मैं कौन सा व्यवहार प्राप्त करना चाहता हूं।

HTML:

<form>
    <input type="file" id="file" name="file">
    <input type="submit">
</form>

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

$( 'form' ).submit(function ( e ) {
    var data, xhr;

    data = new FormData();
    data.append( 'file', $( '#file' )[0].files[0] );

    xhr = new XMLHttpRequest();

    xhr.open( 'POST', 'http://hacheck.tel.fer.hr/xml.pl', true );
    xhr.onreadystatechange = function ( response ) {};
    xhr.send( data );

    e.preventDefault();
});

उपरोक्त कोड इस HTTP अनुरोध में परिणाम:

मुझे यही चाहिए - मैं चाहता हूं कि "मल्टीपार्ट / फॉर्म-डेटा" सामग्री-प्रकार!

प्रस्तावित समाधान ऐसा होगा:

$( 'form' ).submit(function ( e ) {
    var data;

    data = new FormData();
    data.append( 'file', $( '#file' )[0].files[0] );

    $.ajax({
        url: 'http://hacheck.tel.fer.hr/xml.pl',
        data: data,
        processData: false,
        type: 'POST',
        success: function ( data ) {
            alert( data );
        }
    });

    e.preventDefault();
});

हालांकि, इसके परिणामस्वरूप:

जैसा कि आप देख सकते हैं, सामग्री का प्रकार गलत है ...


आप निम्नलिखित कोड का उपयोग कर AJAX अनुरोध में FormData ऑब्जेक्ट भेज सकते हैं,

$("form#formElement").submit(function(){
    var formdata = new FormData($(this)[0]);
});

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

AJAX विधि इस तरह दिखता है,

$("form#formElement").submit(function(){
    var formdata = new FormData($(this)[0]);
    //append some non-form data also
    formData.append('other_data',$("#someInputData").val());
    $.ajax({
        type: "POST",
        url: postDataUrl,
        data: formData,
        processData: false,
        contentType: false,
        dataType: "json",
        success: function(data, textStatus, jqXHR) {
           //process data
        },
        error: function(data, textStatus, jqXHR) {
           //process error msg
        },
});

आप FormData ऑब्जेक्ट के अंदर फॉर्म तत्व को मैन्युअल रूप से इस तरह पैरामीटर के रूप में भी पास कर सकते हैं

var formElem = $("#formId");
var formdata = new FormData(form[0]);

आशा करता हूँ की ये काम करेगा। ;)


इसके बजाय - fd.append( 'userfile', $('#userfile')[0].files[0]);

उपयोग करें - fd.append( 'file', $('#userfile')[0].files[0]);


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

 function submitForm() {
                var data1 = new FormData($('input[name^="file"]'));
                $.each($('input[name^="file"]')[0].files, function(i, file) {
                data1.append(i, file);
                });

    $.ajax({
      url: "<?php echo base_url() ?>employee/dashboard2/test2",
      type: "POST",
      data: data1,
      enctype: 'multipart/form-data',
      processData: false,  // tell jQuery not to process the data
      contentType: false   // tell jQuery not to set contentType
    }).done(function(data) {
        console.log("PHP Output:");
        console.log( data );
    });
    return false;
}

पीएचपी:

public function upload_file(){

    foreach ($_FILES as $key ) {

          $name =time().$key['name'];

          $path='upload/'.$name;

          @move_uploaded_file($key['tmp_name'],$path);

    }

मेरा मानना ​​है कि आप इसे ऐसा कर सकते हैं:

var fd = new FormData();    
fd.append( 'file', input.files[0] );

$.ajax({
  url: 'http://example.com/script.php',
  data: fd,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(data){
    alert(data);
  }
});

processData को processData को गलत करने से आप jQuery को स्वचालित रूप से क्वेरी स्ट्रिंग में बदलने से रोक सकते हैं। अधिक जानकारी के लिए दस्तावेज़ देखें।

सामग्री को सेट करना गलत पर contentType करना जरूरी है, क्योंकि अन्यथा jQuery इसे गलत तरीके से सेट करेगा ।


मैं इसे इस तरह करता हूं और यह मेरे लिए काम करता है, मुझे आशा है कि इससे मदद मिलेगी :)

   <div id="data">
        <form>
            <input type="file" name="userfile" id="userfile" size="20" />
            <br /><br />
            <input type="button" id="upload" value="upload" />
        </form>
    </div>
  <script>
        $(document).ready(function(){
                $('#upload').click(function(){

                    console.log('upload button clicked!')
                    var fd = new FormData();    
                    fd.append( 'userfile', $('#userfile')[0].files[0]);

                    $.ajax({
                      url: 'upload/do_upload',
                      data: fd,
                      processData: false,
                      contentType: false,
                      type: 'POST',
                      success: function(data){
                        console.log('upload success!')
                        $('#data').empty();
                        $('#data').append(data);

                      }
                    });
                });
        });
    </script>   

शीर्षलेख में हेरफेर करने के लिए आप ईवेंट को beforeSend से पहले $ beforeSend उपयोग कर सकते हैं।

...

beforeSend: function(xhr) { 
    xhr.setRequestHeader('Content-Type', 'multipart/form-data');
}

...

अतिरिक्त जानकारी के लिए यह लिंक देखें: http://msdn.microsoft.com/en-us/library/ms536752(v=vs.85).aspx






multipartform-data