一、导入包
<link rel="styleSheet" type="text/css"
href="<c:url value='/fileupload/fileupload.css'/>" />
<script type="text/javascript"
src="<c:url value='/fileupload/fileupload.js' />"></script>
<script type="text/javascript">
二、ui实现
<tr>
<th class="td_l">
年取水计划相关文件:
</th>
<td class="td_r" colspan="3">
<div class='addFileImage' id='addFileImages'></div>
<div id='fileUploadDivContainers'
class='fileUploadDivContainers'>
<div id='fileUploadDivs' style='display: none; padding: 2px;'>
选择文件:
<input type='file' class='input_field' name='waterPlanFiles'
style="width: 180px;" />
<a class='deleteFileHref' href="#">删除</a>
</div>
</div>
</td>
</tr>
<tr>
<th class="td_l">
企业快照:
</th>
<td class="td_r" colspan="3">
<div class='addFileImage' id='addFileImage'></div>
<div id='fileUploadDivContainer' class='fileUploadDivContainer'>
<div id='fileUploadDiv' style='display: none; padding: 2px;'>
选择文件:
<input type='file' class='input_field' name='companyPicFiles'
style="width: 180px;" />
<a class='deleteFileHref' href="#">删除</a>
</div>
</div>
</td>
</tr>
三、控件实例化
$(document).ready(function() {
function initFileInputs() {
$(document).fileInput( {
clickImageId : "addFileImage",
appendDivId : "fileUploadDivContainer",
cloneDivId : "fileUploadDiv",
showNumber : 1
});
$(document).fileInput( {
clickImageId : "addFileImages",
appendDivId : "fileUploadDivContainers",
cloneDivId : "fileUploadDivs",
showNumber : 1
});
}
});
四、后台接收
(1)、实体类要实现接口FileInterface
(2)、控制层实现
@RequestMapping(params = "action=doAddDfag")
public synchronized void doAdd(HttpServletResponse response,
HttpServletRequest request) {
Dfag dfag = null;
FileUploadMultipleDateUtil util;
try {
/* 删除此代码,从文件中取 */
// String filePath = this.uploadFile(request);
// /*删除此代码,从文件中取*/
util = new FileUploadMultipleDateUtil(
FileUploadMultipleDateUtil.LIST_CONVERT_TYPE);
// 系统分割符号
String strTemp = System.getProperty("file.separator");
StringBuffer sb = new StringBuffer();
sb.append("upload").append(strTemp).append("files").append(strTemp);
dfag = util.uploadFile(request, Dfag.class, sb.toString());
Dfag df = dfagService.getDfagByDfagcd(dfag.getDfagcd());
if (df != null) {
super.ajaxForward(response, EXISTS);
} else {
//获取上传的文件并进行处理
List<FileDomain> fileList = dfag.getFileList();
if (fileList != null) {
for (FileDomain fileObj : fileList) {
Qushuifiles qushuiFiles = new Qushuifiles();
qushuiFiles.setDfagCd(dfag.getDfagcd());
qushuiFiles.setFileName(fileObj.getFileName());
qushuiFiles.setUseType(fileObj.getFieldName());
qushuiFiles.setFilePath(fileObj.getRelativePath()
+ FileUploadUtil.OS_FILE_SYMBOL
+ fileObj.getGenFileName());
qushuiFiles.setFilePath(fileObj.getGenFileName());
qushuiFileService.insert(qushuiFiles);
}
}
dfagService.insert(dfag);
// 插入系统日志
logger.info("增加取水用户:" + dfag.getBasinName());
AreaTreeCacheObservable.getInstance().setCacheChanged();
super.ajaxForward(response, OK);
}
} catch (Exception e) {
e.printStackTrace();
logger.error("增加取水用户异常:", e);
super.ajaxForward(response, ERROR);
}
}
(3)、多个文件上传要建立子表通过id关联查询
(4)、core-servlet.xml中的相关bean要注释掉,不然上传会报错
(5)前端form表单要加上enctype="multipart/form-data"属性,不然文件上传不了