AJAX फ़ाइल अपलोड के लिए फॉर्मडाटा का उपयोग कैसे करें?

Question

यह मेरा HTML है जो मैं ड्रैग और ड्रॉप फंक्शनलिटी का उपयोग करके गतिशील रूप से उत्पन्न कर रहा हूं।

<form method="POST" id="contact" name="13" class="form-horizontal wpc_contact" novalidate="novalidate" enctype="multipart/form-data">
<fieldset>
    <div id="legend" class="">
        <legend class="">file demoe 1</legend>
        <div id="alert-message" class="alert hidden"></div>
    </div>

    <div class="control-group">
        <!-- Text input-->
        <label class="control-label" for="input01">Text input</label>
        <div class="controls">
            <input type="text" placeholder="placeholder" class="input-xlarge" name="name">
            <p class="help-block" style="display:none;">text_input</p>
        </div>
        <div class="control-group">  </div>
        <label class="control-label">File Button</label>

        <!-- File Upload --> 
        <div class="controls">
            <input class="input-file" id="fileInput" type="file" name="file">
        </div>
    </div>
    <div class="control-group">    

        <!-- Button --> 
        <div class="controls">
            <button class="btn btn-success">Button</button>
        </div>
    </div>
</fieldset>
</form> 

यह मेरा जावास्क्रिप्ट कोड है:

<script>
    $('.wpc_contact').submit(function(event){
        var formname = $('.wpc_contact').attr('name');
        var form = $('.wpc_contact').serialize();               
        var FormData = new FormData($(form)[1]);

        $.ajax({
            url : '<?php echo plugins_url(); ?>'+'/wpc-contact-form/resources/js/tinymce.php',
            data : {form:form,formname:formname,ipadd:ipadd,FormData:FormData},
            type : 'POST',
            processData: false,
            contentType: false,
            success : function(data){
            alert(data); 
            }
        });
   }

Comments

आपको इसे ( डेवलपर . formData();mozilla.org/en-US/docs/Web/API/FormData/append ) पढ़ना चाहिए । एपेंड विधि में एक फ़ाइल के लिए एक वैकल्पिक तीसरा पैरामीटर है।

— 14:13 पर www139

Answer 1

सही फ़ॉर्म डेटा उपयोग के लिए आपको 2 चरण करने होंगे।

तैयारी

आप अपना पूरा फॉर्म फॉर्मेट () प्रसंस्करण के लिए दे सकते हैं

var form = $('form')[0]; // You need to use standard javascript object here
var formData = new FormData(form);

या FormData के लिए सटीक डेटा निर्दिष्ट करें ()

var formData = new FormData();
formData.append('section', 'general');
formData.append('action', 'previewImg');
// Attach file
formData.append('image', $('input[type=file]')[0].files[0]); 

भेजने का रूप

Jquery के साथ अजाक्स अनुरोध इस तरह दिखेगा:

$.ajax({
    url: 'Your url here',
    data: formData,
    type: 'POST',
    contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
    processData: false, // NEEDED, DON'T OMIT THIS
    // ... Other options like success and etc
});

इसके बाद यह एजैक्स अनुरोध भेजेगा जैसे आप नियमित रूप से जमा करते हैं enctype="multipart/form-data"

अपडेट: यह अनुरोध type:"POST"विकल्पों के बिना काम नहीं कर सकता क्योंकि सभी फाइलों को POST अनुरोध के माध्यम से भेजा जाना चाहिए।

नोट: contentType: false केवल jQuery से 1.6 पर उपलब्ध है

Comments

क्या मैं अजाक्स कॉल में "एनक्टाइप" सेट कर सकता हूं? मुझे लगता है कि मेरे पास इसके साथ एक मुद्दा हो सकता है। या, क्या मैं इसे फॉर्मडाटा ऑब्जेक्ट पर सेट कर सकता हूं?

— राउटर

आप ऐसा कर सकते हैं। इसके लिए मेरे कोड में इस फाइल के लिए जरूरी है कि लाइनों के बाद देखें।

— वर्तनी

नियंत्रक में डेटा कैसे मिलता है? भेजने की जरूरत है getCsrfToken?

— Юрий Светлов

@ DependsрийСветлов यह इस बात पर निर्भर करता है कि आप किस प्रकार के नियंत्रक का उपयोग करते हैं। क्या यह सर्वर साइड या फ्रंट साइड कंट्रोलर है? आप यहाँ CSRF सुरक्षा को हल करने की कोशिश कर रहे हैं?

— वर्तनी

@ManthanJamdagni जब आप प्राप्त करते हैं $('form'), तो यह jQuery ऑब्जेक्ट लौटाएगा। लेकिन हमें यहां jQuery कार्यक्षमता के बिना नियमित js ऑब्जेक्ट की आवश्यकता है। इसलिए हमें [0]अंकन के साथ नियमित वस्तु मिलती है। इस निर्माण के बजाय आप कॉल document.getElementById()या सिमुलर कॉल कर सकते हैं।

— स्पेल

Answer 2

मैं ऊपर एक टिप्पणी नहीं जोड़ सकता क्योंकि मेरे पास पर्याप्त प्रतिष्ठा नहीं है, लेकिन उपरोक्त जवाब मेरे लिए लगभग सही था, सिवाय मुझे जोड़ना था

प्रकार: "पोस्ट"

to .ajax call। मैं कुछ मिनटों तक अपना सिर खुजलाता रहा कि यह पता लगाने की कोशिश कर रहा हूं कि मैंने क्या गलत किया है, बस इतना ही चाहिए और यह एक इलाज का काम करता है। तो यह संपूर्ण स्निपेट है:

मेरे ऊपर दिए गए जवाब का पूरा श्रेय, यह सिर्फ एक छोटा सा ट्विक है। यह सिर्फ मामले में किसी और अटक जाता है और स्पष्ट नहीं देख सकता है।

  $.ajax({
    url: 'Your url here',
    data: formData,
    type: "POST", //ADDED THIS LINE
    // THIS MUST BE DONE FOR FILE UPLOADING
    contentType: false,
    processData: false,
    // ... Other options like success and etc
})

Answer 3

<form id="upload_form" enctype="multipart/form-data">

CodeIgniter फ़ाइल अपलोड के साथ jQuery:

var formData = new FormData($('#upload_form')[0]);

formData.append('tax_file', $('input[type=file]')[0].files[0]);

$.ajax({
    type: "POST",
    url: base_url + "member/upload/",
    data: formData,
    //use contentType, processData for sure.
    contentType: false,
    processData: false,
    beforeSend: function() {
        $('.modal .ajax_data').prepend('<img src="' +
            base_url +
            '"asset/images/ajax-loader.gif" />');
        //$(".modal .ajax_data").html("<pre>Hold on...</pre>");
        $(".modal").modal("show");
    },
    success: function(msg) {
        $(".modal .ajax_data").html("<pre>" + msg +
            "</pre>");
        $('#close').hide();
    },
    error: function() {
        $(".modal .ajax_data").html(
            "<pre>Sorry! Couldn't process your request.</pre>"
        ); // 
        $('#done').hide();
    }
});

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

var form = $('form')[0]; 
var formData = new FormData(form);     
formData.append('tax_file', $('input[type=file]')[0].files[0]);

या

var formData = new FormData($('#upload_form')[0]);
formData.append('tax_file', $('input[type=file]')[0].files[0]); 

दोनों काम करेंगे।

Answer 4

$(document).ready(function () {
    $(".submit_btn").click(function (event) {
        event.preventDefault();
        var form = $('#fileUploadForm')[0];
        var data = new FormData(form);
        data.append("CustomField", "This is some extra data, testing");
        $("#btnSubmit").prop("disabled", true);
        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: "upload.php",
            data: data,
            processData: false,
            contentType: false,
            cache: false,
            timeout: 600000,
            success: function (data) {
                console.log();
            },
        });
    });
});

Answer 5

View:
<label class="btn btn-info btn-file">
Import <input type="file" style="display: none;">
</label>
<Script>
$(document).ready(function () {
                $(document).on('change', ':file', function () {
                    var fileUpload = $(this).get(0);
                    var files = fileUpload.files;
                    var bid = 0;
                    if (files.length != 0) {
                        var data = new FormData();
                        for (var i = 0; i < files.length ; i++) {
                            data.append(files[i].name, files[i]);
                        }
                        $.ajax({
                            xhr: function () {
                                var xhr = $.ajaxSettings.xhr();
                                xhr.upload.onprogress = function (e) {
                                    console.log(Math.floor(e.loaded / e.total * 100) + '%');
                                };
                                return xhr;
                            },
                            contentType: false,
                            processData: false,
                            type: 'POST',
                            data: data,
                            url: '/ControllerX/' + bid,
                            success: function (response) {
                                location.href = 'xxx/Index/';
                            }
                        });
                    }
                });
            });
</Script>
Controller:
[HttpPost]
        public ActionResult ControllerX(string id)
        {
            var files = Request.Form.Files;
...

Comments

यह आम तौर पर एक उत्तर के साथ स्पष्टीकरण प्रदान करने के लिए अच्छा रूप माना जाता है।

— ouflak

Answer 6

$('#form-withdraw').submit(function(event) {

    //prevent the form from submitting by default
    event.preventDefault();



    var formData = new FormData($(this)[0]);

    $.ajax({
        url: 'function/ajax/topup.php',
        type: 'POST',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function (returndata) {
          if(returndata == 'success')
          {
            swal({
              title: "Great",
              text: "Your Form has Been Transfer, We will comfirm the amount you reload in 3 hours",
              type: "success",
              showCancelButton: false,
              confirmButtonColor: "#DD6B55",
              confirmButtonText: "OK",
              closeOnConfirm: false
            },
            function(){
              window.location.href = '/transaction.php';
            });
          }

          else if(returndata == 'Offline')
          {
              sweetAlert("Offline", "Please use other payment method", "error");
          }
        }
    });



}); 

Answer 7

असल में प्रलेखन शो है कि आप उपयोग कर सकते हैं XMLHttpRequest().send() बस भेजने के लिए नाना डेटा मामले jQuery बेकार में

Answer 8

आईडी द्वारा तत्व को खोजने के लिए देशी जावास्क्रिप्ट का उपयोग करने के लिए बेहतर है: document.getElementById ("yourFormElementID") ।

$.ajax( {
      url: "http://yourlocationtopost/",
      type: 'POST',
      data: new FormData(document.getElementById("yourFormElementID")),
      processData: false,
      contentType: false
    } ).done(function(d) {
           console.log('done');
    });

Answer 9

शुभ प्रभात।

मुझे कई छवियों के अपलोड के साथ एक ही समस्या थी। समाधान जितना मैंने सोचा था उससे अधिक सरल था: नाम क्षेत्र में [] शामिल करें।

<input type="file" name="files[]" multiple>

मैंने फॉर्मडाटा पर कोई संशोधन नहीं किया।

Comments

यह उस समस्या से कोई लेना-देना नहीं है, जिसके बारे में सवाल पूछ रहा है और यह सिर्फ एक ख़ासियत है कि PHP एक ही नाम वाले कई मूल्यों वाले डेटा को कैसे संभालती है।

— क्वेंटिन