百度webupload的使用

ゝ一纸荒年。 2022-07-18 11:56 329阅读 0赞

百度上传工具webuploader,图片上传附加参数

项目中需要上传视频,图片等资源.最先做的是上传图片,开始在网上找了一款野鸡插件,可以实现图片上传预览(无需传到后台).但是最近这个插件出了莫名的问题,不易修复,一怒之下,还是决定找个大点的,靠谱的插件吧.加之上传视频就是用的webuploader,所以上传图片也理所当然选它了.

插件初始化,js引用什么的,官方文档上都写的比较清楚,建议直接去官方api去看

[http://fex.baidu.com/webuploader/getting-started.html\#][http_fex.baidu.com_webuploader_getting-started.html]图片上传

官方api上值给出了上传单个图片文件的demo,但实际项目开发中,图片上传都是裹挟在表单中的,也就是说不仅要上传图片文件,还需要上传一些输入框的值.如果因此去调多次后台接口,显得麻烦了.

![Image 1][]

点击提交

我们在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][http_fex.baidu.com_webuploader_doc_index.html]

[http_fex.baidu.com_webuploader_getting-started.html]: http://fex.baidu.com/webuploader/getting-started.html#
[Image 1]: 
[http_fex.baidu.com_webuploader_doc_index.html]: http://fex.baidu.com/webuploader/doc/index.html