项目中需要上传视频,图片等资源.最先做的是上传图片,开始在网上找了一款野鸡插件,可以实现图片上传预览(无需传到后台).但是最近这个插件出了莫名的问题,不易修复,一怒之下,还是决定找个大点的,靠谱的插件吧.加之上传视频就是用的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,图片上传附加参数的更多相关文章

  1. 妈蛋:kinMaxShow旋转木马异常,WebUploader图片上传坑爹,图像被压缩

    今天晚上在改造轮播图. 原来的代码是这种: <div> <img src="${static}/image/index/banner/`.jpg" /> & ...

  2. 妈蛋:kinMaxShow轮播图异常,WebUploader图片上传坑爹,图片被压缩了

    今天晚上在改造轮播图. 原来的代码是这样的: <div> <img src="${static}/image/index/banner/`.jpg" /> ...

  3. 图片上传5-多个图片上传,独立项目Demo和源码

    图片上传,一次性可以上传多个图片,每个图片可以有名字.URL.排序.备注等字段.这是区别于使用百度WebUploader等多图上传工具的地方. 项目相关图片 Jar包管理:Maven用到的框架:Spr ...

  4. 在SAE上使用Ueditor的图片上传功能

    SAE上是没有文件夹读写权限的,所以要在SAE使用Ueditor的图片上传功能须要借助SAE的Storage服务. 一.开通Storage服务 在SAE控制台开通Storage服务,并新增一个doma ...

  5. WebUploader 图片上传控件使用范例

    ​官网 http://fex.baidu.com/webuploader/getting-started.html 其实官网写的挺详细的,看官网也可以了. 引入资源 使用Web Uploader文件上 ...

  6. 百度ueditor vue项目应用 -- 图片上传源码修改

    本文目的有两个,一.废掉单图上传,二.改造多图上传 大家都知道百度ueditor不是针对vue项目开发的,官方文档提供的源码包里有需要后端配置的接口,but到vue项目就不太好办了,网上有些文章也介绍 ...

  7. Ueditor 1.4.3.1 使用 ThinkPHP 3.2.3 的上传类进行图片上传

    在 ThinkPHP 3.2.3 中集成百度编辑器最新版 Ueditor 1.4.3.1,同时将编辑器自带的上传类替换成 ThinkPHP 3.2.3 中的上传类. ① 下载编辑器(下载地址:http ...

  8. [原创]Struts2奇葩环境任意文件上传工具(解决菜刀无法传文件或上传乱码等问题)

    上面这问题问得好  1 不知道大家有没碰到有些Strus2站点  上传JSP后访问404 或者503    注意我说的是404或503不是403(要是403换个css/img等目录或许可以)    但 ...

  9. input file实现多选,限制文件上传类型,图片上传前预览功能

    限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...

随机推荐

  1. Spring MVC入门知识总结

    2.1.Spring Web MVC是什么 Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职 ...

  2. leetcode 169

    169. Majority Element Given an array of size n, find the majority element. The majority element is t ...

  3. PIC32MZ tutorial -- Key Debounce

    Today I accomplish a application on PIC32MZ EC Starter Kit. The feature of application is to light u ...

  4. GBDT基本理论及利用GBDT组合特征的具体方法(收集的资料)

    最近两天在学习GBDT,看了一些资料,了解到GBDT由很多回归树构成,每一棵新回归树都是建立在上一棵回归树的损失函数梯度降低的方向. 以下为自己的理解,以及收集到的觉着特别好的学习资料. 1.GBDT ...

  5. jenkins+findbugs

    1)  Jenkins安装findbugs插件 具体安装步骤:在主页面进入系统管理 选择插件管理 在过滤器中找出要安装的插件,并进行安装(Static Analysis Utilities.findb ...

  6. Action类中获取request等对象的方法

    struts2中的action类中,SevletActionContext可以获取

  7. Windows 设置扩展投影鼠标移出方向

    1. 连接数据线,按下 “WINDOWS” + P 按钮,选择“扩展投影”: 2.更改鼠标移出屏幕的方向:桌面右键选择“屏幕分辨率” , 移动“更改显示器外观”中两个图的相对方向即可:

  8. c++之socket,阻塞模式

    这里描述下socket的阻塞模式: 首先,socket有几个函数 socket() 创建socket bind() 绑定socket到一个地址 listen() 开启soket监听 accept()  ...

  9. Win8 x64环境下VS2010 C#工程运行报错:没有注册类 (异常来自 HRESULT:0x80040154

    来源:http://blog.sina.com.cn/s/blog_7095482001019c2v.html 问题描述: 在Win8 x64环境下,VS2010的C#工程中引用了COM组件(Acti ...

  10. 【Java学习笔记】Map借口的子接口----HashMap

    存储在HashMap集合中的元素,必须覆盖hashCode和equals方法(与HashSet类似)   import java.util.HashMap; import java.util.Iter ...