*1.bootstrap-fileinput plug-in git download address
https://github.com/kartik-v/bootstrap-fileinput.git
2. Solve the use of bootstrap-fileinput to get the return value
Upload pictures
$("#file-0a").fileinput({uploadUrl : "/upload_img",//Uploaded the urlallowedFileExtensions for uploading the image: [ 'jpg', 'png', 'gif' ],overwriteInitial : false,maxFileSize : 1000,//Uploaded the maximum size of the file maxFilesNum : 1,//Uploaded the maximum number of files initialCaption: "Please upload the merchant logo",//The initial text box value//allowedFileTypes: ['image', 'video', 'flash'],slugCallback : function(filename) {return filename.replace('(', '_').replace(']', '_');}});Note that after uploading the image event, get the return value writing method
$('#file-0a').on('fileuploaded', function(event, data, previewId, index) {var form = data.form, files = data.files, extra = data.extra, response = data.response, reader = data.reader;console.log(response);//Print out the returned jsonconsole.log(response.paths);//Print out the path});jsp page
<input id="file-0a" type="file" multipledata-min-file-count="1" name="upload_logo">
where data-min-file-count=”1” refers to the minimum number of files uploaded
3. Server code
Use spring's own plug-in to upload, the framework is Springmvc
Bean
import java.util.List;public class Picture {private List<String> paths;public List<String> getPaths(){return paths;}public void setPaths(List<String> paths){this.paths = paths;} }Controller
@ResponseBody@RequestMapping(value="upload_img",method=RequestMethod.POST)public Picture uploadImage(@RequestParam MultipartFile[] upload_logo) throws IOException{log.info("Upload picture");Picture pic = new Picture();List<String> paths = new ArrayList<String>();String dir = UploadUtil.getFolder();for(MultipartFile myfile : upload_logo){ if(myfile.isEmpty()){ log.info("File not uploaded"); }else{ log.info("File length: " + myfile.getSize()); log.info("File type: " + myfile.getContentType()); log.info("File name: " + myfile.getName()); log.info("File name: " + myfile.getOriginalFilename()); log.info("=================================================================================================================================================================================================================================================================================================================================================================================================== UploadUtil.writeFile(myfile.getOriginalFilename(), dir, myfile.getInputStream());log.info("File path:"+path);paths.add(path);} } pic.setPaths(paths);return pic;}uploadUtil
private static final Logger log = LoggerFactory.getLogger(UploadUtil.class); private UploadUtil() {}private static SimpleDateFormat fullSdf = new SimpleDateFormat("yyyyMMddHHmmssSSS"); private static SimpleDateFormat folder = new SimpleDateFormat("yyyy" + File.separator + "MM" + File.separator + "dd");/*** Return to yyyy File.separator MM File.separator dd format string * * @return*/public static String getFolder() {return folder.format(new Date());}/*** File upload* * @param srcName* Original file name* @param dirName* Directory name* @param input* Input stream to be saved* @return Return the path to be saved to the database*/public static String writeFile(String srcName, String dirName, InputStream input) throws IOException {log.info(srcName);// Take out the uploaded directory, this directory is the virtual directory configured in tomcat's server.xml String uploadDir = ContextUtil.getSysProp("upload_dir");//Set the upload path//Fetch the access path of the virtual directory String virtualDir = ContextUtil.getSysProp("virtual_dir");//Set the access path of your virtual directory//Rename the file if (null != srcName) {srcName = srcName.substring(srcName.indexOf("."));} else {srcName = ".jpg";}String filename = "";// Get the file path to upload filename = uploadDir + File.separator + dirName + File.separator + fullSdf.format(new Date()) + srcName;// Get the path to be saved to the data String savePath = filename.replace(uploadDir, "");savePath = virtualDir + savePath.replace("//", "/");File file = new File(filename);if (!file.getParentFile().exists()) {file.getParentFile().mkdirs();}FileOutputStream fos = new FileOutputStream(file);// Once 30kbbyte[] readBuff = new byte[1024 * 30];int count = -1;while ((count = input.read(readBuff, 0, readBuff.length)) != -1) {fos.write(readBuff, 0, count);}fos.flush();fos.close();input.close();return savePath;}4. Solve some problems encountered during uploading
If you encounter a click to upload, the progress bar is displayed as 100%, and the jsp page shows [Object,obejct], then pay attention to whether the returned json object you are in the background.
The above is the method of Bootstrap's fileinput plug-in to implement multiple files uploads that the editor has introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!