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

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

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

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

 <style>
 * {
     margin:;
     padding:;
     list-style-type: none;
 }

 body {
     font: 12px/180% Arial, Helvetica, sans-serif, "宋体";
 }

 a,img {
     border:;
 }

 a {
     color: #5e5e5e;
     text-decoration: none;
 }

 a:hover {
     color: #3366cc;
     text-decoration: underline;
 }
 /* box */
 .box {
     position: absolute;
     width: 800px;
     left: 50%;
     height: auto;
     z-index:;
     background-color: #fff;
     border: 1px #8FA4F5 solid;
     padding: 1px;
 }

 .box h2 {
     height: 25px;
     font-size: 14px;
     background-color: #3366cc;
     position: relative;
     padding-left: 10px;
     line-height: 25px;
     color: #fff;
 }

 .box h2 a {
     position: absolute;
     right: 5px;
     font-size: 12px;
     color: #fff;
 }

 .box .mainlist {
     padding: 10px;
 }

 .box .mainlist li {
     height: 24px;
     line-height: 24px;
 }

 .box .mainlist li span {
     margin: 0 5px 0 0;
     font-family: "宋体";
     font-size: 12px;
     font-weight:;
     color: #ddd;
 }

 #TB_overlayBG {
     background-color: #666;
     position: absolute;
     z-index:;
     left:;
     top:;
     display: none;
     width: 100%;
     height: 100%;
     opacity: 0.5;
     filter: alpha(opacity = 50);
     -moz-opacity: 0.5;
 }
 </style>

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

 <script>
     $(function() {
         $(".showbox").click(
                 function() {
                     $("#TB_overlayBG").css({
                         display : "block",
                         height : $(document).height()
                     });
                     $(".box").css(
                             {
                                 left : ($("body").width() - $(".box").width())
                                         / 2 - 20 + "px",
                                 top : ($(window).height() - $(".box").height())
                                         / 2 + $(window).scrollTop() + "px",
                                 display : "block"
                             });
                 });

         $(".close").click(function() {
             $("#TB_overlayBG").css("display", "none");
             $(".box ").css("display", "none");
         });

     });
 </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="width: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表单外，以免文件上传影响到表单。

 <script type="text/javascript">
         $(function() {
             function plupload() {
                 $("#uploader")
                         .pluploadQueue(
                                 {
                                     runtimes : 'html5,gears,browserplus,silverlight,flash,html4',
                                     url : 'fileUploadAction_upload',
                                     max_file_size : '10mb',
                                     unique_names : true,
                                     chunk_size : '2mb',
                                     // Specify what files to browse for
                                     filters : [ {
                                         title : "Image files",
                                         extensions : "doc,docx,txt"
                                     }, {
                                         title : "Zip files",
                                         extensions : "zip"
                                     } ],
                                     resize : {
                                         width : 640,
                                         height : 480,
                                         quality : 90
                                     },
                                     // Flash settings
                                     flash_swf_url : 'fileupload/Moxie.swf',
                                     // Silverlight settings
                                     silverlight_xap_url : 'fileupload/Moxie.xap',
                                 });
             }
             plupload();
             $('#Reload').click(function() {
                 plupload();
             });
         });
     </script>

这个是文件上传的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

找到以下的这部分

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

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

 public class FileUploadAction extends ActionSupport {

     private static final long serialVersionUID = 1L;

     private static final int BUFFER_SIZE = 2 * 1024;

     private int id = -1;

     private AccessoryService accessoryService;
     private File file;
     private String name;
     private List<String> names;
     private String fileFileName;
     private String fileContentType;

     private int chunk;
     private int chunks;

     private String result;

     private void copy(File src, File dst) {
         InputStream in = null;
         OutputStream out = null;
         try {
             if (dst.exists()) {
                 out = new BufferedOutputStream(new FileOutputStream(dst, true),
                         BUFFER_SIZE);
             } else {
                 out = new BufferedOutputStream(new FileOutputStream(dst),
                         BUFFER_SIZE);
             }
             in = new BufferedInputStream(new FileInputStream(src), BUFFER_SIZE);

             byte[] buffer = new byte[BUFFER_SIZE];
             int len = 0;
             while ((len = in.read(buffer)) > 0) {
                 out.write(buffer, 0, len);
             }
         } catch (Exception e) {
             e.printStackTrace();
         } finally {
             if (null != in) {
                 try {
                     in.close();
                 } catch (IOException e) {
                     e.printStackTrace();
                 }
             }
             if (null != out) {
                 try {
                     out.close();
                 } catch (IOException e) {
                     e.printStackTrace();
                 }
             }
         }
     }

     public String upload() throws Exception {
         String dstPath = "F:/file/" + this.getFileFileName();
         File dstFile = new File(dstPath);

         // 文件已存在（上传了同名的文件）
         if (chunk == 0 && dstFile.exists()) {
             dstFile.delete();
             dstFile = new File(dstPath);
         }

         copy(this.file, dstFile);
         System.out.println("上传文件:" + fileFileName + " 临时文件名："
                 + fileContentType + " " + chunk + " " + chunks);
         ArrayList<String> al = new ArrayList<String>();
         al.add(fileFileName);
         if (chunk == chunks - 1) {
             //完成一整个文件;
         }
         return null;
     }

     public String submit() {
         String filePath = "D:/";
         System.out.println("保存文件路径： " + filePath);

         HttpServletRequest request = ServletActionContext.getRequest();

         result = "";
         int count = Integer.parseInt(request.getParameter("uploader_count"));
         for (int i = 0; i < count; i++) {
             fileFileName = request.getParameter("uploader_" + i + "_name");
             name = request.getParameter("uploader_" + i + "_tmpname");
             System.out.println(fileFileName + " " + name);
             try {
                 // do something with file;
                 result += fileFileName + "导入完成. <br/>";
             } catch (Exception e) {
                 result += fileFileName + "导入失败:" + e.getMessage()
                         + ". <br/>";
                 e.printStackTrace();
             }
         }
         return SUCCESS;
     }

     public void setId(int id) {
         this.id = id;
     }

     public int getId() {
         return id;
     }

     public void setName(String name) {
         this.name = name;
     }

     public String getName() {
         return name;
     }

     public void setNames(List<String> names) {
         this.names = names;
     }

     public List<String> getNames() {
         return names;
     }

      public File getFile() {
         return file;
     }

     public void setFile(File file) {
         this.file = file;
     }

     public String getFileFileName() {
         return fileFileName;
     }

     public void setFileFileName(String fileFileName) {
         this.fileFileName = fileFileName;
     }

     public String getFileContentType() {
         return fileContentType;
     }

     public void setFileContentType(String fileContentType) {
         this.fileContentType = fileContentType;
     }

     public int getChunk() {
         return chunk;
     }

     public void setChunk(int chunk) {
         this.chunk = chunk;
     }

     public int getChunks() {
         return chunks;
     }

     public void setChunks(int chunks) {
         this.chunks = chunks;
     }

     public void setResult(String result) {
         this.result = result;
     }

     public String getResult() {
         return result;
     }

     public AccessoryService getAccessoryService() {
         return accessoryService;
     }

     public void setAccessoryService(AccessoryService accessoryService) {
         this.accessoryService = accessoryService;
     }
 }

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

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

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