百度上傳工具webuploader,圖片上傳附加參數

        項目中須要上傳視頻,圖片等資源.最早作的是上傳圖片,開始在網上找了一款野雞插件,能夠實現圖片上傳預覽(無需傳到後臺).可是最近這個插件出了莫名的問題,不易修復,一怒之下,仍是決定找個大點的,靠譜的插件吧.加之上傳視頻就是用的webuploader,因此上傳圖片也理所固然選它了.

插件初始化,js引用什麼的,官方文檔上都寫的比較清楚,建議直接去官方api去看

http://fex.baidu.com/webuploader/getting-started.html#圖片上傳

        官方api上值給出了上傳單個圖片文件的demo,但實際項目開發中,圖片上傳都是裹挾在表單中的,也就是說不只要上傳圖片文件,還須要上傳一些輸入框的值.若是所以去調屢次後臺接口,顯得麻煩了.

<div id="imgPicker"></div>

<Img src="" id="previewImg">

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

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

<button id="submitBtn">點擊提交</button>

咱們在html中聲明兩個標籤,imgPicker用來作上傳圖片用,而previewImg用來作預覽圖片用

1.初始化插件:

var uploader=Webuploader.create({

      auto:false,  //這裏咱們設置不自動上傳,true則爲自動上傳

      swf:'uploader.swf',

      server:'192.168.1.123:8888/user/register', //文件提交的服務器地址

      picker:'#imgPicker',

　　fileVal:'userAvatar',//此屬性是你提交的圖片的name屬性值,至關於<input type="file" name="userAvatar">,若是不設置,系統有默認值

      accept:{

          extensions:'gif,jpg,jpeg,png',//可接受的文件後綴名

          mimeTypes:'image/*'

      }

 

})

2.圖片添加進來的時候進行預覽

uploader.on( 'fileQueued', function( file ) { // 建立縮略圖 // 若是爲非圖片文件，能夠不用調用此方法。 // thumbnailWidth x thumbnailHeight 爲 100 x 100 uploader.makeThumb( file, function( error, src ) { if ( error ) { $img.replaceWith('<span>不能預覽</span>'); return; } $('#imgPreview').attr( 'src', src ); }, thumbnailWidth, thumbnailHeight ); });
3.點擊提交按鈕,咱們這裏要上傳圖片,以及兩個text輸入框的值到服務器
$('#submitBtn).on('click',function(){
　　uploader.option('formData',{
　　　　userName:$('#userName').val(),
　　　　userAge:$('#userAge').val()
　　})
　　　　//添加完須要與圖片一塊兒上傳的參數以後,就能夠手動觸發uploader的上傳事件了.
　　　　uploader.upload();
})
4.uploader有一個success方法,監聽上傳成功的事件.返回函數有兩個對象,file(文件信息),response(你調用的接口的返回參數)
uploader.on('uploadSuccess',function(file,response){
　　if(response.code=='success'){
　　　　//這裏作你須要作的操做
　　}
})

今天我在上傳的時候遇到一個奇怪的問題,uploader上傳了一個id屬性到後臺,id的默認值貌似是web_suf_0,而後後臺的spring mvc就報錯了,在java文件的接口中打了斷點,可是根本不能進入斷點.
而後後臺的同事解釋說,id是不能傳非數值型的.因而我在formData那裏作了這樣的操做:id:1.我想,是否是手動將id變動爲一個數值就好了呢,答案是否認的.
因而我只好去webuploader.js文件中,找到一個getID()的方法,將id的默認值的prefix改成'',便可.

更多關於webuploader的信息,請查看官方文檔:http://fex.baidu.com/webuploader/doc/index.html