ใช้การอัปโหลดไฟล์ HTML5 ด้วย AJAX และ jQuery

Question 1

เป็นที่ยอมรับว่ามีคำถามคล้าย ๆ กันอยู่ใน Stack Overflow แต่ดูเหมือนว่าจะไม่มีอะไรตรงตามความต้องการของฉัน

นี่คือสิ่งที่ฉันต้องการทำ:

อัปโหลดรูปแบบข้อมูลทั้งหมดซึ่งเป็นไฟล์เดียว
ทำงานกับไลบรารีการอัปโหลดไฟล์ของ Codeigniter

จนถึงที่นี่ทุกอย่างเรียบร้อยดี ข้อมูลเข้าสู่ฐานข้อมูลของฉันตามที่ฉันต้องการ แต่ฉันต้องการส่งแบบฟอร์มของฉันผ่านทางโพสต์ AJAX:

ใช้ HTML5 File API ดั้งเดิมไม่ใช่แฟลชหรือโซลูชัน iframe
ควรเชื่อมต่อกับ.ajax()เมธอด jQuery ระดับต่ำ

ฉันคิดว่าฉันสามารถจินตนาการได้ว่าจะทำอย่างไรโดยการอัปโหลดไฟล์อัตโนมัติเมื่อค่าของฟิลด์เปลี่ยนไปโดยใช้จาวาสคริปต์บริสุทธิ์ แต่ฉันควรทำทั้งหมดในครั้งเดียวเพื่อส่งใน jQuery ฉันคิดว่ามันเป็นไปไม่ได้ที่จะทำผ่านสตริงการสืบค้นเนื่องจากฉันต้องการส่งผ่านวัตถุไฟล์ทั้งหมด แต่ฉันหลงทางเล็กน้อยในสิ่งที่ต้องทำในตอนนี้

สามารถทำได้หรือไม่?

Question 2

มันไม่ยากเกินไป ประการแรกจะดูที่FileReader อินเตอร์เฟซ

ดังนั้นเมื่อส่งแบบฟอร์มให้ทำตามขั้นตอนการส่งและ

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 (และไม่มี FormData API) คุณสามารถใช้สิ่งนี้:

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!"); });
});

ด้วย FormData API คุณเพียงแค่เพิ่มฟิลด์ทั้งหมดของแบบฟอร์มลงในออบเจ็กต์ FormData แล้วส่งผ่าน $ .ajax ({url: url, data: formData, processData: false, contentType: false, พิมพ์: "POST"})