The fileinput plug-in of Bootstrap implements the Multifile upload method, bootstrapfileinput

The fileinput plug-in of Bootstrap implements the Multifile upload method, bootstrapfileinput

* 1. bootstrap-fileinput plug-in git

Https://github.com/kartik-v/bootstrap-fileinput.git

2. Solve the Problem of using bootstrap-fileinput to get the return value.

Upload images

$ ("# File-0a "). fileinput ({uploadUrl: "/upload_img", // urlallowedFileExtensions: ['jpg ', 'png', 'gif'], overwriteInitial: false, maxFileSize: 1000, // maximum size of the uploaded file maxFilesNum: 1, // initialCaption: "please upload the business logo", // the initial value of the text box // allowedFileTypes: ['image', 'video', 'flash'], slugCallback: function (filename) {return filename. replace ('(','_'). replace (']', '_') ;}});

Note that after uploading an image event, you can get the return value.

$ (# 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 the returned jsonconsole. log (response. paths); // print the output path });

Jsp page

<input id="file-0a" class="file" type="file" multipledata-min-file-count="1" name="upload_logo">

Data-min-file-count = "1" indicates the minimum number of uploaded files.

3. server code

Use the built-in spring plug-in for 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 image"); 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 ("========================================== = "); // String path = 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");/*** returns 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 returns the path to be saved to the database */public static String writeFile (String srcName, string dirName, InputStream input) throws IOException {log.info (srcName); // retrieve the uploaded Directory, which is the tomcat server. string uploadDir = ContextUtil. getSysProp ("upload_dir"); // sets your upload path // retrieves the access path of the virtual directory String virtualDir = Conte XtUtil. 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 =" "; // obtain the File path to be uploaded: filename = uploadDir + File. separator + dirName + File. separator + fullSdf. format (new Date () + srcName; // obtain the path String savePath = filename to be saved to the data. replace (uploadDir, ""); savePath = virtualDir + savePath. replace ("\", "/"); File file = new File (filename); if (! File. getParentFile (). exists () {file. getParentFile (). mkdirs ();} FileOutputStream fos = new FileOutputStream (file); // 30 kbbyte [] readBuff = new byte [1024*30] at a time; 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 upload

If the progress bar is 100% and the jsp page displays [Object, obejct] After you Click Upload, check whether the returned result is a json Object.

The above section describes how to upload multiple files using the Bootstrap fileinput plug-in. I hope it will be helpful to you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!