AjaxFileUpload를 사용하여 파일 업로드 상자를 동적으로 추가하는 방법-JS 튜토리얼-php.cn

AjaxFileUpload를 사용하여 파일 업로드 상자를 동적으로 추가하는 방법

php中世界最好的语言

풀어 주다： 2018-03-31 09:33:41

원래의

1798명이 탐색했습니다.

이번에는 AjaxFileUpload가 파일 업로드박스를 동적으로 추가하는 방법과 AjaxFileUpload가 파일 업로드 박스를 동적으로 추가하기 위한 노트가 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다. 살펴보겠습니다.

그러나 파일 수는 고정되어 있습니다. 수요가 파일 수를 확신하지 못하는 경우 유연성을 확보하기 위해 파일 업로드 상자를 동적으로 추가해야 합니다.

이전 글의 기본 프레임워크를 기반으로 다음과 같은 부분이 크게 수정되었습니다.

1. 파일 업로드 상자를 동적으로 추가하고 삭제하는 jQuery

3. ajaxfileupload.js에서 ID 배열을 필수 객체 배열로 변환

위 문제를 순서대로 해결하세요

1. 파일 업로드 상자의 동적 추가 및 삭제 구현

<body> 
 <form action="" enctype="multipart/form-data"> 
 <h2> 
  多文件上传 
 </h2> 
 <input type="file" id="file1" name="file" /><a id="add" href="javascript:void();" rel="external nofollow" onclick="addFile();">添加</a> 
 <span> 
  <table id="down"> 
  </table> 
 </span> 
 </br> 
 <input type="button" onclick="fileUpload();" value="上传"> 
 </form> 
</body>

로그인 후 복사

<script type="text/javascript"> 
 //添加附件 
 function addFile(){ 
 var fileLength = $("input[name=file]").length+1; 
 var inputFile = "<p id=&#39;addFile"+fileLength+"&#39;><input type=&#39;file&#39; id=&#39;file"+fileLength+"&#39; name=&#39;file&#39; />" 
   +"<a href=&#39;javascript:void();&#39; onclick=&#39;delFile("+fileLength+");&#39;>删除</a></p>"; 
 $("#add").after(inputFile); 
 } 
 //删除附件 
 function delFile(id){ 
 $("#addFile"+id).remove(); 
 } 
</script>

로그인 후 복사

2. 파일 업로드 상자의 ID

업로드 상자가 몇 개인지 모르기 때문에 업로드 상자가 추가될 때마다 해당 ID 속성이 file1 및 file2 형식으로 증가합니다

각 루프를 사용할 수 있습니다 문자를 연결하려면

var files = ""; 
//获取所有 <input type="file" id="file1" name="file" /> 的ID属性值 
$("input[name=file]").each(function(){ 
 files = files + $(this).attr("id")+","; 
}) 
//将字符最后一逗号(,)截取掉 
files = files.substring(0,files.length-1);

로그인 후 복사

그러면 우리가 얻는 파일 값은 다음과 같습니다: var files = "file1,file2,file3";

var files = "file1,file2,file3";

可以使用console.info(typeof(files));查看files为string类型

三、ajaxfileupload.js里将ID数组转换为需要的Object数组

因为我们需要的是诸如var files = ['file1','file2','file3'];

而不是var files = "file1,file2,file3";console.info(typeof(files)를 사용할 수 있습니다. ); 파일을 문자열 유형으로 보려면

Three, ajaxfileupload.js가 ID 배열을 필수 개체 배열

으로 변환합니다. 왜냐하면 우리에게 필요한 것은 var files = [와 같기 때문입니다. 'file1','file2','file3'];

대신 var files = "file1, file2, file3";

그래서 실제로 변환해야 합니다. , ajaxfileupload.js에서 할 필요는 없습니다

ID를 가져올 때 변환한 다음 값을 전달할 수 있습니다. 어디에 있든 상관없습니다. 방법은 동일합니다.

다음 코드를 찾으세요.

var oldElement = jQuery('#' + fileElementId); 
var newElement = jQuery(oldElement).clone(); 
jQuery(oldElement).attr('id', fileId); 
jQuery(oldElement).before(newElement); 
jQuery(oldElement).appendTo(form);

로그인 후 복사

이 코드 위에 다음을 추가하세요.

var t = ''; 
if(typeof(fileElementId) == 'string'){ 
/* 
 * 将传过来的值 如："file1,file2,file3" 转换为：['file1','file2','file3'] 
 */ 
var s = fileElementId.split(","); 
for(var i in s){ 
 t = t + "'"+s[i]+"'"+","; 
} 
t = "["+t+"]"; 
t = t.replace(",]", "]") 
} 
fileElementId= eval('('+ t +')'); //将string类型转换为Object类型

로그인 후 복사

효과는 다음과 같습니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 주목해 주세요!
추천 자료:

🎜🎜프로젝트의 Ajax 및 jsonp에 대한 실제 요약🎜🎜🎜🎜🎜AjaxFileUpload를 사용하여 여러 파일 업로드를 구현하는 방법🎜🎜🎜

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