百度webupload的使用

百度上传工具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:(‘#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的使用相关推荐

扩展webupload插件，增加ui界面
2019独角兽企业重金招聘Python工程师标准>>> 先说说为啥要扩展? webupload是百度团队开源的一块非常优秀的上传插件提供分片.并发.压缩等(http://fex.ba ...
C# ASP.NET MVC 图片上传的多种方式(存储至服务器文件夹，阿里云oss)
图片上传时我们进场用到的一个功能今天将他整理了一下写了个demo希望对大家有用该demo分为如下 1.上传至至服务器文件夹 2.上传至阿里云oss 3.百度webupload上传图片效果图如下: ...
百度上传控件webUPload 的使用
要使用上传控件首先需要引用webuploader的js文件以及css文件,还有对应的image文件具体可以根据使用选择http://fex.baidu.com/webuploader/downloa ...
百度上传插件（webupload）单文件（单图片）上传设置
var uploader = WebUploader.create({//auto : true,swf : '${ctx}/statics/lib/webuploader/0.1.5/Uploade ...
百度上传插件 Web Uploader 使用之单图片上传
java springmvc 使用Web Uploader 上传单张图片今天小组长让我完成一个图片上传的功能,并丢给了我一个百度上传的插件 WebUpload .由于是第一次使用该插件,所以先在本地 ...
webupload 上传插件完美版 - 拿走直接用
由于最近,我们产品web端口 ,涉及批量图片上传(你懂得, 商品嘛,都玩吐了),然后自己写了一个半成品,后来各种体验问题,然后一想那么不是傻么? 这么多上传插件. 然后,那就烂大街的 webupl ...
springboot 集成百度编辑器ueditor
最简单的方式集成百度编辑器 1.下载百度编辑器源码 2. springboot静态资源配置在resources下面.将ueditor的静态资源放入项目中如: 我的资源路径为:/resources/js ...
百度地图android室内定位,百度地图4.0正式发布，主打免费语音导航、室内定位、实时公交和生活搜索 (视频)...
自2010年10月百度地图在塞班平台上线了第一个版本以后,陆续登陆了Android和iPhone平台,据百度地图团队介绍,其最新的用户数已达7000万.今天,百度地图4.0 正式发布(iPhone版 ...
android 调用百度sdk点位当前城市
参考地址: http://lbsyun.baidu.com/index.php?title=android-locsdk/guide/get-location/address 百度的sdk定位 dem ...

百度webupload的使用

百度webupload的使用相关推荐

最新文章

热门文章