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

目录
相关文章
|
2月前
|
SQL 前端开发 JavaScript
使用ueditor实现多图片上传案例
使用ueditor实现多图片上传案例
21 0
|
10月前
|
JavaScript 前端开发 安全
手把手教你用js实现手机通讯录功能(附源码)
手把手教你用js实现手机通讯录功能(附源码)
255 1
|
移动开发 JSON JavaScript
《大胖 • 小课》- 不用 js 实现文件无刷新上传
这是《大胖小课》栏目的专题一《说说文件上传那些事儿》的第3节-《不用 js 实现文件无刷新上传》 专题已经更新章节: 《大胖 • 小课》- 我是这样理解文件上传原理的 《大胖 • 小课》- 写一个文件上传接口 上一节,我们实现了一个简单的文件上传接口,服务端的文件保存我们使用koa-body来完成。 从这节开始我们开始进行梳理前端各种文件上传的场景,尽量覆盖的更全面。 既然要说不用 js 实现文件无刷新上传,那就要先说说最原始的文件上传,也就是在 ie 时代是怎么处理的。
112 0
《大胖 • 小课》- 不用 js 实现文件无刷新上传
|
前端开发 PHP 开发工具
百度编辑器-easyswoole组件版
百度编辑器-easyswoole组件版
107 0
kindeditor富文本编辑器插件 如何实现将本地的图片复制粘贴
目前的需求是 将桌面上的一张图片,进行复制后,可以粘贴到富文本编辑器里面,借用了大佬的这个方法,但是ie浏览器,粘贴图片的时候没办法触发这个paste方法 不知道是因为啥?求大佬帮助
|
JavaScript 前端开发
前端案例:飞机大战( js+dom 操作,代码完整,附图片素材)
前端案例:飞机大战( js+dom 操作,代码完整,附图片素材)
569 0
前端案例:飞机大战( js+dom 操作,代码完整,附图片素材)
|
存储 前端开发 JavaScript
移动端实现多图上传、文件上传及下载和vue多图片上传组件
js+css实现手机端的多图片上传,为了方便使用,css和js都未内联,为性能建议使用时改为外联; 如要用到pc端,直接去掉px转换为rem的js代码,修改单位即可; 因multiple在安卓手机中不兼容,所以在安卓上只能一次选中一张图片,在iOS系统...
5297 0
|
JavaScript 前端开发 内存技术
|
JavaScript 安全 内存技术