jquery Form은 파일 업로드 인스턴스 공유를 쉽게 구현합니다.

이 글은 파일 업로드를 쉽게 구현하기 위한 jquery Form 관련 프로세스를 주로 소개합니다. 관심 있는 친구들이 참고하여 다동에게 도움이 되길 바랍니다.

저는 오래 전부터 이 플러그인을 사용해 왔습니다. 특정 호출 방법을 잊어버릴 때마다 특별히 데모를 작성하여 녹음합니다.
먼저 이 데모 포털로 이동하세요. 어! 그러다 시작됐는데...

①먼저 html

<a href="javascript:void(0)" class="j_upLoadFile">上传图片</a> 
<form action="接口名字" method="post" enctype="multipart/form-data" id="submitForm"> 
  <!-- 随文件一起上传的字段 --> 
  <input type="hidden" name="type" value="temp"> 
  <input type="file" name="pic_name" style="display: none" class="j_file"> 
</form>

실제 파일 업로드 버튼을 숨기고(너무 보기 흉해서) ".j_uploadFile" 트리거 버튼을 직접 정의한 뒤 폼에 추가합니다. 파일 버튼을 연결하기만 하면 됩니다.

②jqueryForm 소개

<script src="libs/jquery.min.js"></script> 
<script src="libs/jquery.form.min.js"></script>

3여기서 핵심이 나옵니다

<script> 
   //点击上传图片 
   $(&#39;.j_upLoadFile&#39;).click(function(){ 
     $(&#39;.j_file&#39;).click(); 
   }); 
 
   //选择了新文件 
   $(&#39;.j_file&#39;).change(function(){ 
     //如果文件为空 
     if($(this).val() == &#39;&#39;){ 
       return; 
     } 
     $(&#39;#submitForm&#39;).ajaxSubmit({ 
       type:&#39;post&#39;, 
       dataType:&#39;json&#39;, 
       success:function(result){ 
         //请求成功后的操作 
 
         //并且清空原文件，不然选择相同文件不能再次传 
         $(&#39;.j_file&#39;).val(&#39;&#39;); 
       }, 
       error:function(){ 
         //并且清空原文件，不然选择相同文件不能再次传 
         $(&#39;.j_file&#39;).val(&#39;&#39;); 
       } 
     }); 
   }) 
 </script>

가짜 업로드 버튼을 클릭하고 동시에 업로드 버튼의 값이 변경될 때 실제 파일 버튼이 실행되는 것을 기억하세요. 값(즉, 새 파일을 선택하고 확인을 클릭한 폴더 열기), 요청이 성공하거나 실패할 때 파일 값을 지우는 것을 잊지 마세요. 동일한 파일을 두 번째로 업로드하면 값이 변경되지 않습니다.

관련 권장 사항:

struts1 및 jquery 양식 파일 비동기 업로드 예제 공유

JQuery 양식에서 라디오 버튼이 선택되었는지 확인 경험 요약

jQuery Ajax는 FormData를 사용하여 파일 및 기타 데이터 예제를 업로드합니다. 자세한 설명

위 내용은 jquery Form은 파일 업로드 인스턴스 공유를 쉽게 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!