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

  1. uploader.on( 'fileQueued', function( file ) {
  2. // 创建缩略图
  3. // 如果为非图片文件,可以不用调用此方法。
  4. // thumbnailWidth x thumbnailHeight 为 100 x 100
  5. uploader.makeThumb( file, function( error, src ) {
  6. if ( error ) {
  7. $img.replaceWith('<span>不能预览</span>');
  8. return;
  9. }
  10. $('#imgPreview').attr( 'src', src );
  11. }, thumbnailWidth, thumbnailHeight );
  12. });
    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'){
        //这里做你需要做的操作
      }
    })
  13. 今天我在上传的时候遇到一个奇怪的问题,uploader上传了一个id属性到后台,id的默认值貌似是web_suf_0,然后后台的spring mvc就报错了,在java文件的接口中打了断点,但是根本不能进入断点.
    然后后台的同事解释说,id是不能传非数值型的.于是我在formData那里做了这样的操作:id:1.我想,是不是手动将id变更为一个数值就行了呢,答案是否定的.
    于是我只好去webuploader.js文件中,找到一个getID()的方法,将id的默认值的prefix改为'',即可.
  14. 更多关于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. ios base64图片上传失败问题

    今天做图片上传,后台用的是base64解密图片二进制文件,以前都是用表单上传来解决图片上传的,现在后台没有人改,所以研究下base64上传. 需要将图片base64加密,但是调用 [data base ...

  2. javascript垃圾回收机制

    js中垃圾回收的算法一般包括两种,一种是“清除标记”,另一种是“引用计数”,现在较为流行的是第一种. “引用计数”现在基本已经被抛弃,主要原因是会导致循环引用,从而导致严重的问题(ie9之前的版本DO ...

  3. Oracle 数据整理

    /* 大数据这块用到了 Oracle ... 记录一下. */ SELECT ssn,password FROM (Select ROWNUM AS ROWNO, T.* from ACCOUNT T ...

  4. avalon2学习教程09循环操作

    avalon2的循环指令的用法完全改变了.avalon最早期从knockout那样抄来ms-each,ms-with,分别用于数组循环与对象循环.它们都是针对元素内容进行循环.后来又从angular那 ...

  5. Redis安装及主从配置

    一.何为Redis redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合)和zset(有 ...

  6. Android-ConvenientBanner轻松实现广告头效果

    Android-ConvenientBanner通用的广告栏控件,让你轻松实现广告头效果.支持无限循环, 可以设置自动翻页和时间(而且非常智能,手指触碰则暂停翻页,离开自动开始翻页. 你也可以设置在界 ...

  7. struts2各个jar包的作用

    ---------------------------------------------------struts2核心jar包------------------------------------ ...

  8. nullcon HackIM2016 -- Programming Question 3

    Still Hungry and unsutisfied, you are looking for more. Some more, unique un heard dishes. Then you ...

  9. AndroidStudio调试APP

    AndroidStudio调试APP 电脑用数据线连上手机 开启手机的开发者模式 注:通常连续狂点手机的版本号即可显示出开发者选项,然后进入菜单,勾选开发者选项.USB调试. 给程序加断点 单击调试按 ...

  10. delphi之多线程编程

    本文的内容取自网络,并重新加以整理,在此留存仅仅是方便自己学习和查阅.所有代码均亲自测试 delphi7下测试有效.图片均为自己制作. 多线程应该是编程工作者的基础技能, 但这个基础我从来没学过,所以 ...