正文
用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。
暂时只能想到这么多，有想到什么的给我留言，我想到什么也会写续集
