[JQUERY] AJAX와 jQuery로 HTML5 파일 업로드를 사용하여

AJAX와 jQuery로 HTML5 파일 업로드를 사용하여

해결법

1. ---

   1.너무 어렵지 않다. 첫째, FileReader를 인터페이스를보십시오.

   너무 어렵지 않다. 첫째, 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);
   

   아니면 뭔가. 내가 착각 (그리고 나는 경우에, 저를 수정하시기 바랍니다) 그러나 이것은 (A continueSubmission () 함수)를 JSON 변수를 사용하여 서버의 / 업로드 /에서 1287916771myPicture.jpg 같은 및 응답으로 파일을 저장해야 할 수 있습니다 서버에서 파일 이름을 포함.

   에 fwrite ()와 jQuery.post을 확인 ().

   위의 페이지에서 당신의 다른 요구에 readAsBinaryString (), readAsDataUrl () 및 readAsArrayBuffer () (예를 들어, 이미지, 비디오 등)를 사용하는 방법에 대해 자세히 설명합니다.

2. ---

   2.jQuery를 (그리고 FormData의 API없이)하면이 같은 것을 사용할 수 있습니다 :

   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, processData : 거짓, ContentType을 : 잘못된 입력 : "POST"URL을}) FormData API를 당신은 FormData 객체에 양식의 모든 필드를 추가하고 $ 아약스로 보내해야

from https://stackoverflow.com/questions/4006520/using-html5-file-uploads-with-ajax-and-jquery by cc-by-sa and MIT license