关于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 相关文章推荐
javascript iframe中打开文件,并检测iframe存在否
Dec 28 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
Jan 29 Javascript
js实现单一html页面两套css切换代码
Apr 11 Javascript
JavaScript splice()方法详解
Sep 22 Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
原生JavaScript实现换肤
Feb 19 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引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
wordpress网站转移到本地运行测试的方法
2017/03/15 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
jqTransform美化表单
2015/10/10 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
JS判断用户用的哪个浏览器实例详解
2018/10/09 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
wxPython中文教程入门实例
2014/06/09 Python
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
教职工代表大会主持词
2014/04/01 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
医学求职自荐信
2014/06/21 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
工会积极分子个人总结
2015/03/03 职场文书
资料员岗位职责范本
2015/04/13 职场文书
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers