继续啃boostrap上传组件的uploadify

简介: 不管在哪个系统中,上传肯定是必不可少的,上一篇文章中介绍了uploadify中typeaheader用法,但是仍然存在一些用法,例如,Ajax和上一篇文章中的方法都是在上传一张图片就刷新了,然而很多情况下是上传一堆图片之后才刷新,所以继续研究。

继续啃boostrap上传组件的uploadify


一、前言


   不管在哪个系统中,上传肯定是必不可少的,上一篇文章中介绍了uploadify中typeaheader用法,但是仍然存在一些用法,例如,Ajax和上一篇文章中的方法都是在上传一张图片就刷新了,然而很多情况下是上传一堆图片之后才刷新,所以继续研究


20180412223756917.png


二、使用uploadify中Options中的onQueueComplete


   使用Uploadify中的Events(OnQueueComplete)方法,看着名字就知道什么意思了吧?当我这次点击的所有图片上传完成才进行页面的刷新。官方介绍中,该Event就是一个普通的function,在该function中直接把当前页面刷新


三、使用该事件有两个需要注意的地方


   1、需要在上传完所有文件之后要用到uploadify的onQueueComplete事件


        $(function() {
            $("#file_upload").uploadify({
                'swf'      : '/uploadify/uploadify.swf',
                'uploader' : '/uploadify/uploadify.php',
                'onQueueComplete' : function(queueData) {
                    alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');
                }
      });
        });
    $(function() {
            $("#file_upload").uploadify({
                'swf'      : '/uploadify/uploadify.swf',
                'uploader' : '/uploadify/uploadify.php',
                'onQueueComplete' : function(queueData) {
                    alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');
                }
      });
        });
 $(function() {
            $("#file_upload").uploadify({
                'swf'      : '/uploadify/uploadify.swf',
                'uploader' : '/uploadify/uploadify.php',
                'onQueueComplete' : function(queueData) {
                    alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');
                }
      });
        });      

2、当每一个文件上传完的时候,要做什么事情?需要生成一个风控材料对象,这时候有个问题不知道有没有注意到:


(1)需要记录是哪一个用户上传的文件,那么这个用户从哪里来?这个用户应该是当前用户,但是,uploadify用的是flash上传,flash上传是怎么样的? flash上传是不经过浏览器的,可以理解为当你使用flash上传的时候,它相当于新开了一个浏览器在执行上传文件动作,这时候会发生什么情况? 完成文件在后台得不到UserContext中的用户,因为这两者都不在同一个session中。


(2)如何解决这个问题?两种方式可以解决这个问题


1、uploadify的Options中有一个formdata选项,它可以在上传文件的时候同时传递一些额外的数据。所以可以在formdata中额外添加参数username、userId等。但是这种做法显然不符合高逼格的做法,而且也容易被不法分子伪造请求,然后将formdata中的userId替换。


2、(推荐使用)URL重写:默认情况下,session是基于cookie实现的(一脸懵逼:怎么实现的?)往常在使用session的时候会在cookie中记录sessionId,在上传的时候,会把当前浏览器会话对应的sessionId一并提交上去,后台就可以根据sessionId得到对应的session。


3、经常会遇到一种情况:用户或者浏览器把cookie关闭了,那这时候该怎么办?通常是直接在URL后面加 ';' + jsessionId=xxx。 通过这个jsessionId的值,后台就可以使用session.getId()得到xxx值


4、鉴于第2点中提到的解决方案,以前是这样写的:upload/uploadxxx.do。但现在是特殊情况,所以再上传的时候需要额外手动添加sessionId 即upload/uploadxxx.do;jsessionId=xxx,这样后台就能狗得到正在上传的UserContext中的当前对象。

目录
相关文章
|
4月前
|
Web App开发 前端开发 JavaScript
手摸手教你,从0到1开发一个Chrome浏览器插件
开发 Chrome 插件既有趣又具成就感。本教程将引导你从零开始,逐步创建一个简单的 Chrome 插件。首先了解 Chrome 插件是可增强浏览器功能的小程序。以一个基础示例开始,你将学习如何设置开发环境,包括安装 Chrome 和准备文本编辑器,并掌握 HTML、CSS 和 JavaScript 的基础知识。接着,我们将构建插件的基本结构,涉及 `manifest.json` 配置文件、`background.js` 后台脚本、`popup.html` 用户界面以及 `style.css` 样式表。
365 8
|
7月前
|
存储 JSON JavaScript
vue整合kitymind百度脑图-引用打包文件方案
vue整合kitymind百度脑图-引用打包文件方案
136 0
|
JavaScript
vue项目上传服务器之后上传图片功能报错问题解决方案
vue项目上传服务器之后上传图片功能报错问题解决方案
130 0
|
移动开发 JSON JavaScript
《大胖 • 小课》- 不用 js 实现文件无刷新上传
这是《大胖小课》栏目的专题一《说说文件上传那些事儿》的第3节-《不用 js 实现文件无刷新上传》 专题已经更新章节: 《大胖 • 小课》- 我是这样理解文件上传原理的 《大胖 • 小课》- 写一个文件上传接口 上一节,我们实现了一个简单的文件上传接口,服务端的文件保存我们使用koa-body来完成。 从这节开始我们开始进行梳理前端各种文件上传的场景,尽量覆盖的更全面。 既然要说不用 js 实现文件无刷新上传,那就要先说说最原始的文件上传,也就是在 ie 时代是怎么处理的。
159 0
《大胖 • 小课》- 不用 js 实现文件无刷新上传
|
JavaScript 前端开发
#yyds干货盘点# 【js学习笔记二十四】手动封装callES6
#yyds干货盘点# 【js学习笔记二十四】手动封装callES6
103 0
#yyds干货盘点# 【js学习笔记二十四】手动封装callES6
|
前端开发
#yyds干货盘点# 【React工作记录二十五】ant design form表单验证问题
#yyds干货盘点# 【React工作记录二十五】ant design form表单验证问题
101 0
#yyds干货盘点# 【React工作记录二十五】ant design form表单验证问题
kindeditor富文本编辑器插件 如何实现将本地的图片复制粘贴
目前的需求是 将桌面上的一张图片,进行复制后,可以粘贴到富文本编辑器里面,借用了大佬的这个方法,但是ie浏览器,粘贴图片的时候没办法触发这个paste方法 不知道是因为啥?求大佬帮助
|
JSON JavaScript 前端开发
金格插件WebOffice2015使用体会
金格插件WebOffice2015使用体会
681 0
金格插件WebOffice2015使用体会
|
JavaScript 前端开发 编译器
⚡切图仔?你知道 V8 是如何执行 JS 代码的吗?
⚡切图仔?你知道 V8 是如何执行 JS 代码的吗?
120 0
⚡切图仔?你知道 V8 是如何执行 JS 代码的吗?
|
前端开发 JavaScript
还不理不清Vue.js目录结构?别说你是学前端的❤
还不理不清Vue.js目录结构?别说你是学前端的❤❤
138 0