继续啃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中的当前对象。

目录
相关文章
|
9月前
|
JavaScript Java 测试技术
基于小程序的客家菜餐馆点菜系统+springboot+vue.js附带文章和源代码设计说明文档ppt
基于小程序的客家菜餐馆点菜系统+springboot+vue.js附带文章和源代码设计说明文档ppt
52 0
|
JavaScript
JS实现面包屑功能(拿来及用)
JS实现面包屑功能(拿来及用)
119 0
|
9月前
|
SQL 前端开发 JavaScript
使用ueditor实现多图片上传案例
使用ueditor实现多图片上传案例
|
9月前
uploadify组件文件上传那些事
uploadify组件文件上传那些事
87 0
|
搜索推荐 前端开发
前端祖传三件套HTML的常用标签之图片
图片是网页中最重要的元素之一,它可以为用户提供更多视觉信息和资源。在HTML中,我们使用<img>标签来定义图片。
115 0
|
移动开发 JSON JavaScript
《大胖 • 小课》- 不用 js 实现文件无刷新上传
这是《大胖小课》栏目的专题一《说说文件上传那些事儿》的第3节-《不用 js 实现文件无刷新上传》 专题已经更新章节: 《大胖 • 小课》- 我是这样理解文件上传原理的 《大胖 • 小课》- 写一个文件上传接口 上一节,我们实现了一个简单的文件上传接口,服务端的文件保存我们使用koa-body来完成。 从这节开始我们开始进行梳理前端各种文件上传的场景,尽量覆盖的更全面。 既然要说不用 js 实现文件无刷新上传,那就要先说说最原始的文件上传,也就是在 ie 时代是怎么处理的。
168 0
|
JavaScript 前端开发
#yyds干货盘点# 【js学习笔记四十五】实现两栏布局的第一种方式
#yyds干货盘点# 【js学习笔记四十五】实现两栏布局的第一种方式
117 0
#yyds干货盘点# 【js学习笔记四十五】实现两栏布局的第一种方式
|
JavaScript 前端开发
#yyds干货盘点# 【js学习笔记四十八】实现两栏布局的第四种方式
#yyds干货盘点# 【js学习笔记四十八】实现两栏布局的第四种方式
118 0
#yyds干货盘点# 【js学习笔记四十八】实现两栏布局的第四种方式
|
JavaScript 前端开发
#yyds干货盘点# 【js学习笔记四十六】实现两栏布局的第二种方式
#yyds干货盘点# 【js学习笔记四十六】实现两栏布局的第二种方式
137 0
#yyds干货盘点# 【js学习笔记四十六】实现两栏布局的第二种方式
|
缓存 开发框架 Kubernetes
Abp小试牛刀之 图片上传
图片上传是很常见的功能,里面有些固定的操作也可以沉淀下来。 本文记录使用Abp vNext做图片上传的姿势。
Abp小试牛刀之 图片上传