关于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 读取图片文件的大小
Jun 25 Javascript
javascript常用方法总结
May 14 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
微信小程序 页面跳转如何实现传值
Apr 05 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
Vue仿支付宝支付功能
May 25 Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 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集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
js断点调试经验分享
2017/12/08 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
Python 开发Activex组件方法
2009/11/08 Python
python利用hook技术破解https的实例代码
2013/03/25 Python
Python处理文本换行符实例代码
2018/02/03 Python
python模拟表单提交登录图书馆
2018/04/27 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
python实现数字炸弹游戏
2020/07/17 Python
html5使用canvas画一条线
2014/12/15 HTML / CSS
心理健康教育制度
2014/01/27 职场文书
生产厂长岗位职责
2014/02/21 职场文书
英文请假条
2014/04/11 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
2015年党性分析材料
2014/12/19 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis
Go获取两个时区的时间差
2022/04/20 Golang