파일 업로드와 헤더 설정을 동시에 수행하는 Ajax의 jQuery Form 구현에 대한 자세한 설명

이 글은 Ajax 업로드 파일 구현과 헤더 설정을 동시에 수행하는 jQuery.Form의 방법을 주로 소개합니다. 매우 훌륭하고 참고할만한 가치가 있으니 모두에게 도움이 되었으면 좋겠습니다.

Jquery 형식을 사용하여 파일 업로드를 구현하는 방법은 다음 예제 코드를 참조하세요.

 <span style="font-family: Arial, Helvetica, sans-serif;">function ajaxSubmitForm() {</span>

var option = { 
  　　 url : cache.batchImport, 
 　　 type : 'POST', 
  　　 dataType : 'json', 
  　　 headers : {"token" : localStorage.getItem('token')}, //添加请求头部 
 　　 success : function(data) { 
   　　  console.log('success') 
   
  }, 
  error: function(data) { 
    console.log('error'); 
  } 
 }; 
$("#userForm").ajaxSubmit(option); 
return false; //最好返回false，因为如果按钮类型是submit,则表单自己又会提交一次;返回false阻止表单再次提交

파일을 업로드하는 동안 헤더 정보를 설정해야 하는 문제가 발생했습니다. 하지만 폼 제출은 파일 업로드는 가능하지만 헤더 설정은 불가능합니다.. 나중에 인터넷에서 jQuery.form을 찾아 구현해 봤습니다.

파일 버튼은 스타일을 지정할 수 없기 때문에 버튼을 사용하여 파일을 간접적으로 실행해야 하지만 IE에서는 버튼을 직접 실행해야만 기능을 구현할 수 있으므로 파일의 위치와 크기가 버튼과 동일하게 설정되어야 하지만 컨트롤을 직접 트리거하고 호환 가능하도록 버튼을 덮기 위해 투명도를 0으로 설정합니다. 호환성 이후 다른 브라우저에서는 스타일에 문제가 있습니다.

기타 브라우저 스타일 코드와의 컴파일 가능성은 다음과 같습니다. 및 AJAX 업로드 파일

위 내용은 파일 업로드와 헤더 설정을 동시에 수행하는 Ajax의 jQuery Form 구현에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!