AJAX 및 jQuery와 함께 HTML5 파일 업로드 사용

Question 1

물론 Stack Overflow에는 비슷한 질문이 있지만 내 요구 사항을 충족시키는 것은 없습니다.

내가하고자하는 것은 다음과 같습니다.

전체 데이터 형식을 업로드합니다. 그 중 일부는 단일 파일입니다.
Codeigniter의 파일 업로드 라이브러리로 작업

여기까지 모든 것이 좋습니다. 데이터는 필요에 따라 데이터베이스에 저장됩니다. 하지만 AJAX 게시물을 통해 양식을 제출하고 싶습니다.

플래시 또는 iframe 솔루션이 아닌 기본 HTML5 파일 API 사용
가급적 저수준 .ajax()jQuery 메서드 와 인터페이스

순수한 자바 스크립트를 사용하여 필드의 값이 변경 될 때 파일을 자동 업로드하여이 작업을 수행하는 방법을 상상할 수 있다고 생각하지만 jQuery에서 제출하기 위해 한꺼번에 모든 작업을 수행하고 싶습니다. 전체 파일 개체를 전달해야하므로 쿼리 문자열을 통해 수행 할 수 없다고 생각하지만이 시점에서 수행 할 작업에 대해 약간의 손실이 있습니다.

이것이 달성 될 수 있습니까?

Question 2

너무 어렵지 않습니다. 먼저 FileReader Interface를 살펴보십시오 .

따라서 양식이 제출되면 제출 프로세스를 파악하고

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/ 서버에 in 서버 continueSubmission()의 fileName을 포함 하는 JSON 변수 ( 함수에 대한) 로 응답 해야합니다.

확인 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, type : "POST"})를 통해 전송하면됩니다.