[JQUERY] jQuery를 업로드 진행 및 AJAX 파일 업로드

jQuery를 업로드 진행 및 AJAX 파일 업로드

해결법

1. ---

   1.파일을 업로드 요즘 AJAX와 실제로 가능하다. 예, AJAX가 아닌 일부 엉터리 AJAX는 SWF 파일이나 자바 같은 놈만.

   파일을 업로드 요즘 AJAX와 실제로 가능하다. 예, AJAX가 아닌 일부 엉터리 AJAX는 SWF 파일이나 자바 같은 놈만.

   이 예제는 당신을 도울 수 있습니다 https://webblocks.nl/tests/ajax/file-drag-drop.html

   (또한 드래그 / 드롭 인터페이스를 포함하고 있지만 쉽게 무시됩니다.)

   기본적으로 그것이 무엇에 내려 오는 것은 이것입니다 :

   <input id="files" type="file" />
   
   <script>
   document.getElementById('files').addEventListener('change', function(e) {
       var file = this.files[0];
       var xhr = new XMLHttpRequest();
       (xhr.upload || xhr).addEventListener('progress', function(e) {
           var done = e.position || e.loaded
           var total = e.totalSize || e.total;
           console.log('xhr progress: ' + Math.round(done/total*100) + '%');
       });
       xhr.addEventListener('load', function(e) {
           console.log('xhr upload complete', e, this.responseText);
       });
       xhr.open('post', '/URL-HERE', true);
       xhr.send(file);
   });
   </script>
   

   (데모 : http://jsfiddle.net/rudiedirkx/jzxmro8r/)

   그래서 기본적으로 무엇가 내려 온다)이 =입니다

   xhr.send(file);
   

   파일의 Blob 대해서 typeof 인 경우 : http://www.w3.org/TR/FileAPI/

   또 다른 (더 나은 IMO) 방법은 FormData를 사용하는 것입니다. 이 형태처럼, 너무 다른 물건 (파일 전송) 형태로 2처럼 1 당신이)), 파일의 이름을 수 있습니다.

   var fd = new FormData;
   fd.append('photo1', file);
   fd.append('photo2', file2);
   fd.append('other_data', 'foo bar');
   xhr.send(fd);
   

   FormData는 서버 코드 청소기와 호환 더 뒤로 (요청이 이제 정상적인 형태와 동일한 형식을 가지고 있기 때문에)을합니다.

   그것은 모든 실험,하지만 매우 현대 없습니다. 크롬 8 이상과 파이어 폭스는 어떻게 해야할지 4+,하지만 난 어떤 다른 사람에 대해 알고하지 않습니다.

   내가 PHP에 요청 (요청 당 1 이미지)를 처리하는 방법이다 :

   if ( isset($_FILES['file']) ) {
       $filename = basename($_FILES['file']['name']);
       $error = true;
   
       // Only upload if on my home win dev machine
       if ( isset($_SERVER['WINDIR']) ) {
           $path = 'uploads/'.$filename;
           $error = !move_uploaded_file($_FILES['file']['tmp_name'], $path);
       }
   
       $rsp = array(
           'error' => $error, // Used in JS
           'filename' => $filename,
           'filepath' => '/tests/uploads/' . $filename, // Web accessible
       );
       echo json_encode($rsp);
       exit;
   }
   

2. ---

   2.여기에 파일을 업로드 AJAX를 사용하기위한 몇 가지 옵션이 있습니다 :

   여기에 파일을 업로드 AJAX를 사용하기위한 몇 가지 옵션이 있습니다 :

   업데이트 : 여기 JQuery와 플러그인 다중 파일 업로드에 대한 것입니다.

from https://stackoverflow.com/questions/4856917/jquery-upload-progress-and-ajax-file-upload by cc-by-sa and MIT license