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

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

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

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

官方api上值給出了上傳單個圖片文件的demo,但實際項目開發中,圖片上傳都是裹挾在表單中的,也就是說不僅要上傳圖片文件,還需要上傳一些輸入框的值.如果因此去調多次后臺接口,顯得麻煩了.

點擊提交

我們在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屬性值,相當于,如果不設置,系統有默認值

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(‘不能預覽‘);
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

總結

以上是生活随笔為你收集整理的百度webupload的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。