Here's an example with Bootstrap 3.0 's upload control.
The following is a complete JS operation code for the upload control.
<!--upload thumbnail control configuration-
<script>
These four global variables are defined in order to save 4 images of the UUID in the callback function each time the save is overwritten by the name of the previous one can be repeated to add the final results saved in the library
Window. Picture1= "";//global variables for Carousel Figure 1
Window. Picture2= "";//global variables for Carousel Figure 2
Window. Picture3= "";//global variables for Carousel Figure 3
Window. Thumbnail= "";//global variables for thumbnails
A real-time judgment to make sure that each thumbnail is only explicitly one image
function Reuploadthumbnails () {//reload thumbnail
var filepreview=document.getelementsbyclassname (' File-preview-thumbnails ');
var fileframs=filepreview[0].getelementsbyclassname (' File-preview-frame ');
var delinitpic=filepreview[0].getelementsbyclassname (' file-preview-initial ');
var a = $ (' div.file-preview-initial ')
A.hide ();
Console.log ("Number of pictures" +fileframs.length);
if (fileframs.length>=2) {//A real-time judgment ensures that each thumbnail is only explicitly one image
var self=fileframs[0];
var parent = self.parentelement;
Delete:
var removed = Parent.removechild (self);
Console.log (removed = = = self); True
}
}
$ ("#thumbnailPic"). Fileinput ({
Language: ' zh ',//Set language
/* Uploadurl: ' uploadfiles/uploadfarmdefpics ', */
Uploadurl: ' Farmlandlanddef/uploadfarmlanddetailpics?kind=thumbnail ',
Allowedfileextensions: [' jpg ', ' png ', ' gif '],
Overwriteinitial:false,
Initialpreviewcount:1,
Showcaption:false,//whether the title of the file is displayed. Default Value True
Browseclass: "Btn btn-primary",//button style
Initialpreviewshowdelete:true,
maxfilecount:1,//Maximum number of uploads
maxfilesize:400,
Maxfilesnum:1,
Initialpreview: "Please on the crop growth cycle chart, support drag and drop image upload",//Configuration preview of the interface can be IMG text or other
Slugcallback:function (filename) {
Reuploadthumbnails ();//guarantee only one thumbnail picture
Return Filename.replace (' (', ' _ '). Replace ('] ', ' _ ');
}
});
Note that there is a preview feature of the upload control binding callback event name and no preview function is not the same
$ ("#thumbnailPic"). On ("fileuploaded", function (event, data, Previewid, index) {
Console.log (data.files[0][' name ');
Console.log (data);
var path= ' http://127.0.0.1:8080/img/uploadFarmdefThumbnailPics/';
var Jsonarray = eval ("(" +data.jqxhr.responsetext+ ")"); To convert a JSON string to a JSON object
var uuid =jsonarray.uuid;
Window. Thumbnail=uuid;
if (window. Thumbnail!= "") {
$ ("#thumbnailImg1"). Tips ({
Side:2,
msg: ' Picture uploaded successfully! ‘,
BG: ' #AE81FF ',
Time:2
});
}
});
$ ("#thumbnailPic"). On ("Fileuploaderror", function (event, data, Previewid, index) {
Alert ("Fileuploaderror");
var errmsg=$ ("Div.content div.shang_box div#uploadcontainer Div.file-preview div.file-error-message li"). Text ();
var str= "[Object Object]";//note there are spaces
var arr=errmsg.split (":");
var name=arr[arr.length-1];
if (str = = name) {
errmsg= "Upload address path configuration Error! ";
}
Console.log (' msg=== ' +errmsg);
$ ("#thumbnailImg1"). Tips ({
Side:2,
Msg:errmsg,
BG: ' #AE81FF ',
Time:2
});
});
$ ("#thumbnailPic"). On ("fileloaded", function (event, data, Previewid, index) {
var f = document.getElementById (' Thumbnailpic '). Files[0];
var src = window. Url.createobjecturl (f);
document.getElementById (' thumbnailImg1 '). src = src;
});
</script>
Some examples of JS callback functions