파일을 아약스를 통해 PHP로 업로드하기

Question

내 양식은 내가 일하는 회사에서 선호하는 방법이기 때문에 자바 스크립트 경고를 사용하여 사용자와 통신합니다 (php 핸들러 파일과의 지속적인 리디렉션과 반대).

이 때문에 jquery의 간단한 유효성 검사를 통해 모든 양식 데이터를 전달하고 ajax를 통해 PHP 처리기로 보냅니다. 다음은 업로드에, 나는 데 문제를 다음과 같이 하나의 폼에 파일 입력 필드를 추가 한 데

var first_name = $(sender + ' #first_name'); 
var email = $(sender + ' #email'); 
var tel = $(sender + ' #telephone'); 
var comments = $(sender + ' #comments'); 

$.ajax({ 
    type: 'POST', 
    url: 'sendmail.php', 
    data: { first_name: first_name.val(), 
     email: email.val(), 
     telephone: tel.val(), 
     comments: comments.val(), 
     success: function clearFields() { 
      first_name.val(''); 
      email.val(''); 
      tel.val(''); 
      comments.val(''); 
      alert('Thank you. We will contact you as soon as possible.'); 
     } 
    } 
}); 

내가하고 있어요 방법에 대해 기본적인 모습은 ...입니다. 이메일이 제대로 전송 동안, 나는 아약스 내가 이것에 대한 옵션을 발견했습니다

<input type="file" name="upload" id="upload" /> 

<script> 

var upload = $("#upload"); 
$.ajax({ 
    type: 'POST', 
    url: 'sendmail.php', 
    data: { first_name: first_name.val(), 
     email: email.val(), 
     telephone: tel.val(), 
     upload: upload.val(), 
     comments: comments.val(), 
     success: function clearFields() { 
      first_name.val(''); 
      email.val(''); 
      tel.val(''); 
      upload.val(''); 
      comments.val(''); 
      alert('Thank you. We will contact you as soon as possible.'); 
     } 
    } 
}); 
</script> 

PHP는 파일의 업로드에 대한 모든 사용 가능한 데이터를 전송 생각하지 않지만, 모든 사람은 내가 ' 나는 을 보았다. 나에게 "hackish"처럼 보였다.

더 간단한 방법이 있나요?

Answer 1

당신은 IFrame을 통해이 작업을 수행해야

그래서 당신은

<iframe id="upload_target" name="upload_target" style="display: none;" src="#"></iframe> 
<!-- note the src="#" --> 

그런 다음 당신은 몇 가지 버튼으로 폼을 만들 숨겨진 IFRAME과

<form action="path/to/uploadscript.php" method="POST" enctype="multipart/form-data" target="upload_target"> 
<!--target will tell the browser to run it in the iFrame with name="upload_target" --> 

를 원하는 모든 필드를 만들

uploadscript.php에서 모든 양식 값을 일반 $ _POST 값처럼 사용할 수 있습니다 :

<?php upload_file($_FILES['file'], $_POST['name'], $_POST['whatever']); ?> 

거의 AJAX를 사용하는 것과 같은 느낌입니다.

Answer 2

아약스는 file 업로드 작업을 지원하지 않습니다. 그러나 파일을 비동기 적으로 업로드하기 위해 iframe을 사용하는 많은 플러그인이 있습니다. 이 기술에 대한 자세한 내용은 here을 참조하십시오. 폼 업로드를 지원

약간의 jQuery 플러그인
1 jQuery form
2 jQuery-File-Upload

있는이에 대한 질문의 답변이 많이 this one처럼, 많은 Q & 사이트에 있습니다.

html5를 사용하는 또 다른 솔루션은 FormData를 사용하는 here입니다.