关于webuploader插件使用过程遇到的小问题


Posted in Javascript onNovember 07, 2016

本文为大家解决webuploader上传插件如何自定义参数的问题,供大家参考,具体内容如下

大致架构:

 前端:html5+ajax

 后端:java (struts框架相关)

碰到问题:

后台coder给我提供一个接口./file/uploader.do?upFile=?,让我上传文件对应upFile这个参数,前端使用的是webuploader这个上传插件,并不知道这个东西怎么自定义参数。经过各种google,百度,找到以下两种解决方案:

1、接口不需要指明参数,直接用request.getInputStream()二进制的方式来接受上传的文件,但是这里特别注意,需要将webuploader这个配置

sendAsBinary改为true

var uploader = WebUploader.create({
      swf: './js/webuploader/Uploader.swf',
      server: common.BASE_URL_DEV+'/file/upload.do',
      pick: '#picker',
      duplicate: false,
      resize: false,
      auto: true,
      fileNumLimit: 5,
      sendAsBinary:true, //指明使用二进制的方式上传文件
      fileSingleSizeLimit: 5242880,
      //fileType:'rar,zip,doc,xls,docx,xlsx,pdf'
      accept: {
        title: 'intoTypes',
        extensions: 'rar,zip,doc,xls,docx,xlsx,pdf',
        mimeTypes: '.rar,.zip,.doc,.xls,.docx,.xlsx,.pdf'
      }
    });

2、使用common-fileupload这个插件接收,不多说(后端coder自知,提供相关文档一份:https://3water.com/article/94780.htm)

而在网上翻资料的时候看到很多朋友都在问,java后端怎么写?怎么接受参数?这里本人已经实践了一次,为大家做解答,首先感谢我们的后端coder,让我豁然开朗:

当我我给他接口不传参数的时候上传文件,他那里看到的tomcat日志打印出来了三个参数,分别是file,fileContentType,fileFileNamez这三个参数,file这个参数经过调试,是我传过去的文件,然后我们就猜测是不是有一个默认参数叫做“file”,去webuploader这个api中经过搜索证明了我们的猜测是正确的,如下图:

关于webuploader插件使用过程遇到的小问题

果然有一个默认参数叫做"file".....................

至此此问题迎刃而解,贴如下代码:

var uploader = WebUploader.create({
      swf: './js/webuploader/Uploader.swf',
      server: common.BASE_URL_DEV+'/file/upload.do',
      pick: '#picker',
      duplicate: false,
      resize: false,
      auto: true,
      fileNumLimit: 5,
      fileVal:"upload",  //指明参数名称,后台也用这个参数接收文件
      fileSingleSizeLimit: 5242880,
      //fileType:'rar,zip,doc,xls,docx,xlsx,pdf'
      accept: {
        title: 'intoTypes',
        extensions: 'rar,zip,doc,xls,docx,xlsx,pdf',
        mimeTypes: '.rar,.zip,.doc,.xls,.docx,.xlsx,.pdf'
      }
    });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
addRule在firefox下的兼容写法
Nov 30 Javascript
网页中CDATA标记的说明
Sep 12 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
jQuery获取剪贴板内容的方法
Jun 16 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 Javascript
深入理解Node.js中的进程管理
Mar 13 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 Javascript
js正则表达式简单校验方法
Jan 03 Javascript
jQuery webuploader分片上传大文件
Nov 07 #Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 #Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 #Javascript
功能强大的jquery.validate表单验证插件
Nov 07 #Javascript
JS 实现Base64编码与解码实例详解
Nov 07 #Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 #Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 #Javascript
You might like
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
Python中的字典遍历备忘
2015/01/17 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
Python之修改图片像素值的方法
2019/07/03 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
Django Form常用功能及代码示例
2020/10/13 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
2014年助理政工师工作总结
2014/12/19 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
Redis如何实现分布式锁
2021/08/23 Redis
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL