AJAX এবং jQuery এর সাথে HTML5 ফাইল আপলোড ব্যবহার করা

Question 1

স্বীকারোক্তিজনকভাবে, স্ট্যাক ওভারফ্লোতে প্রায় একই রকম প্রশ্ন রয়েছে, তবে এটি আমার প্রয়োজনীয়তা পুরোপুরি মেটেনি বলে মনে হয়।

আমি যা করতে চাই তা এখানে:

একটি সম্পূর্ণ ফাইলের ডেটা আপলোড করুন যার এক টুকরো একটি ফাইল
কোডাইনাইটারের ফাইল আপলোড লাইব্রেরি নিয়ে কাজ করুন

এখানে অবধি সমস্ত কিছু ঠিক আছে। আমার প্রয়োজন হিসাবে ডেটা আমার ডাটাবেসে পাওয়া যায়। তবে আমি আমার ফর্মটি একটি এজেএক্স পোস্টের মাধ্যমে জমা দিতে চাই:

নেটিভ HTML5 ফাইল এপিআই ব্যবহার করে, ফ্ল্যাশ বা কোনও আইফ্রেমে সমাধান নয়
নিম্ন স্তরের .ajax()jQuery পদ্ধতির সাথে প্রাথমিকভাবে হস্তক্ষেপ করা

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

এটি কি অর্জন করা যায়?

Question 2

এটা খুব কঠিন না। প্রথমত, ফাইলরেডার ইন্টারফেসটি একবার দেখুন ।

সুতরাং, ফর্মটি জমা দেওয়ার পরে, জমা দেওয়ার প্রক্রিয়াটি ধরুন এবং

var file = document.getElementById('fileBox').files[0]; //Files[0] = 1st file
var reader = new FileReader();
reader.readAsText(file, 'UTF-8');
reader.onload = shipOff;
//reader.onloadstart = ...
//reader.onprogress = ... <-- Allows you to update a progress bar.
//reader.onabort = ...
//reader.onerror = ...
//reader.onloadend = ...


function shipOff(event) {
    var result = event.target.result;
    var fileName = document.getElementById('fileBox').files[0].name; //Should be 'picture.jpg'
    $.post('/myscript.php', { data: result, name: fileName }, continueSubmission);
}

তারপরে, সার্ভারে (যেমন myscript.php):

$data = $_POST['data'];
$fileName = $_POST['name'];
$serverFile = time().$fileName;
$fp = fopen('/uploads/'.$serverFile,'w'); //Prepends timestamp to prevent overwriting
fwrite($fp, $data);
fclose($fp);
$returnData = array( "serverFile" => $serverFile );
echo json_encode($returnData);

বা এটির মতো কিছু। আমি ভুল হতে পারে (এবং যদি আমি, দয়া করে, আমাকে সংশোধন), কিন্তু ভালো কিছু হিসাবে ফাইল সংরক্ষণ করা উচিত 1287916771myPicture.jpgমধ্যে /uploads/আপনার সার্ভার, এবং একটি JSON- পরিবর্তনশীল (ক করার সঙ্গে সাড়া উপর continueSubmission()ফাংশন) সার্ভার উপর ফাইলের নামের রয়েছে।

চেক আউট fwrite()এবং jQuery.post()।

উপরে পৃষ্ঠায় এটি বিস্তারিত কীভাবে ব্যবহার করবেন তা readAsBinaryString(), readAsDataUrl()এবং readAsArrayBuffer()আপনার অন্য প্রয়োজনের জন্য (যেমন ছবি, ভিডিও, ইত্যাদি)।

Question 3

JQuery এর সাথে (এবং ফর্মডাটা এপিআই ছাড়াই) আপনি এরকম কিছু ব্যবহার করতে পারেন:

function readFile(file){
   var loader = new FileReader();
   var def = $.Deferred(), promise = def.promise();

   //--- provide classic deferred interface
   loader.onload = function (e) { def.resolve(e.target.result); };
   loader.onprogress = loader.onloadstart = function (e) { def.notify(e); };
   loader.onerror = loader.onabort = function (e) { def.reject(e); };
   promise.abort = function () { return loader.abort.apply(loader, arguments); };

   loader.readAsBinaryString(file);

   return promise;
}

function upload(url, data){
    var def = $.Deferred(), promise = def.promise();
    var mul = buildMultipart(data);
    var req = $.ajax({
        url: url,
        data: mul.data,
        processData: false,
        type: "post",
        async: true,
        contentType: "multipart/form-data; boundary="+mul.bound,
        xhr: function() {
            var xhr = jQuery.ajaxSettings.xhr();
            if (xhr.upload) {

                xhr.upload.addEventListener('progress', function(event) {
                    var percent = 0;
                    var position = event.loaded || event.position; /*event.position is deprecated*/
                    var total = event.total;
                    if (event.lengthComputable) {
                        percent = Math.ceil(position / total * 100);
                        def.notify(percent);
                    }                    
                }, false);
            }
            return xhr;
        }
    });
    req.done(function(){ def.resolve.apply(def, arguments); })
       .fail(function(){ def.reject.apply(def, arguments); });

    promise.abort = function(){ return req.abort.apply(req, arguments); }

    return promise;
}

var buildMultipart = function(data){
    var key, crunks = [], bound = false;
    while (!bound) {
        bound = $.md5 ? $.md5(new Date().valueOf()) : (new Date().valueOf());
        for (key in data) if (~data[key].indexOf(bound)) { bound = false; continue; }
    }

    for (var key = 0, l = data.length; key < l; key++){
        if (typeof(data[key].value) !== "string") {
            crunks.push("--"+bound+"\r\n"+
                "Content-Disposition: form-data; name=\""+data[key].name+"\"; filename=\""+data[key].value[1]+"\"\r\n"+
                "Content-Type: application/octet-stream\r\n"+
                "Content-Transfer-Encoding: binary\r\n\r\n"+
                data[key].value[0]);
        }else{
            crunks.push("--"+bound+"\r\n"+
                "Content-Disposition: form-data; name=\""+data[key].name+"\"\r\n\r\n"+
                data[key].value);
        }
    }

    return {
        bound: bound,
        data: crunks.join("\r\n")+"\r\n--"+bound+"--"
    };
};

//----------
//---------- On submit form:
var form = $("form");
var $file = form.find("#file");
readFile($file[0].files[0]).done(function(fileData){
   var formData = form.find(":input:not('#file')").serializeArray();
   formData.file = [fileData, $file[0].files[0].name];
   upload(form.attr("action"), formData).done(function(){ alert("successfully uploaded!"); });
});

ফর্মডাটা এপিআই দিয়ে আপনাকে আপনার ফর্মের সমস্ত ক্ষেত্রকে ফর্মডেটা অবজেক্টে যুক্ত করতে হবে এবং এটি aj .জ্যাক্সের মাধ্যমে প্রেরণ করতে হবে ({url: url, ডেটা: ফর্মডাটা, প্রক্রিয়াডাটা: মিথ্যা, সামগ্রী টাইপ: মিথ্যা, টাইপ করুন: "পোস্ট"})