用div漂浮快实现与表单无关的多文件上传功能。

我项目有这个需求，多文件上传，而且要及时显示到表单上，这样的话就不能与表单相关。

由于我对前端不熟，我就实现了这么一个功能，通过button触发一个div漂浮块，然后多文件上传，之后通过js把文件名显示到下拉列表。

多文件上传采用的是plupload插件。

 1 <style>
 2 * {
 3     margin: 0;
 4     padding: 0;
 5     list-style-type: none;
 6 }
 7 
 8 body {
 9     font: 12px/180% Arial, Helvetica, sans-serif, "宋体";
10 }
11 
12 a,img {
13     border: 0;
14 }
15 
16 a {
17     color: #5e5e5e;
18     text-decoration: none;
19 }
20 
21 a:hover {
22     color: #3366cc;
23     text-decoration: underline;
24 }
25 /* box */
26 .box {
27     position: absolute;
28     width: 800px;
29     left: 50%;
30     height: auto;
31     z-index: 100;
32     background-color: #fff;
33     border: 1px #8FA4F5 solid;
34     padding: 1px;
35 }
36 
37 .box h2 {
38     height: 25px;
39     font-size: 14px;
40     background-color: #3366cc;
41     position: relative;
42     padding-left: 10px;
43     line-height: 25px;
44     color: #fff;
45 }
46 
47 .box h2 a {
48     position: absolute;
49     right: 5px;
50     font-size: 12px;
51     color: #fff;
52 }
53 
54 .box .mainlist {
55     padding: 10px;
56 }
57 
58 .box .mainlist li {
59     height: 24px;
60     line-height: 24px;
61 }
62 
63 .box .mainlist li span {
64     margin: 0 5px 0 0;
65     font-family: "宋体";
66     font-size: 12px;
67     font-weight: 400;
68     color: #ddd;
69 }
70 
71 #TB_overlayBG {
72     background-color: #666;
73     position: absolute;
74     z-index: 99;
75     left: 0;
76     top: 0;
77     display: none;
78     width: 100%;
79     height: 100%;
80     opacity: 0.5;
81     filter: alpha(opacity = 50);
82     -moz-opacity: 0.5;
83 }
84 </style>

这个是漂浮块样式，样式是我在资料里找的，不知道为什么会影响全局的样式，希望有人改正。

 1 <script>
 2     $(function() {
 3         $(".showbox").click(
 4                 function() {
 5                     $("#TB_overlayBG").css({
 6                         display : "block",
 7                         height : $(document).height()
 8                     });
 9                     $(".box").css(
10                             {
11                                 left : ($("body").width() - $(".box").width())
12                                         / 2 - 20 + "px",
13                                 top : ($(window).height() - $(".box").height())
14                                         / 2 + $(window).scrollTop() + "px",
15                                 display : "block"
16                             });
17                 });
18 
19         $(".close").click(function() {
20             $("#TB_overlayBG").css("display", "none");
21             $(".box ").css("display", "none");
22         });
23 
24     });
25 </script>

这个是漂浮块的js部分，不要问我，我真的不会

<div id="TB_overlayBG"></div>
    <div class="box" style="display:none">
        <h2>
            文件上传<a href="#" class="close">关闭</a>
        </h2>
        <div class="mainlist">
            <div style="750px; margin:0 auto">
                <form>
                    <div id="uploader">
                        <p>您的浏览器未安装 Flash, Silverlight, Gears, BrowserPlus 或者支持 HTML5
                        </p>
                    </div>
                    <input value="重新上传" id="Reload" type="button">
                </form>
            </div>
        </div>
    </div>

html

这个是html代码，里面<div class="mainlist">里面就是PLupload。由于页面已经有一个表单了，我就把这个写在了form表单外，以免文件上传影响到表单。

 1 <script type="text/javascript">
 2         $(function() {
 3             function plupload() {
 4                 $("#uploader")
 5                         .pluploadQueue(
 6                                 {
 7                                     runtimes : 'html5,gears,browserplus,silverlight,flash,html4',
 8                                     url : 'fileUploadAction_upload',
 9                                     max_file_size : '10mb',
10                                     unique_names : true,
11                                     chunk_size : '2mb',
12                                     // Specify what files to browse for 
13                                     filters : [ {
14                                         title : "Image files",
15                                         extensions : "doc,docx,txt"
16                                     }, {
17                                         title : "Zip files",
18                                         extensions : "zip"
19                                     } ],
20                                     resize : {
21                                         width : 640,
22                                         height : 480,
23                                         quality : 90
24                                     },
25                                     // Flash settings 
26                                     flash_swf_url : 'fileupload/Moxie.swf',
27                                     // Silverlight settings 
28                                     silverlight_xap_url : 'fileupload/Moxie.xap',
29                                 });
30             }
31             plupload();
32             $('#Reload').click(function() {
33                 plupload();
34             });
35         });
36     </script>

View Code

这个是文件上传的js部分，我就直接仍在了div的下面，这个东西自己百度plupload api自己看，我用的话直接拿过来就可以用。

<input class="showbox" type="button" value="上传附件" name="B10"
					onclick="javascript:void(0);">

这个是button按钮，注意它的样式和onclick事件，不可更改。

需要引入什么js文件我就不贴出来了，百度plupload自己找一找前台的例子，把那些js引入就好。

注意：如果功能出不来，绝大部分可能是因为js文件引错了，或者没引入。

plupload插件是个很有意思的东西，去下载plupload的插件包，找到jquery.plupload.queue文件夹里的jquery.plupload.queue.js

找到以下的这部分

1 uploader.bind('FileUploaded', function(up, file) {
2                     handleStatus(file);
3                 });

View Code

我用试验证明了，这个方法，每上传一个文件调用一次，多文件上传会分成一个一个的文件单次调用，在这里可以加入自己的方法，把file这个东西引入进去，file.id和file.name就会获取到文件的文件名。

  1 public class FileUploadAction extends ActionSupport {
  2 
  3     private static final long serialVersionUID = 1L;
  4 
  5     private static final int BUFFER_SIZE = 2 * 1024;
  6 
  7     private int id = -1;
  8 
  9     private AccessoryService accessoryService;
 10     private File file;
 11     private String name;
 12     private List<String> names;
 13     private String fileFileName;
 14     private String fileContentType;
 15 
 16     private int chunk;
 17     private int chunks;
 18 
 19     private String result;
 20 
 21     private void copy(File src, File dst) {
 22         InputStream in = null;
 23         OutputStream out = null;
 24         try {
 25             if (dst.exists()) {
 26                 out = new BufferedOutputStream(new FileOutputStream(dst, true),
 27                         BUFFER_SIZE);
 28             } else {
 29                 out = new BufferedOutputStream(new FileOutputStream(dst),
 30                         BUFFER_SIZE);
 31             }
 32             in = new BufferedInputStream(new FileInputStream(src), BUFFER_SIZE);
 33 
 34             byte[] buffer = new byte[BUFFER_SIZE];
 35             int len = 0;
 36             while ((len = in.read(buffer)) > 0) {
 37                 out.write(buffer, 0, len);
 38             }
 39         } catch (Exception e) {
 40             e.printStackTrace();
 41         } finally {
 42             if (null != in) {
 43                 try {
 44                     in.close();
 45                 } catch (IOException e) {
 46                     e.printStackTrace();
 47                 }
 48             }
 49             if (null != out) {
 50                 try {
 51                     out.close();
 52                 } catch (IOException e) {
 53                     e.printStackTrace();
 54                 }
 55             }
 56         }
 57     }
 58 
 59     public String upload() throws Exception {
 60         String dstPath = "F:/file/" + this.getFileFileName();
 61         File dstFile = new File(dstPath);
 62 
 63         // 文件已存在（上传了同名的文件）
 64         if (chunk == 0 && dstFile.exists()) {
 65             dstFile.delete();
 66             dstFile = new File(dstPath);
 67         }
 68 
 69         copy(this.file, dstFile);
 70         System.out.println("上传文件:" + fileFileName + " 临时文件名："
 71                 + fileContentType + " " + chunk + " " + chunks);
 72         ArrayList<String> al = new ArrayList<String>();
 73         al.add(fileFileName);
 74         if (chunk == chunks - 1) {
 75             //完成一整个文件;
 76         }
 77         return null;
 78     }
 79 
 80     public String submit() {
 81         String filePath = "D:/";
 82         System.out.println("保存文件路径： " + filePath);
 83 
 84         HttpServletRequest request = ServletActionContext.getRequest();
 85 
 86         result = "";
 87         int count = Integer.parseInt(request.getParameter("uploader_count"));
 88         for (int i = 0; i < count; i++) {
 89             fileFileName = request.getParameter("uploader_" + i + "_name");
 90             name = request.getParameter("uploader_" + i + "_tmpname");
 91             System.out.println(fileFileName + " " + name);
 92             try {
 93                 // do something with file;
 94                 result += fileFileName + "导入完成. <br/>";
 95             } catch (Exception e) {
 96                 result += fileFileName + "导入失败:" + e.getMessage()
 97                         + ". <br/>";
 98                 e.printStackTrace();
 99             }
100         }
101         return SUCCESS;
102     }
103 
104     public void setId(int id) {
105         this.id = id;
106     }
107 
108     public int getId() {
109         return id;
110     }
111 
112     public void setName(String name) {
113         this.name = name;
114     }
115 
116     public String getName() {
117         return name;
118     }
119 
120     public void setNames(List<String> names) {
121         this.names = names;
122     }
123 
124     public List<String> getNames() {
125         return names;
126     }
127 
128      public File getFile() {
129         return file;
130     }
131 
132     public void setFile(File file) {
133         this.file = file;
134     }
135 
136     public String getFileFileName() {
137         return fileFileName;
138     }
139 
140     public void setFileFileName(String fileFileName) {
141         this.fileFileName = fileFileName;
142     }
143 
144     public String getFileContentType() {
145         return fileContentType;
146     }
147 
148     public void setFileContentType(String fileContentType) {
149         this.fileContentType = fileContentType;
150     }
151 
152     public int getChunk() {
153         return chunk;
154     }
155 
156     public void setChunk(int chunk) {
157         this.chunk = chunk;
158     }
159 
160     public int getChunks() {
161         return chunks;
162     }
163 
164     public void setChunks(int chunks) {
165         this.chunks = chunks;
166     }
167 
168     public void setResult(String result) {
169         this.result = result;
170     }
171 
172     public String getResult() {
173         return result;
174     }
175 
176     public AccessoryService getAccessoryService() {
177         return accessoryService;
178     }
179 
180     public void setAccessoryService(AccessoryService accessoryService) {
181         this.accessoryService = accessoryService;
182     }
183 }

View Code

这个后台代码是基于ssh2的，直接拿来就能用。
你百度找到的可能是private File upload；

但是2.X以后版本的属性名就都改成file了，包括fileFileName和fileContentType。

暂时只能想到这么多，有想到什么的给我留言，我想到什么也会写续集