ajaxFileupload多文件上传

打开google 搜索 ‘ajaxFileupload’ ‘多文件上传’ 可以搜到许许多多类似的，那我为什么还要写一下呢？

一个是对之前大神的贡献表示感谢；二个是自己知识的总结；三个是自己在原有的基础上改动了下，在此记录，可能帮助其他朋友。

用过这个插件的都知道这个插件的基本用法，我就不废话，直接上代码。

我需要实现多个文件上传，之前的做法是定义多个不同id的input，然后把ajaxfileuplod方法放在for循环里，这个方法是在网上看到的，我觉得不怎么好，后面在网上找到的，就高级点了，直接改源码（因为作者好久没有跟新了，也确实满足不了要求了）。接下来看看我是怎么改的。

引用网上的做法：

1，看没有修改前的代码

Js代码

1. varoldElement=jQuery('#'+fileElementId);

2. varnewElement=jQuery(oldElement).clone();

3. jQuery(oldElement).attr('id',fileId);

4. jQuery(oldElement).before(newElement);

5. jQuery(oldElement).appendTo(form);

很容易看出，这个就是把id为什么的input加到from里去，那么要实现多个文件上传，就改成下面的样子：

Js代码

if(typeof(fileElementId)=='string'){

1. fileElementId=[fileElementId];

2. }

3. for(variinfileElementId){

4. varoldElement=jQuery('#'+fileElementId[i]);

5. jQuery(oldElement).before(newElement);

6. jQuery(oldElement).appendTo(form);

7. }

这样改之后，初始化的代码就要这么写：

Js代码

1. $.ajaxFileUpload({

2. url:'/ajax.php',

3. fileElementId:['id1','id2']//原先是fileElementId:’id’只能上传一个

4. });

到这里，确实可以上传多个文件，但是对于我来说新问题又来，多个id，我的界面的文件不是固定的，是动态加载的，那么id要动态生成，我觉得太麻烦，为什么不取name呢？然后把以上代码改为如下：

Js代码

infileElementId){

1. //按name取值

2. varoldElement=jQuery("input[name="+fileElementId[i]+"]");

3. oldElement.each(function(){

4. varnewElement=jQuery($(this)).clone();

5. jQuery(oldElement).attr('id',fileId);

6. jQuery(oldElement).before(newElement);

7. jQuery(oldElement).appendTo(form);

8. });

9. }

这样改了 那么就可以实现多组多个文件上传，接下来看我是怎么应用的。

html：

Html代码

1. <div>

2. imgid="loading"src="scripts/ajaxFileUploader/loading.gif"style="display:none;">

4. tablecellpadding="0"cellspacing="0"class="tableForm"id="calculation_model"theadtrth>多组多个文件</tbodytd>第一组>第二组>inputtype="file"name="gridDoc"class="input"inputtype="file"name="caseDoc"class="input"tfootbuttonclass="button"id="up1">Uploadbuttonbuttonclass="button"id="addInput">添加一组table>

js:

Js代码

1. /**

2. *CreatedwithIntelliJIDEA.

3. *User:Administrator

4. *Date:13-7-3

5. *Time:上午9:20

6. *TochangethistemplateuseFile|Settings|FileTemplates.

7. */

8. $(document).ready(function(){

9. $("#up1").click(vartemp=["gridDoc","caseDoc"];

10. ajaxFileUpload(temp);

11. });

13. $("#addInput").click(function(){

14. addInputFile();

15. });

17. });

19. //动态添加一组文件

20. functionaddInputFile(){

21. $("#calculation_model").append("<tr>"+

22. "<td><inputtype='file'name='gridDoc'class='input'></td>"+

23. "<td><inputtype='file'name='caseDoc'class='input'></td>"+

24. "</tr>");

25. }

28. //直接使用下载下来的文件里的demo代码

29. functionajaxFileUpload(id)

30. {

31. //startingsettingsomeanimationwhentheajaxstartsandcompletes

32. $("#loading").ajaxStart(function(){

33. $(this).show();

34. }).ajaxComplete(this).hide();

35. });

37. /*

38. prepareingajaxfileupload

39. url:theurlofscriptfilehandlingtheuploadedfiles

40. fileElementId:thefiletypeofinputelementidanditwillbetheindexof$_FILESArray()

41. dataType:itsupportjson,xml

42. secureuri:usesecureprotocol

43. success:callbackfunctionwhentheajaxcomplete

44. error:callbackfunctionwhentheajaxfailed

46. */

47. $.ajaxFileUpload({

48. url:'upload.action',

49. //secureuri:false,

50. fileElementId:id,

51. dataType:'json'

52. }

53. )

55. returnfalse;

57. }

我后台是用的struts2，strtus2的上传是比较简单的，只要声明约定的名字，即可得到文件对象，和名称，代码如下：

Java代码

packagecom.ssy.action;

2. importcom.opensymphony.xwork2.ActionSupport;

3. importorg.apache.commons.io.FileUtils;

4. importorg.apache.struts2.util.ServletContextAware;

6. importjavax.servlet.ServletContext;

7. importjava.io.*;

8. importjava.text.SimpleDateFormat;

9. importjava.util.Date;

10. importjava.util.Random;

12. *Date:13-7-2

13. *Time:下午4:08

14. */

15. publicclassFileuploadextendsActionSupportimplementsServletContextAware{

16. privateFile[]gridDoc,caseDoc;

17. privateString[]gridDocFileName,caseDocFileName;

19. privateServletContextcontext;

23. publicStringexecute(){

24. inti=0;i<gridDocFileName.length;i++){

25. System.out.println(gridDocFileName[i]);

26. }

27. 0;i<caseDocFileName.length;i++){

28. System.out.println(caseDocFileName[i]);

29. }

32. //System.out.println(doc1FileName);

33. //System.out.println(doc2FileName);

34. StringtargetDirectory=context.getRealPath("/uploadFile");

36. *这里我只取得第一组的文件进行上传，第二组的类似

37. try{

38. 0;i<gridDoc.length;i++){

39. StringtargetFileName=generateFileName(gridDocFileName[i]);

40. Filetarget=newFile(targetDirectory,targetFileName);

41. FileUtils.copyFile(gridDoc[i],target);

42. }

43. }catch(Exceptione){

44. e.printStackTrace();

45. }

47. returnSUCCESS;

48. }

50. publicFile[]getGridDoc(){

51. returngridDoc;

52. }

54. voidsetGridDoc(File[]gridDoc){

55. this.gridDoc=gridDoc;

56. }

58. publicFile[]getCaseDoc(){

59. returncaseDoc;

60. }

62. voidsetCaseDoc(File[]caseDoc){

63. this.caseDoc=caseDoc;

64. }

66. publicString[]getGridDocFileName(){

67. returngridDocFileName;

68. }

70. voidsetGridDocFileName(String[]gridDocFileName){

71. this.gridDocFileName=gridDocFileName;

72. }

74. publicString[]getCaseDocFileName(){

75. returncaseDocFileName;

76. }

78. voidsetCaseDocFileName(String[]caseDocFileName){

79. this.caseDocFileName=caseDocFileName;

80. }

82. *用日期和随机数格式化文件名避免冲突

83. *@paramfileName

84. *@return

85. privateStringgenerateFileName(StringfileName){

86. System.out.println(fileName);

87. SimpleDateFormatsf=newSimpleDateFormat("yyMMddHHmmss");

88. StringformatDate=sf.format(newDate());

89. intrandom=newRandom().nextInt(10000);

90. intposition=fileName.lastIndexOf(".");

91. Stringextension=fileName.substring(position);

92. returnformatDate+random+extension;

93. }

95. }

写到这里，我就有疑问了，之前的大神改的多文件，为什么还是取id，而且后台是怎么取的，我还是没怎么弄明白，我改的这个代码可行么？是不是存在bug呢？这个还有待考验，如果看出问题，请指出，共同学习

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!