百度上传工具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
百度上传工具webuploader,图片上传附加参数的更多相关文章
- 妈蛋:kinMaxShow旋转木马异常,WebUploader图片上传坑爹,图像被压缩
今天晚上在改造轮播图. 原来的代码是这种: <div> <img src="${static}/image/index/banner/`.jpg" /> & ...
- 妈蛋:kinMaxShow轮播图异常,WebUploader图片上传坑爹,图片被压缩了
今天晚上在改造轮播图. 原来的代码是这样的: <div> <img src="${static}/image/index/banner/`.jpg" /> ...
- 图片上传5-多个图片上传,独立项目Demo和源码
图片上传,一次性可以上传多个图片,每个图片可以有名字.URL.排序.备注等字段.这是区别于使用百度WebUploader等多图上传工具的地方. 项目相关图片 Jar包管理:Maven用到的框架:Spr ...
- 在SAE上使用Ueditor的图片上传功能
SAE上是没有文件夹读写权限的,所以要在SAE使用Ueditor的图片上传功能须要借助SAE的Storage服务. 一.开通Storage服务 在SAE控制台开通Storage服务,并新增一个doma ...
- WebUploader 图片上传控件使用范例
官网 http://fex.baidu.com/webuploader/getting-started.html 其实官网写的挺详细的,看官网也可以了. 引入资源 使用Web Uploader文件上 ...
- 百度ueditor vue项目应用 -- 图片上传源码修改
本文目的有两个,一.废掉单图上传,二.改造多图上传 大家都知道百度ueditor不是针对vue项目开发的,官方文档提供的源码包里有需要后端配置的接口,but到vue项目就不太好办了,网上有些文章也介绍 ...
- Ueditor 1.4.3.1 使用 ThinkPHP 3.2.3 的上传类进行图片上传
在 ThinkPHP 3.2.3 中集成百度编辑器最新版 Ueditor 1.4.3.1,同时将编辑器自带的上传类替换成 ThinkPHP 3.2.3 中的上传类. ① 下载编辑器(下载地址:http ...
- [原创]Struts2奇葩环境任意文件上传工具(解决菜刀无法传文件或上传乱码等问题)
上面这问题问得好 1 不知道大家有没碰到有些Strus2站点 上传JSP后访问404 或者503 注意我说的是404或503不是403(要是403换个css/img等目录或许可以) 但 ...
- input file实现多选,限制文件上传类型,图片上传前预览功能
限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...
随机推荐
- IMX6 PCA9698应用层读写库
.c #include <stdio.h> #include <string.h> #include <linux/types.h> #include <st ...
- Slider.js轻量级图片播放控件
Slider.js基于HTML5和CSS3实现的Slideshow 1.Slider.js 是一个图片播放Slideshow引擎,采用jQuery.CSS3和HTML5 canvas技术实现. 2.可 ...
- 3dsMax脚本插件开发之路
经过这两个月的努力,RDF2.1的升级开发已经基本完成,只待过些天正式发布.所以现在总算有时间思考,来整理一下自己的思路,以及今后的方向. 回顾当初,1.0是纯Maxscript编写的,一机一码的方式 ...
- Servlet的异常处理
Servlet 异常处理 当一个 Servlet 抛出一个异常时,Web 容器在使用了 exception-type 元素的 web.xml 中搜索与抛出异常类型相匹配的配置. 您必须在 web.xm ...
- mongodb固定集合,建立管理员安全验证
建立普通集合 db.createCollections aaa; 建立固定集合名称book capped true 固定集合 size大小 max:文档数量 db.createCollection(& ...
- centos环境下使用percona-xtrabackup对mysql5.6数据库innodb和myisam进行快速备份及恢复
centos环境下使用percona-xtrabackup对mysql5.6数据库innodb和myisam进行快速备份及恢复 有时候我们会碰到这样的业务场景: 1.将大的数据库恢复到本地进行业务测试 ...
- Brn系列网上商城数据库说明文档
单店版BrnShop_1.9.351数据字典:点击下载 多店版BrnMall_1.9.496数据字典:点击下载 有对网上商城程序设计感兴趣的朋友,欢迎加入QQ群:235274151,大家可以交流下!
- Vc++ 控件用法总结之List Control
1.新建对话框MFC,在对话框上放一个ListCtrl ID:IDC_PATH View:Report 2.为ListCtrl添加变量 右击->添加变量m_wndPath 3.找到OnInitD ...
- vnc
Xvnc, Xvnc-core, vncagent, vncinitconfig, vnclicense, vnclicensehelper, vnclicensewiz, vncpasswd, vn ...
- C++和C#混合编程
最近需要利用C++和C#混合编程,然后就写了一个C#调用C++生成的DLL的DEMO.困扰我好久的就是C#中string类型在C++里面怎么表达,现在把C++生成DLL供C#调用的流程写出来. 源码: ...