Angularjs+bootstrap to realize multi-file uploading and management _javascript skills

Recently a project needs to achieve multiple file upload and management, and the project is based on bootstrap development, so check some bootstrap file upload Plug-ins, finally found or bootstrap-fileinput most beautiful, The plug-in can achieve the upload and management of multiple files (plug-in official address: Http://plugins.krajee.com/file-input), the specific effect is as follows:

(Bootstrap-fileinput is not limited to image upload, can also achieve file upload, but the thumbnail image is easy to identify, here to upload as an example)

The basic operation of the plug-in can refer to: JS file on the bootstrap Fileinput detailed, this article is mainly for the management of multiple files.

Before talking about how to use the plug-in, let's talk about the project's requirements on picture management:

1, can upload multiple pictures

2. The picture information is saved to the database only when you click the Save button.

3, can load the picture information that has been saved to the database, and provide the deletion function

Therefore, we can specify several file states:

selected: has been placed in the plug-in, but has not been uploaded to the server. As shown in the 3rd picture above, there is an upload button underneath the picture.

uploaded: Upload to server, but picture information not saved to database. As shown in the 2nd picture above, there is a 100% progress bar below the picture.

Saved: picture information has been saved to the image of the database, as shown in the 1th picture above, these pictures have the delete button below, click Delete will be deleted picture information from the database.

I. Introduction of necessary documents

<link href= "<%=path%>/static/css/bootstrap-3.3.5/bootstrap.min.css" rel= "stylesheet" >
<link href= "<%=path%>/static/css/bootstrap-3.3.5/fileinput.css" rel= "stylesheet" >

<script src= "<%=" Path%>/static/js/jquery-1.11.3.js "></script>
<script src=" <%=path%>/static/js/ Angularjs-1.3.9/angular.min.js "></script>
<script src=" <%=path%>/static/js/ Bootstrap-3.3.5/bootstrap.min.js "></script>
<script src=" <%=path%>/static/js/ Bootstrap-3.3.5/fileinput.js "></script>
<script src=" <%=path%>/static/js/bootstrap-3.3.5/ Fileinput_locale_zh.js "></script>

Where Fileinput.js and Fileinput_locale_zh.js are in the plug-in to the official package, Angular.min.js and bootstrap.min.js are not much introduced

Two, multiple file upload

First, define the file control in the page:

<input id= "input-images" type= "file" multiple class= "file-loading" accept= "image/*" >

The control is then initialized to enable multiple file uploads of the component:

 $ ("#input-images"). Fileinput ({
  uploadurl: "<%=path%>" + "/album/picturefileupload",
  Allowedfileextensions: ["JPG", "png", "GIF"],
  resizepreference: ' Height ',
  maxfilecount:10,
  language: ' En ',
  overwriteinitial:false,
  resizeimage:true,
  });

Of course, the initialization of a lot of properties, here is not one, the background code (using Jfinal) is as follows:

 public void Picturefileupload () {
 UploadFile uploadfile = GetFile ();
 Renderjson ("{\" Link\ ":" + "\"/fileinput/upload/"+ uploadfile.getfilename ()
 +" "" + ", \" filename\ ": \" "+ Uploadfile.getoriginalfilename ()
 + "\"});
 

Note that finally you must return JSON, even if you return an empty JSON string ("{}"), and the value returned is saved in the foreground data.response.

Iii. loading and deletion of existing documents

The loading of an existing file means that the file already exists on the server is displayed in the control to achieve file management and provide deletion, which depends primarily on the Initialpreview implementation.

After obtaining the file name and file address on the server, use Initialpreview and initialpreviewconfig to complete the load and define the deletion operation:

var initpreview = new Array ()//Show element
 var initpreviewconfig = new Array ()//Show Settings
 
 $.post (
 "<%=path%>" + '/album/getpicsbyalbum ', 
 {albumid:albumid}, 
 function (result) {for
 (var i=0;i<result.length;i++) {
 var picturefile = result[i];
 Used to show uploaded pictures
  initpreview.push (" 
 

Click the delete icon, will default to the config in the key value to the background, the definition of Deletepicbyid in the background can be:

 public void Deletepicbyid () {
 String picid = Getpara ("key");
 Service.deletepicbyid (integer.valueof (picid));
 Renderjson ("{}");
 }

Iv. answers to some questions

1, why the model does not have attributes, but can be displayed in front of the relevant properties?
Here The main use of the jfinal ActiveRecord function, no need to define attributes and Setter,getter methods, property values are mapped in the model Attrs, this property is <key, value> key-value pairs, The key value is the field name of the database. Special Reminder: Although the SQL statement does not partition case, but the field name is still a case, if the field name is uppercase, then the key mapped to model is uppercase, and Jfinal's default ID key strategy also can not be effective, need to Configplugin, as follows: arp.addmapping ("Pictures", "ID", Picture.class), we recommend that you name the database fields according to the Java naming conventions.

2, (reference code) in the initialization of Fileinput Why do you want to perform the clear,destory operation?

Because the Fileinput plug-in in the selection of files, whether or not upload, will retain the file in the Files field, so click on the display of the last selected file, does not meet the needs of multiple album management, the original thought clear operation can empty the file domain (the official document said), However, the actual operation found that it was not emptied, so the clear,destory file upload control is not initialized until the call is completed. (This is not very sure, I hope the Great God can guide)

3, save how to know those pictures need to save the database, this is based on what implementation?

There is a selectedpics array on the $scope that is responsible for saving the final files that are saved to the database. When a file is selected, the selected file information is saved to this array, but the Hasupload property is false, and after the file is uploaded, the corresponding Hasupload is modified to true; the deletion (not yet saved to the database) removes the corresponding element from the array after the upload succeeds. Some people will ask, that select files do not upload direct Delete, that file information will not occupy the position of the data to cause elements of confusion? In fact, in the Fileuploaded event, which pictures have been hasupload, is to directly change the value of the array corresponding to the position element, and the array coordinates are obtained by the Data-fileindex attribute value of the div in the picture, the value will always increase, Does not replace the vacancy value, does not change because of the deletion of the picture, exactly corresponds to the selectedpics array.
var idx = $ ("#" +previewid). attr ("Data-fileindex");
For example I chose 3 pictures, at this time did not upload, they in turn data-fileindex as 0,1,2, when I deleted the middle of the picture and select new pictures, then their data-fileindex will become 0,2,3.

V. Code reference
finally I learned Angularjs, code writing is not proficient, if there is something wrong, welcome to leave a message, sample code at the end of the article, the database script for Files.sql (MySQL), we read more code.

SOURCE Download: Http://xiazai.jb51.net/201611/yuanma/BSfileinput (jb51.net). rar

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.