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

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

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

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

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

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

a,img {
    border: 0;
}

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: 100;
    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: 400;
    color: #ddd;
}

#TB_overlayBG {
    background-color: #666;
    position: absolute;
    z-index: 99;
    left: 0;
    top: 0;
    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="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代码，里面<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。

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