springmvc+mybatis+oracle选用xmlhttprequest方法多文件上传与批量保存ITeye - 千亿集团

springmvc+mybatis+oracle选用xmlhttprequest方法多文件上传与批量保存ITeye

2019年03月13日11时40分03秒 | 作者: 浩歌 | 标签: 文件,上传,保存 | 浏览: 1403

我有一个【模板发布】页面,代码,预览图如下

 %@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"% 
 html 
 head 
 meta http-equiv="Content-Type" content="text/html; charset=UTF-8" 
 script type="text/javascript" src=" %=request.getContextPath()+"/resources/js/jquery-1.7.1.js"% " /script 
 script type="text/javascript" src=" %=request.getContextPath()+"/resources/js/uploadPanel.js"% " /script 
 title 发布模板 /title 
 /head 
 body 
 form action=" %=request.getContextPath()+"/faceController/insert" % " method="post" enctype="multipart/form-data" 
 table 
 td input id="face_submit" type="submit" value="发布" / /td 
 /tr 
 td 标题: /td 
 td input type="text" name="title" value=""/ /td 
 /tr 
 td 描绘: /td 
 td textarea rows="10" cols="50" name="message" /textarea /td 
 /tr 
 td input type="hidden" name="fileIds" value="" /td 
 /tr 
 /table 
 /form 
 input type="button" name="checkButton" value="挑选文件" / 
 form id="upload_panel_form" action=" %=request.getContextPath()+"/fileController/upload" % " method="post" enctype="multipart/form-data" 
 input id="checkFile" type="file" name="files" accept=".zip,.jpg,.jpeg" value="挑选文件" onchange="changeList()" multiple="multiple"/ 
 /form 
 div id="upload_panel_list_div" 
 table id="upload_panel_list_table" 
 tbody id="upload_panel_list_table_tbody" 
 /tr 
 /tbody 
 /table 
 /div 
 /body 
 /html 

 

function clickButton(){
 $(".checkFile").click();
var xhr;
function changeList(){
 var fd = new FormData();
 var files = document.getElementById(checkFile).files;
 if(files.length  0){
 alert("请挑选需求上传的文件");
 return;
 var tbody = $("#upload_panel_list_table_tbody");
 for (var i = 0; i files.length; i++) {
 var file = files[i];
 var fileSize = file.size;
 var fileName = file.name;
 var fileType = fileName.split(.)[fileName.split(.).length-1];
 var td = ;
 if(fileType  jpg){
 td = " td img alt= src=/service/resources/image/loding-image.gif width=100px /td 
 var tr = $(#upload_panel_list_table_tbody tr:last);
 tr.append(td);
 if(tr.children(td).length  3){
 tbody.append(" tr /tr 
 fd.append("files", files[i]);
 $("#face_submit").attr("disabled","disabled");
 xhr = new XMLHttpRequest();
 xhr.open("POST", document.getElementById(upload_panel_form).action);
 xhr.onreadystatechange = callback;
 xhr.send(fd);
function callback(){
 if(xhr.readyState  4){
 if (xhr.responseText != null xhr.responseText != ){
 $("#checkFile").value = "";
 var result = xhr.responseText;
 //此处需转化。
 var json = eval("(" + result + ")").fileList;
// filePath
// alert($(".temp-uploading-img").length);
 var files = $("input[name=fileIds]");
 var files_val = files.val();
 for (var int = 0; int json.length; int++) {
 var fileJson = json[int];
 var img = $(".temp-uploading-img").eq(0);
 img.attr("src",fileJson.filePath);
 img.removeClass();
 files_val += files_val   ? fileJson.id : ("~" + fileJson.id);
 $("#face_submit").removeAttr("disabled");
 files.val(files_val);

 

 此处,我挑选图片后,会先将图片上传到服务器,然后在页面记载图片上传后回来的id。

需求留意的是,我此处的上传途径,也就是realPath,并不是与在该项目中的,而是我自己树立的一个文件服务器。假如需求再本项目中,你能够在realPath前参加request.getContextPath()等项目途径。

下面是文件上传的java代码:

@RequestMapping("upload")
 public void uploadFaceImage(HttpServletRequest request,HttpServletResponse response,ModelAndView modelAndView,RedirectAttributes attr,@RequestParam MultipartFile[] files,Face face) throws IOException{
 Calendar calendar = Calendar.getInstance();
 User user = (User) request.getSession().getAttribute(WebKeys.USERKEY);
 String realPath = "/" + "uploadfile" + "/" + user.getUserId() + "/" + calendar.get(Calendar.YEAR) + "_" + (calendar.get(Calendar.MONTH) + 1) + "_" + calendar.get(Calendar.DAY_OF_MONTH);
 File temp = new File(realPath);
 if(!temp.exists()){
 temp.mkdirs();
 List com.face.model.File fileList = new ArrayList com.face.model.File 
 for (MultipartFile multipartFile : files) {
 if(multipartFile.isEmpty()){
 System.err.println("-上传失利-");
 }else{
 com.face.model.File file = new com.face.model.File();
 String fileName = System.currentTimeMillis() + "_" + Math.round(new Random().nextDouble() * 100000) + multipartFile.getOriginalFilename().substring(multipartFile.getOriginalFilename().lastIndexOf("."));
 file.setFileName(fileName);
 file.setFileOldName(multipartFile.getOriginalFilename());
 file.setFileSize(BigDecimal.valueOf(multipartFile.getSize()));
 file.setFileType(multipartFile.getContentType());
 file.setFilePath(realPath + "/" + file.getFileName());
 file.setUploadUserId(user.getId());
 file.setCreateTime(new Date());
 file.setId(fileService.getSequence());
 FileUtils.copyInputStreamToFile(multipartFile.getInputStream(), new File(realPath,file.getFileName()));
 fileList.add(file);
 Map String,Object data = new HashMap String,Object 
 if(fileList.size() 0){
 int result = fileService.inserFileBatch(fileList);
 if(result 0)
 data.put("fileList",fileList);
 response.setCharacterEncoding("UTF-8"); 
 response.setContentType("application/json; charset=utf-8");
 String json = JSON.toJSONStringWithDateFormat(data, "YYYY-MM-dd HH-mm-ss");
 System.out.println(json);
 PrintWriter out = null;
 try {
 out = response.getWriter();
 out.append(json);
 } catch (IOException e) {
 e.printStackTrace();
 }finally{
 out.close();
 }

 由于运用的是oracle,所以批量保存这儿稍稍费事了一点。

我是先查出id号,然后写入File实体的id字段,然后再进行批量保存的。

下面是我的mapper:

 select id="getSequence" resultType="java.math.BigDecimal" 
 SELECT SEQ_T_FILE.nextval as ID from dual
 /select 
 insert id="insertFileBatch" parameterType="java.util.List" 
 insert into T_FILE
 select A.* from(
 foreach collection="list" item="item" index="index"
 separator="UNION" 
 SELECT
 #{item.id},
 #{item.fileSize},
 #{item.fileOldName},
 #{item.fileName},
 sysdate,
 #{item.uploadUserId},
 #{item.filePath},
 #{item.fileType}
 from dual
 /foreach 
 /insert 

 当然,假如你不需求记载文件上传后保存到数据库的id的话,就能够不必这么费事,能够如下方法,直接批量保存:

 insert id="insertFileBatch" parameterType="java.util.List" 
 insert into T_FILE
 select SEQ_T_FILE.nextval,A.* from(
 foreach collection="list" item="item" index="index"
 separator="UNION" 
 SELECT
 #{item.fileSize},
 #{item.fileOldName},
 #{item.fileName},
 sysdate,
 #{item.uploadUserId},
 #{item.filePath},
 #{item.fileType}
 from dual
 /foreach 
 /insert 

 此处要留意,一切#字段的先后顺序是以数据库中的先后顺序来排序的,假如与数据库默许的不对应,就会报错。

 

版权声明
本文来源于网络,版权归原作者所有,其内容与观点不代表千亿集团立场。转载文章仅为传播更有价值的信息,如采编人员采编有误或者版权原因,请与我们联系,我们核实后立即修改或删除。

猜您喜欢的文章