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

이 글에서는 주로 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($('#uploadForm')[0]);

 $.ajax({
        url: 'http://10.10.2.254:8080/file/associateupload',
        type: 'POST',
        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('file', $('#file')[0].files[0]);
$.ajax({
  url: '/upload',
  type: 'POST',
  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 중국어 웹사이트의 기타 관련 기사를 참조하세요!