এজাক্স ব্যবহার করে একটি ফর্মে ডেটা এবং ফাইল উভয়ই আপলোড করছেন?

Question

আমি আমার ফর্মগুলির জন্য ডেটা এবং ফাইল জমা দেওয়ার জন্য jQuery এবং Ajax ব্যবহার করছি তবে আমি নিশ্চিত না যে কীভাবে ডেটা এবং ফাইল উভয়ই একটি ফর্মে প্রেরণ করা যায়?

আমি বর্তমানে উভয় পদ্ধতিতে প্রায় একই কাজ করি তবে ডেটা যেভাবে অ্যারেতে সংগ্রহ করা হয় সেভাবে ভিন্ন, ডেটা ব্যবহার করে .serialize();তবে ফাইলগুলি ব্যবহার করে= new FormData($(this)[0]);

অ্যাজাক্সের মাধ্যমে একটি ফর্মে ফাইল এবং ডেটা আপলোড করতে সক্ষম হতে উভয় পদ্ধতির একত্রিত করা সম্ভব?

ডেটা jQuery, Ajax এবং এইচটিএমএল

$("form#data").submit(function(){

    var formData = $(this).serialize();

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});

<form id="data" method="post">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <button>Submit</button>
</form>

ফাইল jQuery, Ajax এবং এইচটিএমএল

$("form#files").submit(function(){

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

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});

<form id="files" method="post" enctype="multipart/form-data">
    <input name="image" type="file" />
    <button>Submit</button>
</form>

আমি কীভাবে উপরেরটি একত্রিত করতে পারি যাতে আমি আজাক্সের মাধ্যমে এক ফর্মের মধ্যে ডেটা এবং ফাইলগুলি প্রেরণ করতে পারি?

আমার লক্ষ্য এই ফর্মটি সমস্তই আজাক্সের সাথে একটি পোস্টে প্রেরণে সক্ষম হওয়া সম্ভব?

<form id="datafiles" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button>Submit</button>
</form>

Comments

FormDataপদ্ধতির ফরম ধারণ করে যাহা চান, শুধু ফাইল আপলোড ক্ষেত্র না এর সঙ্গে সুন্দর কাজ করা উচিত; যদিও এটি ব্যাপকভাবে সমর্থিত নয়।

— ল্যানজ

@ লানজ যা এখনও? সিরিয়ালযুক্ত একটি কেবলমাত্র ডেটা ব্যবহার করে বলে মনে হচ্ছে অন্যটি কেবল ফাইলের জন্য কাজ করে?

— ড্যান

এই এমডিএন পৃষ্ঠার বিচার করে , আপনি যখন ব্যবহার করবেন তখন সমস্ত ফর্ম ডেটা জমা দিতে হবেFormData

— ল্যানজ

@ এলানজ আপনি ঠিক বলেছেন, এটি কাজ করে আমি কীভাবে ভেবেছিলাম এটি হওয়া উচিত যে আমি ভুল ফর্ম আইডি ব্যবহার করছি, আপনি এজাক্স দিয়ে একটি ফর্মের মাধ্যমে ফাইল এবং ডেটা উভয়ই আপলোড করতে পারেন।

— ড্যান

মাল্টি-সিলেক্ট ফাইল ইনপুট থাকা অবস্থায় এটি কাজ করবে না বলে মনে হচ্ছে। এটি কেবলমাত্র প্রথম ফাইল আপলোড করে।

— সামি আল-সুবি

Answer 1

আমার যে সমস্যাটি হয়েছিল তা ভুল jQuery সনাক্তকারী ব্যবহার করে using

আপনি এজ্যাক্স ব্যবহার করে এক ফর্মের সাথে ডেটা এবং ফাইলগুলি আপলোড করতে পারেন ।

পিএইচপি + এইচটিএমএল

<?php

print_r($_POST);
print_r($_FILES);
?>

<form id="data" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button>Submit</button>
</form>

jQuery + Ajax

$("form#data").submit(function(e) {
    e.preventDefault();    
    var formData = new FormData(this);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

সংক্ষিপ্ত সংস্করণ

$("form#data").submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);    

    $.post($(this).attr("action"), formData, function(data) {
        alert(data);
    });
});

Comments

আইআই 10 এর সংস্করণগুলিতে এই সমাধানটি কার্যকর হবে না, কারণ ফর্মডাটাটি এইচটিএমএল 5 অবজেক্ট, আইই 8 বা 9

— জাভিয়ের গুজম্যান

$(this)[0]কেবলমাত্র একটি উপনাম this, তাই new FormData(this)যথেষ্ট হওয়া উচিত।

— r3wt

ফর্মডাটা অবজেক্টটি পরিদর্শন করা সম্ভব বলে মনে হচ্ছে না, এই প্রশ্নটি দেখুন ( যেই অবাস্তবটি সর্বদা শূন্য ছিল বলে আমি যেমন করেছিলাম ঠিক তেমন অনবদ্যতার মধ্যে যারা চলেছে) see

— লরা

ভবিষ্যতের পাঠকদের জন্য: বিষয়বস্তু টাইপ এবং প্রক্রিয়া ডেটা ঘোষণা গুরুত্বপূর্ণ। আরও তথ্যের জন্য এই উত্তর দেখুন ।

— অ্যারোনসিয়েব

এর async: falseজন্য এটি কাজ করা প্রয়োজন বলে মনে হচ্ছে না এবং মোবাইল (একক থ্রেডেড) ব্রাউজারগুলিতে ব্লক করার কারণ ঘটেছে

— জেরেমি ডাল্ডার

Answer 2

অন্য বিকল্পটি হ'ল একটি iframe ব্যবহার করা এবং এটির জন্য ফর্মের লক্ষ্য সেট করা।

আপনি এটি ব্যবহার করতে পারেন (এটি jQuery ব্যবহার করে):

function ajax_form($form, on_complete)
{
    var iframe;

    if (!$form.attr('target'))
    {
        //create a unique iframe for the form
        iframe = $("<iframe></iframe>").attr('name', 'ajax_form_' + Math.floor(Math.random() * 999999)).hide().appendTo($('body'));
        $form.attr('target', iframe.attr('name'));
    }

    if (on_complete)
    {
        iframe = iframe || $('iframe[name="' + $form.attr('target') + '"]');
        iframe.load(function ()
        {
            //get the server response
            var response = iframe.contents().find('body').text();
            on_complete(response);
        });
    }
}

এটি সমস্ত ব্রাউজারের সাথে ভালভাবে কাজ করে, আপনার ডেটা ক্রমিক বা প্রস্তুত করার দরকার নেই। এক নিচে দিক আপনি অগ্রগতি নিরীক্ষণ করতে পারবেন না।

এছাড়াও, কমপক্ষে ক্রোমের জন্য, অনুরোধটি বিকাশকারী সরঞ্জামগুলির "xhr" ট্যাবে প্রদর্শিত হবে না তবে "ডক" এর অধীনে

Comments

প্রকৃতপক্ষে এটি আজাক্স নয়, এখনও একই প্রশ্নযুক্ত ব্যক্তিদের পক্ষে দরকারী হতে পারে।

— রোয়

আমি উত্তর দিতে পারছি না কেন এই উত্তরটি -২ পাওয়া যায়, আমার উত্তরাধিকারী ব্রাউজারের সমর্থন প্রয়োজন হওয়ায় এটি ব্যবহার করে শেষ করেছি

— সিজভ

এই উত্তরটি থ্রেডে থাকা উচিত কারণ অন্যান্য উত্তরগুলির নোট যেমন 'পুরানো ব্রাউজারগুলি কাজ করে না' বা 'আইফ্রেমে হ্যাক ব্যবহার করা যেতে পারে' তবে কখনও তাদের ঠিকানা দেয় না। কোডের টুকরো টুকরো, কীভাবে

— ওললোড

Answer 3

আমার এই একই সমস্যাটি এইচটিপিপोस्টেড ফাইলবেসের সাথে এএসপি.নেট এমভিসি-তে ছিল এবং জমা দেওয়ার ফর্মটি ব্যবহার করার পরিবর্তে আমাকে যেখানে কিছু জিনিস করার দরকার ছিল সেখানে ক্লিক করার বোতামটি ব্যবহার করার দরকার ছিল এবং তারপরে যদি ঠিক আছে তবে জমা দেওয়া ফর্মটি এখানে কিভাবে কাজ করলাম তা এইভাবে হয় working

$(".submitbtn").on("click", function(e) {

    var form = $("#Form");

    // you can't pass Jquery form it has to be javascript form object
    var formData = new FormData(form[0]);

    //if you only need to upload files then 
    //Grab the File upload control and append each file manually to FormData
    //var files = form.find("#fileupload")[0].files;

    //$.each(files, function() {
    //  var file = $(this);
    //  formData.append(file[0].name, file[0]);
    //});

    if ($(form).valid()) {
        $.ajax({
            type: "POST",
            url: $(form).prop("action"),
            //dataType: 'json', //not sure but works for me without this
            data: formData,
            contentType: false, //this is requireded please see answers above
            processData: false, //this is requireded please see answers above
            //cache: false, //not sure but works for me without this
            error   : ErrorHandler,
            success : successHandler
        });
    }
});

এই ইচ্ছার চেয়ে সঠিকভাবে আপনার MVC মডেল পূরণ করুন, আপনার মডেল, HttpPostedFileBase জন্য বৈশিষ্ট্য [মধ্যে দয়া করে নিশ্চিত করুন] হিসেবে একই নাম আছে নাম এইচটিএমএল অর্থাত ইনপুট নিয়ন্ত্রণ

<input id="fileupload" type="file" name="UploadedFiles" multiple>

public class MyViewModel
{
    public HttpPostedFileBase[] UploadedFiles { get; set; }
}

Comments

আপনি একটি সময় বাঁচানোর জন্য। :)

— সুহেল মমতাজ আওয়ান

আমার ক্ষেত্রে আমাকে ব্যবহার করতে হয়েছিল:contentType : "application/octet-stream"

— ক্রিস্টোফ রাউসি

ধন্যবাদ, বন্ধু! আপনি অনেক সময় সাশ্রয় করেছেন।

— অ্যাক্সেস অস্বীকার

এটি জ্যাঙ্গোর সাথে কাজ করে, দুর্দান্ত!

— csandreas1

ধন্যবাদ বন্ধু! নীচে 2 লাইন আমার জন্য কাজ করেছে। var form = $ ("# ফর্ম"); var formData = নতুন ফর্মডেটা (ফর্ম [0]);

— রাজীব কুমার

Answer 4

বা সংক্ষিপ্ত:

$("form#data").submit(function() {
    var formData = new FormData(this);
    $.post($(this).attr("action"), formData, function() {
        // success    
    });
    return false;
});

Comments

সুতরাং এটির সাহায্যে, আপনি কীভাবে একই স্ক্রিপ্টটি ব্যবহার করে কোনও ডেটা ফিল্ডকে বৈধতা দেবেন, এটি হ'ল যদি আপনার ফর্মটিতে একটি পাঠ্য ক্ষেত্র এবং একটি ফাইল ক্ষেত্র রয়েছে

— জর্জ

Answer 5

আমার জন্য, এটি enctype: 'multipart/form-data'অ্যাজাক্স অনুরোধে ক্ষেত্র ছাড়া কাজ করে না । আমি আশা করি এটি একই রকম সমস্যায় আটকে থাকা কাউকে সহায়তা করে।

যদিও enctype ইতিমধ্যে কোনও কারণে ফর্মের বৈশিষ্ট্যে সেট করা ছিল , এজ্যাক্স অনুরোধটি enctypeসুস্পষ্ট ঘোষণা ছাড়াই স্বয়ংক্রিয়ভাবে সনাক্ত করতে পারেনি (jQuery 3.3.1)।

// Tested, this works for me (jQuery 3.3.1)

fileUploadForm.submit(function (e) {   
    e.preventDefault();
    $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            enctype: 'multipart/form-data',
            data: new FormData(this),
            processData: false,
            contentType: false,
            success: function (data) {
                console.log('Thank God it worked!');
            }
        }
    );
});

// enctype field was set in the form but Ajax request didn't set it by default.

<form action="process/file-upload" enctype="multipart/form-data" method="post" >

     <input type="file" name="input-file" accept="text/plain" required> 
     ...
</form>

উপরে উল্লিখিত অন্যরা যেমন দয়া করে ক্ষেত্র contentTypeএবং processDataক্ষেত্রগুলিতেও বিশেষ মনোযোগ দিন ।

Comments

"আমার জন্য, এটি এনটাইপ ছাড়াই কাজ করেনি: 'অজাক্স অনুরোধে' মাল্টিপার্ট / ফর্ম-ডেটা 'ক্ষেত্র।" - এটির কোনও প্রভাব থাকতে পারে না। এটি jQuery.ajax দ্বারা স্বীকৃত সম্পত্তি নয়। ডকুমেন্টেশন দেখুন যেখানে enctypeউল্লেখ করা হয় নি।

— কোয়ান্টিন

আমি আগে উল্লেখ করেছি, আমি একাধিক বিভিন্ন উত্তর চেষ্টা করেছি কিন্তু তারা কাজ করতে ব্যর্থ হয়েছে। জেএস কনসোলে একটি অ্যাজাক্স ত্রুটি উল্লেখ করে এনকোডিংয়ের ত্রুটি দেখানো হয়েছিল। পরে আমি এই টিউটোরিয়ালটি অনুসরণ করেছি যা শেষ পর্যন্ত আমার কোডটির কাজ করেছে এবং আমি এটি এখানে পোস্ট করেছি। সম্ভবত, enctypeক্ষেত্র কোনও কারণে ডকুমেন্টেশনে আচ্ছাদিত করা হয়নি। আমি jQuery উত্স কোড পরীক্ষা করে নি তাই আমি নিশ্চিত করে বলতে পারি না।

— অদিত্য উপাধ্যায়

"সম্ভবত, এনটাইপ ক্ষেত্র কোনও কারণে ডকুমেন্টেশনে আবৃত হয়নি।" - এই কারণটি হল যে jQuery এর সাথে কিছু করে না তাই এটি বোকামি।

— কোয়ান্টিন

সম্ভবত আপনি মকিয়ংয়ের সাথে যোগাযোগ করতে পারেন এবং তার পরিবর্তে তাঁর সাথে কথোপকথন করতে পারেন। আমি enctypeক্ষেত্রটি সরিয়ে আবার আমার কোড পরীক্ষা করেছি এবং এটি আর ফাইল আপলোড করে না (এনকোডিং ধরণের ত্রুটি রিটার্ন)। আমি নিশ্চিত না যে কীভাবে এটি কাজ করে যেহেতু আমি jQuery উত্স কোডটি যাচাই করে নি। যারা এই একই সমস্যায় আটকে আছে তাদের সহায়তা করার অভিপ্রায় নিয়ে আমি এই উত্তরটি পোস্ট করেছি। আমি এখানে upvotes জন্য মাছ ধরছি না ... আপনার যদি আরও প্রশ্ন / মন্তব্য থাকে তবে মন্তব্য করার পরিবর্তে চ্যাট করুন।

— অদিত্য উপাধ্যায়

Answer 6

আমার জন্য কোড কাজ অনুসরণ

$(function () {
    debugger;
    document.getElementById("FormId").addEventListener("submit", function (e) {
        debugger;
        if (ValidDateFrom()) { // Check Validation 
            var form = e.target;
            if (form.getAttribute("enctype") === "multipart/form-data") {
                debugger;
                if (form.dataset.ajax) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    var xhr = new XMLHttpRequest();
                    xhr.open(form.method, form.action);
                    xhr.onreadystatechange = function (result) {
                        debugger;
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            debugger;
                            var responseData = JSON.parse(xhr.responseText);
                            SuccessMethod(responseData); // Redirect to your Success method 
                        }
                    };
                    xhr.send(new FormData(form));
                }
            }
        }
    }, true);
});

আপনার অ্যাকশন পোস্ট পদ্ধতিতে, HTTPPostedFileBase আপলোড ফাইল হিসাবে প্যারামিটারটি পাস করুন এবং নিশ্চিত করুন যে আপনার ফাইলের ইনপুটটি অ্যাকশন পদ্ধতির প্যারামিটারে উল্লিখিত আছে। এটি এজেএক্স বিগ ফর্মের সাথেও কাজ করা উচিত।

এখানে মনে রাখবেন যে আপনার এজেএক্স বিগিন ফর্মটি এখানে কাজ করবে না যেহেতু আপনি উপরে বর্ণিত কোডটিতে আপনার পোস্ট কলকে সংজ্ঞায়িত করেছেন এবং প্রয়োজনীয়তা অনুসারে আপনি কোডটিতে আপনার পদ্ধতিটি উল্লেখ করতে পারেন

আমি জানি আমি দেরিতে উত্তর দিচ্ছি তবে এটি আমার জন্য কাজ করেছিল

Answer 7

একটি সহজ তবে আরও কার্যকর উপায়:
new FormData()এটি নিজেই একটি ধারক (বা একটি ব্যাগ) এর মতো। আপনি নিজেরাই অ্যাটর বা ফাইল সব কিছু রাখতে পারেন। আপনাকে কেবলমাত্র যুক্ত করতে হবে attribute, file, fileNameযেমন:

let formData = new FormData()
formData.append('input', input.files[0], input.files[0].name)

এবং কেবল এজেএক্স অনুরোধে এটি পাস করুন। উদাহরণ:

    let formData = new FormData()
    var d = $('#fileid')[0].files[0]

    formData.append('fileid', d);
    formData.append('inputname', value);

    $.ajax({
        url: '/yourroute',
        method: 'POST',
        contentType: false,
        processData: false,
        data: formData,
        success: function(res){
            console.log('successfully')
        },
        error: function(){
            console.log('error')
        }
    })

আপনি ফর্মডেটা সহ ফাইলের সংখ্যা বা ডেটা সংযুক্ত করতে পারেন।

এবং যদি আপনি নোড.জেসে স্ক্রিপ্ট.জেএস ফাইল থেকে রুট ফাইলের কাছে এজেএক্স অনুরোধ করছেন তবে ফাইল
req.bodyঅ্যাক্সেসের জন্য ডেটা (যেমন পাঠ্য) অ্যাক্সেস ব্যবহারের বিষয়ে সতর্ক থাকুন
req.files(যেমন চিত্র, ভিডিও ইত্যাদি)

Answer 8

আমার ক্ষেত্রে আমাকে একটি পোষ্ট অনুরোধ করতে হয়েছিল, যাতে শিরোনামের মাধ্যমে প্রেরিত তথ্য ছিল এবং ফর্মডাটা অবজেক্ট ব্যবহার করে একটি ফাইলও পাঠানো হয়েছিল।

আমি এখানে কয়েকটি উত্তরের সংমিশ্রণটি ব্যবহার করে এটি কাজ করেছিলাম, তাই মূলত যা কাজ শেষ হয়েছিল তা আমার আজাক্স অনুরোধে এই পাঁচটি লাইন ছিল:

 contentType: "application/octet-stream",
 enctype: 'multipart/form-data',
 contentType: false,
 processData: false,
 data: formData,

যেখানে ফর্মডাটা এইরকম একটি ভেরিয়েবল তৈরি হয়েছিল:

 var file = document.getElementById('uploadedFile').files[0];
 var form = $('form')[0];
 var formData = new FormData(form);
 formData.append("File", file);

Comments

contentType: "application/octet-stream",সক্রিয়ভাবে ক্ষতিকারক এবং এটি সমস্যার কারণ না হওয়ার একমাত্র কারণ হ'ল আপনি পরে এটি দুটি লাইন ওভাররাইট করে।

— কোয়ান্টিন

enctype: 'multipart/form-data',অর্থহীন। jQuery.ajax সেই পরামিতিটি চিনতে পারে না।

— কোয়ান্টিন

… আপনার উত্তরটির বাকি অংশ প্রশ্নের শিরোনাম থেকে "ডেটা" বিট "ডেটা এবং ফাইলগুলি" কভার করতে ব্যর্থ হয়েছে ।

— কোয়ান্টিন

Answer 9

<form id="form" method="post" action="otherpage.php" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button type='button' id='submit_btn'>Submit</button>
</form>

<script>
$(document).on("click", "#submit_btn", function (e) {
    //Prevent Instant Click  
    e.preventDefault();
    // Create an FormData object 
    var formData = $("#form").submit(function (e) {
        return;
    });
    //formData[0] contain form data only 
    // You can directly make object via using form id but it require all ajax operation inside $("form").submit(<!-- Ajax Here   -->)
    var formData = new FormData(formData[0]);
    $.ajax({
        url: $('#form').attr('action'),
        type: 'POST',
        data: formData,
        success: function (response) {
            console.log(response);
        },
        contentType: false,
        processData: false,
        cache: false
    });
    return false;
});
</script>

///// otherpage.php

<?php
    print_r($_FILES);
?>