多文件预览上传基于Struts
实现多文件预览,多文件上传,基于struts,使用jquery实现,逻辑简单转化为js等方便。
<html>
<head>
<link href="../../css/style.css" rel="stylesheet" type="text/css">
<link href="../../css/addstyle.css" rel="stylesheet" type="text/css">
<script language="javascript" src="../../js/jquery-1.4.2.min.js"></script>
<title>上传任意多个文件</title>
<script language="javascript">
function insertNextFile(obj)
{
var childnum = $("#files > input").size();
var id = childnum - 1 ;
var fullName = obj.value;
var fileHtml = "";
var files_preview = "files_preview"+id;
fileHtml += "<tr id = 'files_preview"+ id +"'><td width='25%' align='center'>" + (id + 1) + "</td><td width='50%' align='center'>" + fullName.substr(fullName.lastIndexOf("\\")+1) + "</td>";
fileHtml += "<td width='25%' align='center'><a href='javascript:void(0)' onclick='javascript:removeFile(" + id + ")' >删除</a>";
fileHtml += "</td> </tr>";
$("#files_preview").append(fileHtml);
obj.style.display = 'none';
addUploadFile(childnum);
}
function addUploadFile(index)
{
$("#files").append("<input type='file' id='file_" + index +
"' name='file[" + index + "]' onchange='insertNextFile(this)'/>");
}
function removeFile(index) // 删除当前文件的<div>和<input type=”file”/>元素
{
$("#files_preview"+index).remove();
$("#file_"+index).remove();
if($("#files > input").size() == 1){
$("#files > input:eq(0)").attr("name","file["+0+"]");
$("#files > input:eq(0)").attr("id","file_"+ 0);
}
var $ttr = $("#files_preview tr:not(:first)").detach();
$ttr.each(function(i){
var vid = $(this).attr("id");
var vidnum = vid.substring(13);
$("#file_"+vidnum).attr("name","file["+i+"]");
$("#file_"+vidnum).attr("id","file_"+i);
$(this).children("td:eq(0)").html(i + 1);
$(this).children("td:last").empty();
var aHtml = "<a href='javascript:void(0)' onclick='removeFile(" + i + ")' >删除</a>";
$(this).children("td:last").append(aHtml);
$(this).attr("id","files_preview"+i);
});
$("#files_preview").append($ttr);
var childnum = $("#files > input").size();
$("#files > input:last").attr("name","file["+(childnum - 1)+"]");
$("#files > input:last").attr("id","file_"+(childnum - 1));
}
function showStatus(obj) // 显示“正在上传文件”提示信息
{
$("#status").css("visibility","visible");
}
</script>
</head>
<body>
<html:form enctype="multipart/form-data" action="/ins/complaintNew/NewUploadFileAction.do" method="post">
<input type="hidden" name="method" />
<span id="files" > <%-- 在此处插入用于上传文件的input元素 --%>
<input type="file" id="file_0" name="file[0]" onchange="insertNextFile(this)" /> </span>
<html:submit value=" 上传 " onclick="showStatus(this);" />
</html:form>
<p>
<div id="status" style="visibility: hidden; color: Red" >
正在上传文件
</div>
<p>
<table id ="files_preview" width="100%" border="1" cellpadding="0" cellspacing="1" ><tr ><td width="25%" align="center">序号</td><td width="50%" align="center">上传文件名称</td><td width="25%" align="center">删除</td></tr>
</table>
</body>
</html>
NewComplaintBaseForm fm = (NewComplaintBaseForm) form;
int count = fm.getFileCount();
for (int j = 0; j < count; j++) {
int fileMxsize = Integer.parseInt(listFtp.get(3).toString());
FormFile file = fm.getFile(j);
String fileNme=file.getFileName();
int flength = fileMxsize * 1024;
int ok = (int) file.getFileSize() / 1024;
if (ok > flength) {
System.out.println("上传文件" + fileNme + "失败");
request.setAttribute("message", "上传的文件大小为:" + ok+ "kb,超过最大限度"+fileMxsize+"M,不允许上传 "); request.setAttribute("newFileNme", "");
}
}
for (int i = 0; i < count; i++)
{
FormFile file = fm.getFile(i);
stream = file.getInputStream();
String fileNme=file.getFileName();
String newFileNme=file.getFileName();
int pos=newFileNme.lastIndexOf(".");
}
System.out.println("上传文件"+showfileNm+"成功");
private Long fileId;
private String fileName;
private String newFileName;
private String fileUploadUser;
private String fileUploadTime;
private List<FormFile> myFiles = new ArrayList<FormFile>();
public FormFile getFile(int i) // 索引属性
{
return myFiles.get(i);
}
public void setFile(int i, FormFile myFile) // 索引属性
{
if (myFile.getFileSize() > 0)
{
myFiles.add(myFile);
}
}
public int getFileCount() // 获得上传文件的个数
{
return myFiles.size();
}