아약스를 통한 자바 스크립트 양식 데이터

Question

AJAX 및 PHP를 통해 파일을 업로드하려고합니다. I는 아래의 HTML 양식이 있습니다

$(document).ready(function(){ 
    $("#saveSection1").click(function(e){ 
     e.preventDefault(); 

     var formdata = false; 

     /*function showUploadedItem (source) { 
      var list = document.getElementById("image-list"), 
       li = document.createElement("li"), 
       img = document.createElement("img"); 
      img.src = source; 
      li.appendChild(img); 
      list.appendChild(li); 
     } */ 

     if (window.FormData) { 
      formdata = new FormData(); 

      //document.getElementById("btn").style.display = "none"; 
     } 

     var len = document.getElementById("file1").files.length, img, reader, file; 

     for (var i = 0 ; i < len; i++) { 
      file = document.getElementById("file1").files[i]; 
      if (!!file.type.match(/image.*/)) { 
       if (window.FileReader) { 
        reader = new FileReader(); 
        /*reader.onloadend = function (e) { 
         showUploadedItem(e.target.result, file.fileName); 
        };*/ 
        reader.readAsDataURL(file); 
       } 
       if (formdata) { 
        alert("form data"); 
        formdata.append("customHeading1", document.getElementById("customHeading1").value); 
        formdata.append("elm1", document.getElementById("elm1").value); 
        formdata.append("custsection1", 1); 
        formdata.append("venue_id", document.getElementById("venue_id").value); 
        formdata.append("images[]", file); 
        alert(formdata); 
       } 
      } 
     } 
     var params = $("form#sectiononeform").serialize(); 
     //alert("params" + params); 
     params = params + "&custsection1=1&venue_id=" + $("#venue_id").val() + "&formdata=" + formdata; 
     //alert(params); 
     $.ajax({ 
      type: 'POST', 
      url: 'saveCustomSectionData.php', 
      data: formdata, 
      success: function(data){ 
      alert(data); 
      } 
     }); 
    }); 
}); 

내 문제는 내가 파일 입력 방식을 사용하지 않는 경우, 그냥 양식을 직렬화 할 수 있다는 것입니다 다음과 같이

<form method="post" id="sectiononeform" name="sectiononeform" enctype="multipart/form-data"> 

    <div class="clearfix"> 
     <input type="text" name="customHeading1" id="customHeading1" class="span10" value=""/> 
    </div> 

    <!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded --> 
    <div class="clearfix"> 
     <textarea id="elm1" name="elm1" rows="15" class="xxlarge" cols="80" style="width: 80%"> 

     </textarea> 
    </div> 

    <div class="clearfix"> 
     <input type="file" name="file1" id="file1" class="span10" /> 
    </div> 

    <div class="clearfix">   
     <div class="actions"> 
      <input type="submit" id="saveSection1" name="saveSection1" value="Submit" /> 
      <input type="reset" name="resetSection1" value="Reset" />     
     </div> 
    </div> 

</form> 

내 jQuery 코드입니다 값을 입력하고 AJAX를 통해 전송합니다. 파일 입력 유형을 사용하고 있기 때문에 formdata를 사용하고 정보를 추가하고 있습니다. 이것이 데이터를 보내는 올바른 방법인가? php에서 어떤 응답도 되돌려지지 않고 있습니다. 어느 것도 firebug에서 요청을 볼 수 없습니다. 대신 "WrappedNative 프로토 타입 객체에서 잘못된 연산"이라는 모호한 오류가 발생합니다. 어떤 제안?

Answer 1

지금까지 나는 보안상의 이유로 이것이 가능하지 않다는 것을 알고 있습니다.

하지만 jquery.form.js (http://jquery.malsup.com/form/에서 사용 가능)와 같은 것을 사용할 수 있으며 구현하기가 쉽습니다.

그들은 또한 당신이 aswel 시도해 좋은 예제를 제공합니다.

Answer 2

AJAX를 사용하여 파일을 보낼 수 있습니다. 새로운 FormData() 및 $ .ajax 메서드를 contentType : false와 함께 사용하면 processData : false가됩니다.

확인이 아웃 :

<script type="text/javascript"> 
$(document).ready(function() 
{ 
    $("#ajax").hide(); 

    $("#botonancho").click(function() 
    { 
     if ($("#ficherocsv").val() =="") 
     { 
      alert(" Seleccione 1º el archivo "); 
     } 
     else 
     { 
      var data = new FormData(); 
      data.append('file', $('#ficherocsv')[0].files[0]); 

      $("#botonancho").val("Por favor... espere."); 
      $("#ajax").html("<img src='imagenes/ajax-indicator.gif' alt='Indicador Actividade Ajax' />").show(); 

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

        $("#ajax").html(data).fadeIn("slow",function() 
        { 
         $("#ajax").delay(1500).fadeOut("slow",function() 
         { 
          $("#botonancho").val("IMPORTAR Alumnos CSV (codificación UTF-8)"); 
          $("#ficherocsv").val(""); 
          $("#ajax").hide(); 

         }); 
        }); 
       } 
      }); 
     } 
    }); 

}); 
</script> 

감사합니다.