Sử dụng tải lên tệp HTML5 với AJAX và jQuery

Phải thừa nhận rằng có những câu hỏi tương tự trên Stack Overflow, nhưng có vẻ như không có câu hỏi nào đáp ứng được yêu cầu của tôi.

Đây là những gì tôi đang tìm cách làm:

• Tải lên toàn bộ dạng dữ liệu, một phần trong số đó là một tệp duy nhất
• Làm việc với thư viện tải lên tệp của Codeigniter

Cho đến khi ở đây, tất cả đều tốt. Dữ liệu được đưa vào cơ sở dữ liệu của tôi khi tôi cần. Nhưng tôi cũng muốn gửi biểu mẫu của mình qua một bài đăng AJAX:

• Sử dụng API tệp HTML5 gốc, không phải flash hoặc giải pháp iframe
• Tốt hơn là giao tiếp với .ajax()phương thức jQuery cấp thấp

Tôi nghĩ rằng tôi có thể tưởng tượng cách thực hiện điều này bằng cách tự động tải lên tệp khi giá trị của trường thay đổi bằng cách sử dụng javascript thuần túy, nhưng tôi muốn làm tất cả trong một lần để gửi trong jQuery. Tôi nghĩ rằng không thể thực hiện thông qua các chuỗi truy vấn vì tôi cần phải chuyển toàn bộ đối tượng tệp, nhưng tôi hơi mất hứng về việc phải làm vào thời điểm này.

Điều này có thể đạt được không?

Nó không quá khó. Đầu tiên, hãy xem Giao diện FileReader .

Vì vậy, khi biểu mẫu được gửi, hãy nắm bắt quy trình gửi và

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

Sau đó, ở phía máy chủ (tức là 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);

Hoặc một cái gì đó giống như nó. Tôi có thể nhầm lẫn (và nếu đúng, hãy sửa cho tôi), nhưng điều này sẽ lưu trữ tệp dưới dạng một tệp giống như 1287916771myPicture.jpgtrong /uploads/máy chủ của bạn và phản hồi bằng một biến JSON (đối vớicontinueSubmission() hàm) có chứa tên tệp trên máy chủ.

Kiểm tra fwrite()và jQuery.post().

Trên trang trên nó Các chi tiết về làm thế nào để sử dụng readAsBinaryString(), readAsDataUrl()và readAsArrayBuffer()cho các nhu cầu khác của bạn (ví dụ như hình ảnh, video, vv).

Với jQuery (và không có API FormData), bạn có thể sử dụng một cái gì đó như sau:

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

Với API FormData, bạn chỉ cần thêm tất cả các trường của biểu mẫu vào đối tượng FormData và gửi nó qua $ .ajax ({url: url, data: formData, processData: false, contentType: false, gõ: "POST"})