Recently, I need to upload file files in the project. I have always submitted it by form before. I tried AjaxForm and it feels that it is quite useful. I wrote an essay mark for future use.
Preparation:
Download jquery-form.js
Related jar:
commons-fileupload-1.1.1.jar
commons-io-1.3.2.jar
Configure multipartResolver in spring-servlet.xml:
<bean id="multipartResolver"> <property name="defaultEncoding" value="utf-8" /> <property name="maxUploadSize" value="10485760000" /> <property name="maxInMemorySize" value="40960" /></bean>
This is a must, otherwise it will not work.
page:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" session="false" %><html><!-- - Author(s): xieshuang- Date: 2016-06-20 13:46:20- Description:--><head><title>Title</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"/><script src="<%=request.getContextPath()%>/common/nui/nui.js" type="text/javascript"></script><script src="<%=request.getContextPath()%>/common/nui/jquery/jquery-form.js" type="text/javascript"></script><script type="text/javascript" src="<%=request.getContextPath()%>/page4nui/master/projecttype/js/projecttype_import.js"></script><script type="text/javascript"> var contextPath="<%=request.getContextPath()%>";</script></head><body><div id="test" style="padding-top:5px;min-width:300px;min-height:180px;"> <form id="fileUpload" method="post" enctype="multipart/form-data"> <div id="dataImport"> <table > <tr> <th align="right" >Select file: </th> <td> <input id="uploadFile" type="file" name="file"><font style="color:red;width:5%;"> *</font> </td> </tr> </table> </div> <div align="center"> <input iconCls="icon-ok" value="OK" type="submit" /> <span style="display:inline-block;width:25px;"></span> <a iconCls="icon-cancel" onclick="cancel">Cancel</a> </div> </form> </div></body></html>
Core js:
var msg;$(function(){nui.parse();//ajax configuration var options = { url: contextPath+"/webapp/cfProjectType/importExcel", beforeSubmit: showRequest, //Present success: showResponse, //Processing completion resetForm: true, dataType: 'json' }; $('#fileUpload').submit(function() { //Note $(this).ajaxSubmit(options); return false;//Prevent dialog from automatically closing});})//Execute the successful callback function function showResponse(e) { nui.hideMessageBox(msg); if (e.importFlag == true) { CloseWindow("ok"); } else { //Some handling of errors}}//Some verification before submission function showRequest(formData, jqForm, options){ if(formData[0].value=="" || formData[0].value==null){ nui.alert("Please select file"); return false; } var fileName = $("#uploadFile").val().split("//").pop(); var strs = new Array(); //Define an array strs = fileName.split('.'); var suffix = strs [strs .length - 1]; if (suffix != 'xls' && suffix != 'xlsx') { nui.alert("Please select excel file!"); return false; } msg = nui.loading("Loading", "Please waiting");}Java code:
@SuppressWarnings("unchecked")@RequestMapping("/webapp/cfProjectType/importExcel")@ResponseBodypublic Map<String, Object> importExcel(@RequestParam("file") MultipartFile[] files, HttpServletRequest request) throws Throwable { //long starttiem = System.currentTimeMillis(); InputStream fis; fis = null; File fileIn = null; try { for (MultipartFile myfile: files) { if (!myfile.isEmpty()) { String realPath = request.getSession().getServletContext().getRealPath("/export"); fileIn = new File(realPath); //Judge whether the directory where the uploaded file exists if (!fileIn.exists() && !fileIn.isDirectory()) { //Create the directory fileIn.mkdirs(path); } //Copy the uploaded file to the folder myfile.transferTo(new File(path+filename)); } } } }Here I have used another method FileUtils.copyInputStreamToFile(InputStream arg0, File arg1) before, which can also save the file to the path.
For more exciting content, please refer to the special topics "Ajax Upload Technology Summary", "Javascript File Upload Operation Summary" and "JQuery Upload Operation Summary" for learning.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.