項目中需要上傳視頻,圖片等資源.最先做的是上傳圖片,開始在網上找了一款野雞插件,可以實現圖片上傳預覽(無需傳到后台).但是最近這個插件出了莫名的問題,不易修復,一怒之下,還是決定找個大點的,靠譜的插件吧.加之上傳視頻就是用的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