>  기사  >  웹 프론트엔드  >  FormData 개체가 파일을 업로드합니다.

FormData 개체가 파일을 업로드합니다.

PHPz
PHPz원래의
2017-04-04 13:56:071558검색

<a href="http://www.php.cn/wiki/125.html" target="_blank">For</a>mData객체는 일련의 키-값 쌍을 사용하여 시뮬레이션할 수 있습니다. 양식을 작성한 다음 <a href="http://www.php.cn/wiki/1527.html" target="_blank">XML<code><a href="http://www.php.cn/wiki/1527.html" target="_blank">XML</a>HttpRequestHttpRequest를 사용하여 이" 양식을 보내세요. ".

Mozilla 개발자 웹사이트에 FormData 객체 사용에 대한 자세한 지침이 있습니다. FormData

그런데

업로드 파일 부분은 맨 아래 부분만 있습니다. 레이어 객체가 업로드 요청을 보내므로 <a href="http://www.php.cn/wiki/1495.html" target="_blank">jQuery<code>XMLHttpRequest를 전달하는 방법 code> <a href="http://www.php.cn/wiki/1495.html" target="_blank">jQuery</a>업로드는 어떻게 되나요? Ajax
jQuery객체 FormData

양식 초기화<form>객체 메서드를 사용하여 파일을 업로드하는 방법을 소개합니다. 🎜>FormDataHTML.코드

<form id="uploadForm" enctype="multipart/form-data">
    <input id="file" type="file" name="file"/>
    <button id="upload" type="button">upload</button>
</form>

javascript

코드

$.ajax({
    url: '/upload',
    type: 'POST',
    cache: false,
    data: new FormData($('#uploadForm')[0]),
    processData: false,
    contentType: false
}).done(function(res) {
}).fail(function(res) {});
여기서 몇 가지 참고 사항:

  • 으로 설정됩니다. processData 값은 false 객체이므로 dataFormData

    태그에
  • 속성을 ​​추가할 필요가 없습니다.

    .<form>enctype="multipart/form-data"

    으로 설정되어 있으며, 파일 업로드에는
  • 캐시
  • 가 필요하지 않습니다.

    cachefalse로 설정되었습니다. 객체는

    폼에서 생성되고
  • 속성이 선언되었기 때문에
  • contentTypefalse이 업로드된 후에는 false로 설정됩니다. 🎜> 매개변수 이름은 파일 입력 스트림 객체를 얻기 위한 <form>입니다. FormData 객체가 enctype="multipart/form-data" 형식을 사용하여 구성되지 않은 경우

이 선언되기 때문입니다.

필드를 추가하려면 개체를 사용하세요. file<input>HTML 코드 name="file"

<p id="uploadForm">
    <input id="file" type="file"/>
    <button id="upload" type="button">upload</button>
</p>

태그도 없고 <form>FormDatajavascript도 없습니다. code

var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
    url: '/upload',
    type: 'POST',
    cache: false,
    data: formData,
    processData: false,
    contentType: false
}).done(function(res) {
}).fail(function(res) {});

여기에는 몇 가지 차이점이 있습니다. FormData

의 두 번째 매개변수는 파일 객체, 즉 <form>enctype="multipart/form-data"

도 'false'로 설정해야 합니다.

    코드에서 볼 수 있듯이
  • 태그는 여러 파일을 업로드할 수 있습니다.

    append()$('#file')[0].files[0] 또는

    속성만 추가하면 됩니다.
  • 서버측에서 파일 읽기

    contentType<a href="http://www.php.cn/wiki/1516.html" target="_blank">서블릿에서 </a>

    3.0부터 업로드된 파일은
  • 두 가지 인터페이스
,

또는 $('#file')[0].files[0]를 통해 얻을 수 있습니다. <input type="file">자세한 내용은 공식 웹사이트 튜토리얼인 Java 서블릿 기술을 사용하여 파일 업로드 예제와 파일 업로드 예제 애플리케이션을 참조하세요.

위 내용은 FormData 개체가 파일을 업로드합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.