[JQUERY] JQuery와 직렬화를 사용하여 파일 업로드를 수행하는 방법

JQuery와 직렬화를 사용하여 파일 업로드를 수행하는 방법

해결법

1. ---

   1.파일은 클라이언트 컴퓨터에 저장된 파일의 내용을 액세스하고 자바 스크립트를 사용하여 요청에 보낼 수 없기 때문에 AJAX를 사용하여 업로드 할 수 없습니다. 이를 달성하기 위해 기술 중 하나는 숨겨진 iframe을 사용하는 것입니다. 이 양식 AJAXify 당신을 수있는 좋은 JQuery와 양식 플러그인 그리고 그것은뿐만 아니라 파일 업로드를 지원합니다. 간단하게 다음과 같이 표시됩니다이 플러그인 코드를 사용하여 이렇게 :

   파일은 클라이언트 컴퓨터에 저장된 파일의 내용을 액세스하고 자바 스크립트를 사용하여 요청에 보낼 수 없기 때문에 AJAX를 사용하여 업로드 할 수 없습니다. 이를 달성하기 위해 기술 중 하나는 숨겨진 iframe을 사용하는 것입니다. 이 양식 AJAXify 당신을 수있는 좋은 JQuery와 양식 플러그인 그리고 그것은뿐만 아니라 파일 업로드를 지원합니다. 간단하게 다음과 같이 표시됩니다이 플러그인 코드를 사용하여 이렇게 :

   $(function() {
       $('#ifoftheform').ajaxForm(function(result) {
           alert('the form was successfully processed');
       });
   });
   

   플러그인은 자동으로 폼의 제출 이벤트에 가입 기본 제출을 취소, 값을 직렬화, 적절한 방법과 핸들 파일 업로드 필드를 사용하여 처리한다, ...

2. ---

   2.사용 FormData object.It 양식의 모든 유형의 작동

   사용 FormData object.It 양식의 모든 유형의 작동

   $(document).on("submit", "form", function(event)
   {
       event.preventDefault();
       $.ajax({
           url: $(this).attr("action"),
           type: $(this).attr("method"),
           dataType: "JSON",
           data: new FormData(this),
           processData: false,
           contentType: false,
           success: function (data, status)
           {
   
           },
           error: function (xhr, desc, err)
           {
               
   
           }
       });        
   
   });
   

3. ---

   3.

      var form = $('#job-request-form')[0];
           var formData = new FormData(form);
           event.preventDefault();
           $.ajax({
               url: "/send_resume/", // the endpoint
               type: "POST", // http method
               processData: false,
               contentType: false,
               data: formData,
   

   그것은 나를 위해 일한! 단지 processData 및 contentType이 거짓을 설정합니다.

4. ---

   4.HTML

   HTML

   <form name="my_form" id="my_form" accept-charset="multipart/form-data" onsubmit="return false">
       <input id="name" name="name" placeholder="Enter Name" type="text" value="">
       <textarea id="detail" name="detail" placeholder="Enter Detail"></textarea>
       <select name="gender" id="gender">
           <option value="male" selected="selected">Male</option>
           <option value="female">Female</option>
       </select>
       <input type="file" id="my_images" name="my_images" multiple="" accept="image/x-png,image/gif,image/jpeg"/>
   </form>
   

   자바 스크립트

   var data = new FormData();
   
   //Form data
   var form_data = $('#my_form').serializeArray();
   $.each(form_data, function (key, input) {
       data.append(input.name, input.value);
   });
   
   //File data
   var file_data = $('input[name="my_images"]')[0].files;
   for (var i = 0; i < file_data.length; i++) {
       data.append("my_images[]", file_data[i]);
   }
   
   //Custom data
   data.append('key', 'value');
   
   $.ajax({
       url: "URL",
       method: "post",
       processData: false,
       contentType: false,
       data: data,
       success: function (data) {
           //success
       },
       error: function (e) {
           //error
       }
   });
   

   PHP

   <?php
       echo '<pre>';
       print_r($_POST);
       print_r($_FILES);
       echo '</pre>';
       die();
   ?>
   

5. ---

   5.당신은 FormData 방법을 사용하여 AJAX를 통해 파일을 업로드 할 수 있습니다. IE7,8 9 만 FormData 기능을 지원하지 않습니다.

   당신은 FormData 방법을 사용하여 AJAX를 통해 파일을 업로드 할 수 있습니다. IE7,8 9 만 FormData 기능을 지원하지 않습니다.

   $.ajax({
       url: "ajax.php", 
       type: "POST",             
       data: new FormData('form'),
       contentType: false,       
       cache: false,             
       processData:false, 
       success: function(data) {
           $("#response").html(data);
       }
   });
   

6. ---

   6.

   $(document).on('click', '#submitBtn', function(e){
   e.preventDefault();
   e.stopImmediatePropagation();
   var form = $("#myForm").closest("form");
   var formData = new FormData(form[0]);
   $.ajax({
       type: "POST",
       data: formData,
       dataType: "json",
       url: form.attr('action'),
       processData: false,
       contentType: false,
       success: function(data) {
            alert('Sucess! Form data posted with file type of input also!');
       }
   )};});
   

   새로운 FormData ()의 사용을 만들고 processData 설정함으로써 : 거짓을 contentType이는 : 파일 입력과 형태의 아약스 호출 제출에 거짓은 나를 위해 일

   위의 코드를 사용하여 나는 아약스를 통해서도 파일 필드로 양식 데이터를 제출할 수입니다

7. ---

   7.흠 난 사람들이 모든 브라우저를 대상으로 원하는뿐만 아니라 FormData 브라우저 지원을 위해 특별히 그것을 만들 수있는 매우 효율적인 방법이 있다고 생각

   흠 난 사람들이 모든 브라우저를 대상으로 원하는뿐만 아니라 FormData 브라우저 지원을 위해 특별히 그것을 만들 수있는 매우 효율적인 방법이 있다고 생각

   아이디어는 IFrame을 예 내부에서 위해 제출 페이지에 IFRAME 숨겨진 정상 만드는 것으로

   <FORM action='save_upload.php' method=post
      enctype='multipart/form-data' target=hidden_upload>
      <DIV><input
         type=file name='upload_scn' class=file_upload></DIV>
      <INPUT
         type=submit name=submit value=Upload /> <IFRAME id=hidden_upload
         name=hidden_upload src='' onLoad='uploadDone("hidden_upload")'
         style='width:0;height:0;border:0px solid #fff'></IFRAME> 
   </FORM>
   

   형태 숨겨진 iframe이 ID 또는 이름의 목표를 만들기 위해 가장 중요한 과에 enctype의 다중 / 폼 데이터는 사진을 받아 수 있도록

   자바 스크립트 측

   function getFrameByName(name) {
       for (var i = 0; i < frames.length; i++)
           if (frames[i].name == name)
               return frames[i];
   
       return null;
   }
   
   function uploadDone(name) {
       var frame = getFrameByName(name);
       if (frame) {
           ret = frame.document.getElementsByTagName("body")[0].innerHTML;
   
           if (ret.length) {
               var json = JSON.parse(ret);
            // do what ever you want 
           }
       }
   }
   

   서버 사이드 예 PHP

   <?php
     $target_filepath = "/tmp/" . basename($_FILES['upload_scn']['name']);
   
     if (move_uploaded_file($_FILES['upload_scn']['tmp_name'], $target_filepath)) {
       $result = ....
     }
   
   echo json_encode($result);
   ?>
   

8. ---

   8.아약스와 파일 업로드에 사용할 수있는 HTML5 소개합니다 FormData 클래스입니다.

   아약스와 파일 업로드에 사용할 수있는 HTML5 소개합니다 FormData 클래스입니다.

   FormData 지원은 데스크톱 브라우저 버전을 다음에서 시작합니다. IE 10 +, 파이어 폭스 4.0 이상, 크롬 7 +, 사파리 5+, 오페라 12 +

   formdat에 - Mozilla.org

from https://stackoverflow.com/questions/4545081/how-to-do-file-upload-using-jquery-serialization by cc-by-sa and MIT license