এজেএক্স ফাইল আপলোডের জন্য ফর্মডাটা কীভাবে ব্যবহার করবেন?

Question

এটি আমার এইচটিএমএল যা আমি ড্রেগ এবং ড্রপ কার্যকারিতা ব্যবহার করে গতিশীলভাবে উত্পন্ন করছি।

<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

আপনার এটি পড়তে হবে ( developer.mozilla.org/en-US/docs/Web/API/FormData/append ) formData();অ্যাপেন্ড পদ্ধতিতে একটি ফাইলের জন্য alচ্ছিক তৃতীয় প্যারামিটার রয়েছে।

— www139

Answer 1

সঠিক ফর্ম ডেটা ব্যবহারের জন্য আপনার 2 টি পদক্ষেপ করতে হবে।

উদ্যতি

প্রসেসিংয়ের জন্য আপনি ফর্মডাটা () কে আপনার পুরো ফর্মটি দিতে পারেন

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

অথবা ফর্মডাটা () এর জন্য সঠিক তথ্য নির্দিষ্ট করুন

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

ফর্ম প্রেরণ

জ্যাকুরির সাথে অ্যাজাক্স অনুরোধটি এরকম দেখাচ্ছে:

$.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"বিকল্পগুলি ছাড়া কাজ করতে পারে না কারণ সমস্ত ফাইল অবশ্যই পোস্টের অনুরোধের মাধ্যমে প্রেরণ করা উচিত।

দ্রষ্টব্য: contentType: false কেবল jQuery 1.6 থেকে উপলব্ধ

Comments

আমি কি আজাক্স কলটিতে "এনটাইটাইপ" সেট করতে পারি? আমি মনে করি এটি নিয়ে আমার কোনও সমস্যা থাকতে পারে। বা, আমি কি এটি ফর্মডেটা অবজেক্টে সেট করতে পারি?

— ওয়াউটার

আপনি পারেন। এটির জন্য লাইনগুলি দেখুন আমার কোডটিতে ফাইল আপলোড করা উচিত।

— বানান

@ স্পেল কন্ট্রোলারে ডেটা পাবেন কীভাবে? প্রেরণ দরকার getCsrfToken?

— 11

@ ЮрийСветлов আপনি কোন ধরণের নিয়ামক ব্যবহার করেন এটি নির্ভর করে। এটি সার্ভার সাইড বা সামনের দিকের নিয়ামক? আপনি কি এখানে সিএসআরএফ সুরক্ষা সমাধান করার চেষ্টা করছেন?

— বানান

@ মন্তানজামদগনি আপনি যখন পাবেন তখন $('form')তা jQuery অবজেক্টটি ফিরিয়ে দেবে। তবে আমাদের এখানে jQuery কার্যকারিতা ছাড়াই নিয়মিত js অবজেক্টের প্রয়োজন। এজন্য আমরা [0]স্বরলিপি সহ নিয়মিত বস্তু পাই । এই নির্মাণের পরিবর্তে আপনি কল করতে পারেন document.getElementById()বা একক কল করতে পারেন ।

— বানান

Answer 2

আমার যথেষ্ট খ্যাতি না থাকায় আমি উপরের কোনও মন্তব্য যুক্ত করতে পারি না, তবে উপরের উত্তরটি আমার পক্ষে প্রায় নিখুঁত ছিল, আমাকে যুক্ত করা ছাড়া

প্রকার: "পোস্ট"

.ajax কল এ। আমি আমার মাথাটি স্ক্র্যাচ করে কয়েক মিনিটের জন্য চেষ্টা করছিলাম যে আমি কী ভুল করেছি তা বোঝার চেষ্টা করা হয়েছিল, এটিই প্রয়োজন এবং এটি একটি ট্রিট কাজ করে। সুতরাং এটি পুরো স্নিপেট:

আমার উপরের উত্তরের সম্পূর্ণ ক্রেডিট, এটি এটির জন্য একটি সামান্য টুইট twe এটি কেবল তখনই ঘটে যখন অন্য কেউ আটকে যায় এবং প্রকটটি দেখতে পায় না।

  $.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">

কোডআইগনিটার ফাইল আপলোড সহ 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

উত্তরের সাথে একটি ব্যাখ্যা দেওয়ার জন্য এটি সাধারণত ভাল ফর্ম হিসাবে বিবেচিত হয়।

— ই

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

প্রকৃতপক্ষে ডকুমেন্টেশনগুলি দেখায় যে আপনি jquery স্তন্যপান করার ক্ষেত্রে XMLHttpRequest().send() কেবলমাত্র মাল্টিফর্ম ডেটা প্রেরণ করতে ব্যবহার করতে পারেন

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

প্রশ্নটি যে প্রশ্নটি জিজ্ঞাসা করছে তার সাথে এর কোনও যোগসূত্র নেই এবং পিএইচপি কীভাবে একই নামের একাধিক মান সহ ডেটা ফর্ম করে তা হ্যান্ডেল করার একটি বিশেষত্ব মাত্র।

— কোয়ান্টিন