이번에는 AjaxFileUpload가 파일 업로드박스를 동적으로 추가하는 방법과 AjaxFileUpload가 파일 업로드 박스를 동적으로 추가하기 위한 노트가 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다. 살펴보겠습니다.
그러나 파일 수는 고정되어 있습니다. 수요가 파일 수를 확신하지 못하는 경우 유연성을 확보하기 위해 파일 업로드 상자를 동적으로 추가해야 합니다.
이전 글의 기본 프레임워크를 기반으로 다음과 같은 부분이 크게 수정되었습니다.
1. 파일 업로드 상자를 동적으로 추가하고 삭제하는 jQuery
2.
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='addFile"+fileLength+"'><input type='file' id='file"+fileLength+"' name='file' />" +"<a href='javascript:void();' onclick='delFile("+fileLength+");'>删除</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 중국어 웹사이트의 기타 관련 기사를 주목해 주세요!
추천 자료:
위 내용은 AjaxFileUpload를 사용하여 파일 업로드 상자를 동적으로 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!