Web页面上传功能
Posted nobug的世界
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web页面上传功能相关的知识，希望对你有一定的参考价值。
注：参考消保维权系统，登记页面上传功能1、JSP页面：
<%@page import="com.wondersgroup.esf.base.util.ApplicationContextUtil"%>
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="../../../common/taglib.jsp" %>
<script type="text/javascript">
//替换所有
String.prototype.replaceAll = function(s1, s2) {
return this.replace(new RegExp(s1, "gm"), s2);
};
//截取上传附件路径后的名称
function getFileName(id){
var $file = $(id);
var value=$file.val();
var index=value.lastIndexOf("\\")+1;
var fileName=value.substring(index);
type=".gif|.jpeg|.jpg|.png|.bmp|.txt|.doc|.docx|.xls|.xlsx|.zip|.rar|";
if (checkAttachment(fileName, type)) {
$file.prev().val(fileName);
} else {
$file.after($file.clone().val(""));
$file.remove();
}
}
function checkAttachment(obj, AllowExt) {
var FileExt = obj.substr(obj.lastIndexOf(".")).toLowerCase();
if (AllowExt != 0 && AllowExt.indexOf(FileExt + "|") == -1) { // 判断文件类型是否允许上传
ErrMsg = "\n该文件类型不允许上传!请上传\n" + AllowExt + "类型的文件,\n当前文件类型为" + FileExt;
alert(ErrMsg);
return false;
}
return true;
}
//新增附件上传
function funAddUpload() {
var caseForm = document.getElementsByTagName("form");
if (caseForm[0].id=="formCaseInfo") {
alert("只能上传一个附件！");
} else {
var inquireRow = tbodyUpload.insertRow(tbodyUpload.rows.length);
var investorCell = inquireRow.insertCell();
var maxIndex = parseInt(tbodyUpload.getAttribute(‘maxIndex‘));
var innerhtml = $("#templateUpUp").html();
innerHTML = innerHTML.replaceAll("\\[0\\]", "[" + maxIndex + "]");
innerHTML = innerHTML.replaceAll("_0", "_" + maxIndex);
investorCell.innerHTML = innerHTML;
inquireRow.setAttribute(‘index‘, maxIndex);
tbodyUpload.setAttribute(‘maxIndex‘, maxIndex + 1);
$(‘#fileName_‘ + maxIndex).val("");
$(‘#myFiles_‘ + maxIndex).val("");
}
}
//删除咨询信息
function deleteUpload(obj) {
if (tbodyUpload.rows.length > 1) {
rowObj = getRowObj();
if (rowObj.rowIndex == 1) {
alert(‘第一行不能删除!‘);
return;
}
if (confirm(‘确定‘ + obj.title + ‘?‘)) {
rowObj.removeNode(true);
}
} else {
alert(‘至少保留一条！‘);
}
}
function getRowObj() {
var eSrc = window.event.srcElement;
event.returnValue = false;
var i = 0;
while (true) {
if (eSrc.tagName.toUpperCase() == "TR") {
if (i < 1) {
i++;
} else {
return eSrc;
break;
}
}
eSrc = eSrc.parentElement;
}
}
function getRowIndex() {
return getRowObj().getAttribute(‘index‘);
}
</script>
<table id="uploadTable" class="table_search">
<thead>
<tr>
<th colspan="3" style="cursor: hand">
上传附件
<img align="absmiddle" src="<%=ApplicationContextUtil.getBasePath(request)%>images/add.png" style="cursor: pointer;" onclick="funAddUpload()" />
</th>
</tr>
</thead>
<tbody id="tbodyUpload" maxIndex=‘1‘>
<tr id="templateUpUp" index="0">
<td width="100%">
<table id="tabUp" border="0" cellpadding="5" cellspacing="0" style="border-collapse: collapse;width: 99%;margin: 4px;">
<tr id="noTab">
<th>请选择上传的文件:</th>
<td>
<form:hidden id="fileName_0" name="cnUploads[0].fileName" />
<input type="file" id="myFiles_0" name="myFiles" onchange="getFileName(this)" style="width:90%; height:18px; line-height:18px;"/>
</td>
<td style="width:15%">
<IMG align="absmiddle" src="<%=ApplicationContextUtil.getBasePath(request)%>images/del.png" style="cursor: pointer" onclick="deleteUpload(this)" title="删除该条咨询信息" />
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
2、保存后，后台处理代码：（参考cnAppServiceImple）
// 保存附件信息
MultipartHttpServletRequest mRequest = (MultipartHttpServletRequest) form.getRequest();
List<MultipartFile> myFiles = mRequest.getFiles("myFiles");
for (MultipartFile multipartFile : myFiles) {
if (StringUtils.isNotBlank(multipartFile.getOriginalFilename())) {
CnUpload cnUpload = new CnUpload();
cnUpload.setSerialNo(null);
cnUpload.setCaseId(caseId);
cnUpload.setFileName(multipartFile.getOriginalFilename());
cnUpload.setActId(BusinessConstants.FLOW_ID_CN_START);
cnUpload.setUploadDate(new Date());
cnUpload.setFilePath(path);
this.baseDao.persist(cnUpload);
FileUtils.copyInputStreamToFile(multipartFile.getInputStream(), new File(path, multipartFile.getOriginalFilename()));
}
} 以上是关于Web页面上传功能的主要内容，如果未能解决你的问题，请参考以下文章