JQuery.ajax के साथ मल्टीपार्ट/फॉर्मडाटा भेजना




file-upload multipartform-data (8)

  1. jquery-> $ ("# id") द्वारा फॉर्म ऑब्जेक्ट प्राप्त करें [0]
  2. डेटा = नया फॉर्मडाटा ($ ("# आईडी") [0]);
  3. ठीक है, डेटा आपकी इच्छा है

मुझे jQuery के AJAX-फ़ंक्शन का उपयोग कर सर्वरसाइड PHP-script में फ़ाइल भेजने में समस्या आई है। $('#fileinput').attr('files') साथ फ़ाइल-सूची प्राप्त करना संभव है $('#fileinput').attr('files') लेकिन यह डेटा सर्वर पर कैसे भेजना संभव है? फ़ाइल-इनपुट का उपयोग करते समय सर्वरसाइड php-script पर परिणामी सरणी ( $_POST ) 0 ( NULL ) है।

मुझे पता है कि यह संभव है (हालांकि मुझे अभी तक कोई jQuery समाधान नहीं मिला है, केवल प्रोटोटाई कोड ( http://webreflection.blogspot.com/2009/03/safari-4-multiple-upload-with-progress.html ) )।

यह अपेक्षाकृत नया प्रतीत होता है, इसलिए कृपया एक्सएचआर / अजाक्स के माध्यम से फ़ाइल अपलोड असंभव नहीं होगा, क्योंकि यह निश्चित रूप से काम कर रहा है।

मुझे सफारी 5, एफएफ में कार्यक्षमता की आवश्यकता है और क्रोम अच्छा होगा लेकिन आवश्यक नहीं है।

अब के लिए मेरा कोड है:

$.ajax({
    url: 'php/upload.php',
    data: $('#file').attr('files'),
    cache: false,
    contentType: 'multipart/form-data',
    processData: false,
    type: 'POST',
    success: function(data){
        alert(data);
    }
});

आईई के पुराने संस्करण फॉर्मडेटा का समर्थन नहीं करते हैं (फॉर्मडाटा के लिए पूर्ण ब्राउज़र समर्थन सूची यहां है: https://developer.mozilla.org/en-US/docs/Web/API/FormData )।

या तो आप एक jquery प्लगइन का उपयोग कर सकते हैं (पूर्व में, http://malsup.com/jquery/form/#code-samples ) या, आप AJAX के माध्यम से मल्टीपार्ट फ़ॉर्म डेटा पोस्ट करने के लिए IFrame आधारित समाधान का उपयोग कर सकते हैं: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript


एक गोचाचा आज मैं भाग गया था, मुझे लगता है कि इस समस्या से संबंधित इंगित करने के लायक है: अगर AJAX कॉल के लिए यूआरएल रीडायरेक्ट किया गया है तो सामग्री-प्रकार के लिए हेडर: 'मल्टीपार्ट / फॉर्म-डेटा' खोया जा सकता है।

उदाहरण के लिए, मैं http://server.com/context?param=x पोस्ट कर रहा था

क्रोम के नेटवर्क टैब में मैंने इस अनुरोध के लिए सही मल्टीपार्ट हेडर देखा लेकिन फिर 302 http://server.com/context/?param=x रीडायरेक्ट करें (संदर्भ के बाद स्लैश नोट करें)

रीडायरेक्ट के दौरान मल्टीपार्ट हेडर खो गया था। सुनिश्चित करें कि ये समाधान आपके लिए काम नहीं कर रहे हैं, तो अनुरोधों को पुनर्निर्देशित नहीं किया जा रहा है।


फॉर्मडाटा क्लास काम करता है, हालांकि आईओएस सफारी (कम से कम आईफोन पर) मैं राफेल श्वेइकर्ट के समाधान का उपयोग करने में सक्षम नहीं था।

मोज़िला देव का फॉर्मडाटा ऑब्जेक्ट्स में हेरफेर करने का एक अच्छा पृष्ठ है।

तो, enctype निर्दिष्ट, अपने पृष्ठ में कहीं खाली जगह जोड़ें:

<form enctype="multipart/form-data" method="post" name="fileinfo" id="fileinfo"></form>

फिर, फॉर्मडाटा ऑब्जेक्ट को इस प्रकार बनाएं:

var data = new FormData($("#fileinfo"));

और राफेल के कोड में आगे बढ़ें।


मेरे कोड को देखो, यह मेरे लिए नौकरी करता है

$( '#formId' )
  .submit( function( e ) {
    $.ajax( {
      url: 'FormSubmitUrl',
      type: 'POST',
      data: new FormData( this ),
      processData: false,
      contentType: false
    } );
    e.preventDefault();
  } );

मैंने इस फ़ंक्शन को कुछ जानकारी के आधार पर बनाया है जिसे मैंने पढ़ा है।

इसका उपयोग करें .serialize() का उपयोग करने के बजाय, बस .serializefiles(); डाल .serializefiles();
मेरे परीक्षणों में यहां काम करना

//USAGE: $("#form").serializefiles();
(function($) {
$.fn.serializefiles = function() {
    var obj = $(this);
    /* ADD FILE TO PARAM AJAX */
    var formData = new FormData();
    $.each($(obj).find("input[type='file']"), function(i, tag) {
        $.each($(tag)[0].files, function(i, file) {
            formData.append(tag.name, file);
        });
    });
    var params = $(obj).serializeArray();
    $.each(params, function (i, val) {
        formData.append(val.name, val.value);
    });
    return formData;
};
})(jQuery);

सफारी 5 / फ़ायरफ़ॉक्स 4 से शुरू करना, FormData क्लास का उपयोग करना सबसे आसान है:

var data = new FormData();
jQuery.each(jQuery('#file')[0].files, function(i, file) {
    data.append('file-'+i, file);
});

तो अब आपके पास एक FormData ऑब्जेक्ट है, जो XMLHttpRequest के साथ भेजने के लिए तैयार है।

jQuery.ajax({
    url: 'php/upload.php',
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    method: 'POST',
    type: 'POST', // For jQuery < 1.9
    success: function(data){
        alert(data);
    }
});

यह जरूरी है कि आप Content-Type को false सेट करें, jQuery को आपके लिए Content-Type शीर्षलेख जोड़ने के लिए मजबूर करना, अन्यथा, सीमा स्ट्रिंग इससे गुम हो जाएगी। साथ ही, आपको processData फ्लैग को गलत पर सेट करना होगा, अन्यथा, jQuery आपके FormData को स्ट्रिंग में बदलने की कोशिश करेगा, जो असफल हो जाएगा।

अब आप PHP में फ़ाइल का उपयोग कर पुनर्प्राप्त कर सकते हैं:

$_FILES['file-0']

(केवल एक फ़ाइल है, file-0 , जब तक कि आप अपने फ़ाइल इनपुट पर multiple विशेषता निर्दिष्ट नहीं करते हैं, इस स्थिति में, संख्या प्रत्येक फ़ाइल के साथ बढ़ेगी।)

पुराने ब्राउज़र के लिए फॉर्मडाटा अनुकरण का उपयोग करना

var opts = {
    url: 'php/upload.php',
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    method: 'POST',
    type: 'POST', // For jQuery < 1.9
    success: function(data){
        alert(data);
    }
};
if(data.fake) {
    // Make sure no text encoding stuff is done by xhr
    opts.xhr = function() { var xhr = jQuery.ajaxSettings.xhr(); xhr.send = xhr.sendAsBinary; return xhr; }
    opts.contentType = "multipart/form-data; boundary="+data.boundary;
    opts.data = data.toString();
}
jQuery.ajax(opts);

किसी मौजूदा फॉर्म से फॉर्मडेटा बनाएं

फ़ाइलों को मैन्युअल रूप से पुन: सक्रिय करने के बजाय, FormData ऑब्जेक्ट को किसी मौजूदा फ़ॉर्म ऑब्जेक्ट की सामग्री के साथ भी बनाया जा सकता है:

var data = new FormData(jQuery('form')[0]);

एक काउंटर के बजाय एक PHP देशी सरणी का प्रयोग करें

बस अपने फ़ाइल तत्वों को समान नाम दें और नाम को ब्रैकेट में समाप्त करें:

jQuery.each(jQuery('#file')[0].files, function(i, file) {
    data.append('file[]', file);
});

$_FILES['file'] तब एक सरणी होगी जिसमें अपलोड की गई प्रत्येक फ़ाइल के लिए फ़ाइल अपलोड फ़ील्ड होंगे। मैं वास्तव में अपने शुरुआती समाधान पर इसकी अनुशंसा करता हूं क्योंकि इसे फिर से शुरू करना आसान है।


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

मैं भी jQuery () विधि का उपयोग करना चाहता था ताकि मैं .ready () का उपयोग करने से बच सकूं।

यह मुझे इस पर मिला: (अपने jQuery चयनकर्ता के साथ फॉर्म चयनकर्ता को प्रतिस्थापित करें)

$(document).on('submit', formSelecter, function( e ) {
        e.preventDefault();
    $.ajax( {
        url: $(this).attr('action'),
        type: 'POST',
        data: new FormData( this ),
        processData: false,
        contentType: false
    }).done(function( data ) {
        //do stuff with the data you got back.
    });

});




form-data