百度上传工具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