关于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 相关文章推荐
用JS实现3D球状标签云示例代码
Dec 01 Javascript
JavaScript函数详解
Nov 17 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
Angular2利用组件与指令实现图片轮播组件
Mar 27 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
基于dataset的使用和图片延时加载的实现方法
Dec 11 Javascript
Vue绑定用户接口实现代码示例
Nov 04 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 Javascript
Js类的构建与继承案例详解
Sep 15 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网上调查系统
2006/10/09 PHP
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
php简单复制文件的方法
2016/05/09 PHP
php验证码生成器
2017/05/24 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
electron踩坑之dialog中的callback解决
2020/10/06 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法
2016/04/12 Python
django定期执行任务(实例讲解)
2017/11/03 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
python 6种方法实现单例模式
2020/12/15 Python
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
《谁的本领大》教后反思
2014/04/25 职场文书
个人总结怎么写
2015/02/26 职场文书
休学证明范本
2015/06/19 职场文书
自从在 IDEA 中用了热部署神器 JRebel 之后,开发效率提升了 10(真棒)
2021/06/26 Java/Android