FormData를 사용하여 jQuery Ajax 파일 업로드 및 기타 데이터 예제에 대한 자세한 설명

이 글은 주로 jQuery Ajax가 FormData를 사용하여 백엔드 web.py에서 파일을 업로드하고 다른 데이터를 얻는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

XMLHttpRequest 레벨 2에는 FormData라는 새로운 인터페이스가 추가되었습니다. 일반 Ajax와 비교했을 때 FormData를 사용하는 가장 큰 장점은 바이너리 파일을 비동기적으로 업로드할 수 있다는 것입니다.

jQuery 버전 2.0 이상은 FormData를 지원합니다

방법 1:

양식을 사용하여 FormData 객체를 초기화하여 파일을 업로드합니다.

•프런트엔드(JQuery):

<form enctype="multipart/form-data">
  <input type="file" name="myfile" onchange="loadFile(this.files[0])">
</form>
<script>
  function loadFile(file){
    var formdata = new FormData($$('form')[0]);
    $.ajax({
      url: 'jobs/add',
      type: 'POST',
      datatype: 'json',
      data: formdata,
      cache:false,
      traditional: true,
      contentType: false,
      processData: false,
      success: function (data) {},
      error: function () {}
    });
  }
</script>

•백엔드(web.py):

class Add:
  def POST(self):
    i = web.input(myfile={})
    print(i['myfile'].filename) #文件名
    print(i['myfile'].value) #文件内容
    print(i['myfile'].file.read()) #文件内容

참고:

1 의 enctype 속성은 "multipart/form-data"로 설정되어야 합니다.

2 $.ajax의 processData, contentType 및 캐시는 false로 설정되어야 합니다. 3. 백엔드는 web.input을 통해 파일을 가져옵니다. 필드 이름은 프런트 엔드에 지정된 입력 태그의 name 속성과 동일합니다

방법 2√: 대신 FormData 객체를 사용하여 필드를 추가합니다. 파일을 업로드하려면

때때로

태그를 사용하고 싶지 않고 ajax를 통해 전달하는 경우가 있습니다. 백엔드는 단순한 파일이 아니며, 다른 키-값 쌍이 있을 수 있습니다. 이 경우 이 방법을 사용할 수 있습니다.

•프런트엔드(JQuery):

<input type="file" onchange="loadFile(this.files[0])" />
function loadFile(file){
  container.fd = new FormData();
  container.fd.append('myfile',file);
  container.fd.append('otherkey',othervalue);
  $.ajax({
    url: 'jobs/add',
    type: 'POST',
    datatype: 'json',
    data: fd,
    cache:false,
    traditional: true,
    contentType: false,
    processData: false,
    success: function (data) {},
    error: function () {}
  });
}

•백엔드(web.py):

class Add:
  def POST(self):
    i = web.input(myfile={}, otherkey='')
    print(i['myfile'].filename) #文件名
    print(i['myfile'].value) #文件内容
    print(i['myfile'].file.read()) #文件内容

참고:

1. 태그가 없습니다(있으면 좋음)

2 Append() 메소드의 두 번째 매개변수는 HTML

3의 loadFile 메소드 매개변수를 통해 전달된 파일 객체입니다. 백엔드는 web.input을 전달하여 동일한 파일의 필드 이름을 가져옵니다. 프론트엔드append() 메소드의 첫 번째 매개변수로

4.web.input을 통해 얻은 값은 모두 문자열이기 때문에 파일이 아닌 키-값 쌍이 전달되면 null이 전달됩니다. 문자열 'null'로 자동 변환됩니다. 이 점을 다룰 때 주의가 필요합니다

관련 권장 사항:

HTML의 FormData 객체에 대한 자세한 소개

FormData를 사용하여 양식을 제출하고 이미지를 업로드하는 방법

객체에서 FormData 사용 자바스크립트

위 내용은 FormData를 사용하여 jQuery Ajax 파일 업로드 및 기타 데이터 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!