Baidu Upload Tool Webuploader, image upload additional parameters

The project needs to upload videos, pictures and other resources. The first thing to do is to upload pictures, began to find a pheasant plug-in online, you can achieve image upload preview (no need to upload to the background). But recently this plugin out of inexplicable problem, not easy to repair, rage, or decided to find a big point, A reliable plugin. Plus the upload video is the use of webuploader, so upload pictures also take it for granted.

Plug-in initialization, JS citation, the official documents are relatively clear, it is recommended to go directly to the official API to see

http://fex.baidu.com/webuploader/getting-started.html# image Upload

The official API value gives the demo to upload a single picture file, but the actual project development, the picture upload is in the form, that is, not only to upload the picture file, but also need to upload some input box values. If you have to adjust the background interface so many times, it seems troublesome.

<div id= "Imgpicker" ></div>

<input type= "text" name= "UserName" id= "UserName" >

<input type= "text" name= "Userage" id= "Userage" >

<button id= "SUBMITBTN" > click Submit </button>

We declare two tags in html, imgpicker is used for uploading images, and previewimg is used for previewing images.

1. Initialize the plugin:

var uploader=webuploader.create ({

Auto:false,//Here we set not automatically upload, true is automatic upload

SWF: ' uploader.swf ',

Server: ' 192.168.1.123:8888/user/register ',//file-submitted servers address

Picker: ' #imgPicker ',

Fileval: ' Useravatar ',//This property is the name attribute value of the picture you submitted, equivalent to <input type= "file" Name= "Useravatar", if not set, the system has a default value

accept:{

Extensions: ' gif,jpg,jpeg,png ',//acceptable file suffix name

Mimetypes: ' image/* '

}

})

2. Preview when the image is added

Uploader. on( ' filequeued ', function( file) { //Create thumbnail image//If it is a non-picture file, you can not call this method. //Thumbnailwidth x thumbnailheightUploader.Makethumb( file, function( Error, src) { if( Error) { $img.replacewith(' <span> cannot preview </span> '); return; } $ (' #imgPreview ').attr( ' src ', src); }, Thumbnailwidth, Thumbnailheight);});
3. Click the Submit button, we want to upload a picture here, and two text input box value to the server
$ (' #submitBtn). On (' click ', Function () {
uploader.option (' FormData ', {
username:$ (' #userName '). Val (),
userage:$ (' #userAge '). Val ()
})
//After adding the parameters that need to be uploaded with the image, you can manually trigger the uploader upload event.
uploader.upload ();
})
4.uploader There is a success method that listens for successful upload events. The return function has two objects, file (document information), response (return parameter of the interface you call)
uploader.on (' uploadsuccess ', function (file,response) {
if (response.code== ' success ') {
//Do the actions you need to do here
}
})

today, I encountered a strange problem in the upload, uploader uploaded an id attribute to the background, the default value of ID seems to be web_suf_0, then the background of Spring MVC error, in the Java file interface to break points, but can not enter the breakpoint.
then the backstage colleagues explained that the ID is not to pass the non-numeric type. So I did this in Formdata: Id:1. I think, is not to manually change the ID to a number on the line, the answer is negative.
so I had to go to the Webuploader.js file, find a GetID () method, the ID of the default value of prefix to "", you can.

For more information on Webuploader, please see the official documentation:http://fex.baidu.com/webuploader/doc/index.html 

Baidu Upload Tool Webuploader, image upload additional parameters