2013-04-17 4 views
0

AJAX를 사용하여 파일을 업로드하고 싶습니다.AJAX를 통해 파일 업로드

내가 사용 해봤 (자바 스크립트) : 그러나

<?php 

    $fn = (isset($_SERVER['HTTP_X_FILENAME']) ? $_SERVER['HTTP_X_FILENAME'] : false); 
    if ($fn) { 
     // AJAX call 
     file_put_contents(
      'uploads/' . $fn, 
      file_get_contents('php://input') 
     ); 
     echo "$fn uploaded"; 
     exit(); 
    } 

?> 

, 난 파일의 내용이 표시되지 않았는지, 문제에 봉착 : (PHP)으로

$("input[type='file']").change(function(){ 
     var file = document.getElementById("uploadelement").files[0]; 
     $.ajax({ 
      url: "upload.php", 
      type: "POST", 
      beforeSend: function(xhr){ 
       xhr.setRequestHeader("X_FILENAME", file.name); 
      }, 
      success: function(data){ 
       console.log(data); 
      } 
     }); 
    }); 

. 나도 잘 모르겠다. tutorial에서이 코드를 발견 했으므로 작동해야한다고 생각했습니다.

파일이 폴더에 업로드되었지만 내용이 없습니다.

+0

파일을 보내지 않고 있습니다. 클라이언트 측 코드를 살펴본 후 꽤 명확합니다. –

+0

'document.getElementById ("uploadelement") 대신'document.getElementById ("uploadelement"). files;를 사용해 보셨습니까? files [0];'? '[]'대괄호는 일반적으로 다중 업로드에 사용됩니다. 문제가 될 수도 있지만 100 % 확신 할 수는 없습니다. –

+0

@Fred'document.getElementById ("uploadelement"). files는 단지 배열을 반환합니다. – Shawn31313

답변

2

내가 jQuery를 $.ajax() 호출 모르겠지만,이과 같이, XMLHttpRequest를 사용함으로써 달성 될 수있다 : 당신의 PHP 업로드 처리기에서 다음

var file = document.getElementById("uploadelement").files[0]; 
var form_data = new FormData(); 
form_data.append("userfile", file); 

var xmlhttp = new XMLHttpRequest(); 
xmlhttp.open("POST", "upload.php"); 
xmlhttp.send(form_data); 

(여기에서 upload.php로 일) :

move_uploaded_file($_FILES["userfile"]["tmp_name"], "path/to/uploads/" . $_FILES["userfile"]["name"]); 

그리고 파일은 이미 원하는 디렉토리에 저장되어 있어야합니다.

관련 문제