Bootstrap Fileinput Plug-ins to achieve multiple file upload method _javascript skills

*1.bootstrap-fileinput plugin git download address

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

2. Solve using Bootstrap-fileinput to get return value

Upload pictures

$ ("#file -0a"). Fileinput ({
uploadurl: "/upload_img",//upload the URL of the picture
allowedfileextensions: [' jpg ', ' png ', ' gif '] ,
overwriteinitial:false,
maxfilesize:1000,//upload file maximum size
maxfilesnum:1,//upload maximum number
of files Initialcaption: "Please upload the Merchant logo",//text box initial words value
//allowedfiletypes: [' Image ', ' video ', ' Flash '],
slugcallback: function (filename) {return
filename.replace (' ", ' _ '). Replace ('] ', ' _ ');
}
});

Note that after uploading the picture, the return value is written

$ (' #file -0a '). On (' fileuploaded ', function (event, data, Previewid, index) {
var form = data.form, files = Data.files, E Xtra = Data.extra,
response = data.response, reader = Data.reader;
Console.log (response);//print out the returned JSON
Console.log (response.paths);//Print out the Path
});

JSP page

<input id= "file-0a" class= "file" type= "file" multiple
data-min-file-count= "1" name= "Upload_logo" >

where data-min-file-count= "1" refers to the minimum number of file uploads

3. Service-Side code

Spring with a plug-in upload, the framework for 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 formerly:" + Myfile.getoriginalfilename ()); 
Log.info ("========================================");
Upload file return path
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.fo
Rmat (New Date ()); /** * File Upload * * @param srcname * Original file name * @param dirname * Directory name * @param input * To save the import stream * @return return the path you want to save to the database * * Public static string WriteFile (String SrcName, string dirname, InputStream input) throws IOException {Log.info (SrcName);//Remove Upload
directory, which is the virtual directory String Uploaddir = Contextutil.getsysprop ("Upload_dir") configured in Tomcat's Server.xml;/Set you upload path//Remove access path for virtual directory String Virtualdir = Contextutil.getsysprop ("Virtual_dir");/Set your virtual directory access path//rename 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;
Gets the path String Savepath = Filename.replace (Uploaddir, "") that will be saved to the data;
Savepath = Virtualdir + savepath.replace ("\", "/");
File File = new file (filename);
if (!file.getparentfile (). exists ()) {File.getparentfile (). Mkdirs ();}
FileOutputStream fos = new FileOutputStream (file);
30KB byte[] 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 of the problems encountered when uploading

If you meet the click Upload, the progress bar appears as the 100%,jsp page display [object,obejct], then notice whether you return in the background is a JSON object.

The above is a small set to introduce the bootstrap Fileinput plug-ins to achieve multiple file upload method, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!