JavaScript가 Ajax를 사용하여 파일을 업로드하는 방법 소개

黄舟
풀어 주다: 2017-08-10 13:50:07
원래의
1333명이 탐색했습니다.

이 글에서는 주로 Ajax를 사용하여 파일을 업로드하기 위한 JavaScript용 샘플 코드를 소개합니다. 관심 있는 친구들은 이에 대해 배울 수 있습니다.

이 글에서는 Ajax를 사용하여 파일을 업로드하기 위한 JavaScript용 샘플 코드를 소개합니다.

파일을 업로드하는 방법에는 크게 두 가지가 있습니다.

양식을 사용하여 업로드를 제출하세요.

html 코드는 다음과 같습니다.


<form id="uploadForm" enctype="multipart/form-data">
  <input id="file" type="file" name="file"/>
  <button id="upload" type="button">上传</button>
</form>
로그인 후 복사

현재 JavaScript 코드는 다음과 같습니다.


 var formData = new FormDate($(&#39;#uploadForm&#39;)[0]);

 $.ajax({
        url: &#39;http://10.10.2.254:8080/file/associateupload&#39;,
        type: &#39;POST&#39;,
        cache: false,
        data: formData,
        processData: false,
        contentType: false,
        success:function(res){
            console.log(res);
        }
    });
로그인 후 복사

참고:

  1. processData가 false로 설정되어 있습니다. 데이터 값은 FormData 개체이므로 데이터를 처리할 필요가 없습니다.

  2. 태그는 enctype="multipart/form-data" 속성을 추가합니다.

  3. 캐시는 false로 설정되어 있으며 파일 업로드에는 캐싱이 필요하지 않습니다.

  4. contentType이 false로 설정되었습니다. 이는 양식에서 생성된 FormData 객체이고 enctype="multipart/form-data" 속성이 선언되었으므로 여기서는 false로 설정됩니다.

FormData 객체를 사용하여 파일을 업로드할 필드를 추가하세요

html 코드는 다음과 같습니다.


<p id="uploadp">
  <input id="file" type="file"/>
  <button id="upload" type="button">上传</button>
</p>
로그인 후 복사

JavaScript 구현은 다음과 같습니다.


var formData = new FormData();
formData.append(&#39;file&#39;, $(&#39;#file&#39;)[0].files[0]);
$.ajax({
  url: &#39;/upload&#39;,
  type: &#39;POST&#39;,
  cache: false,
  data: formData,
  processData: false,
  contentType: false,
  success:function(res){
     console.log(res);
  }
로그인 후 복사

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

  • append( ) 두 번째 매개변수는 파일 객체여야 합니다(예: $('#file')[0].files[0]. contentType도 false로 설정해야 합니다.

  • 코드 $('#file')[0].files[0]에서 태그가 여러 파일을 업로드할 수 있다는 것을 알 수 있습니다. ="file">에 여러 개의 "multiple" 속성을 추가합니다.

위 내용은 JavaScript가 Ajax를 사용하여 파일을 업로드하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿