继续啃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月前
|
人工智能 运维 安全
|
10月前
|
安全
Python-打印99乘法表的两种方法
本文详细介绍了两种实现99乘法表的方法:使用`while`循环和`for`循环。每种方法都包括了步骤解析、代码演示及优缺点分析。文章旨在帮助编程初学者理解和掌握循环结构的应用,内容通俗易懂,适合编程新手阅读。博主表示欢迎读者反馈,共同进步。
|
10月前
|
机器学习/深度学习 数据采集 搜索推荐
使用Python实现深度学习模型:智能食品消费行为预测
使用Python实现深度学习模型:智能食品消费行为预测
238 8
|
机器学习/深度学习 人工智能 自然语言处理
【深度学习】Python之人工智能应用篇——音频生成技术
音频生成是指根据所输入的数据合成对应的声音波形的过程,主要包括根据文本合成语音(text-to-speech)、进行不同语言之间的语音转换、根据视觉内容(图像或视频)进行语音描述,以及生成旋律、音乐等。它涵盖了声音结构中的音素、音节、音位、语素等基本单位的预测和组合,通过频谱逼近或波形逼近的合成策略来实现音频的生成。 音频生成技术的发展主要依赖于深度学习模型,如循环神经网络(RNN)、长短时记忆网络(LSTM)、Transformer等。这些模型通过学习大量的音频数据,能够自动生成与人类发音相似甚至超越人类水平的音频内容。近年来,随着大规模预训练模型的流行,如GPT系列模型、BERT、T5等,
375 7
【深度学习】Python之人工智能应用篇——音频生成技术
|
人工智能 监控 安全
揭秘AI技术在智能家居中的应用
【9月更文挑战第6天】本文深入探讨了AI技术如何在智能家居领域大放异彩。从智能语音助手到自动化家居控制,再到安全监控和能源管理,AI技术正在改变我们的生活方式。文章还将通过代码示例,展示如何利用AI技术实现家居自动化控制。
566 5
|
Shell Android开发
安卓scheme_url调端:在AndroidManifest.xml 中如何配置 Intent-filter?
为了使Android应用响应vivo和oppo浏览器的Deep Link或自定义scheme调用,需在`AndroidManifest.xml`中配置`intent-filter`。定义启动的Activity及其支持的scheme和host,并确保Activity可由外部应用启动。示例展示了如何配置HTTP/HTTPS及自定义scheme,以及如何通过浏览器和adb命令进行测试,确保配置正确无误。
|
XML JavaScript 前端开发
基于SVG的web页面图形绘制API介绍
基于SVG的web页面图形绘制API介绍
176 4
|
弹性计算 应用服务中间件 Linux
双剑合璧:在同一ECS服务器上共存Apache与Nginx的实战攻略
在ECS服务器上同时部署Apache和Nginx的实战:安装更新系统,Ubuntu用`sudo apt install apache2 nginx`,CentOS用`sudo yum install httpd nginx`。配置Nginx作为反向代理,处理静态内容及转发动态请求到Apache(监听8080端口)。调整Apache的`ports.conf`监听8080。重启服务测试,实现两者高效协同,提升Web服务性能。记得根据流量和需求优化配置。【6月更文挑战第21天】
1165 1
|
定位技术 Python
Python的pyecharts安装,导入map、geo模块,画地图
Python的pyecharts安装,导入map、geo模块,画地图
321 1
|
消息中间件 RocketMQ Docker
分布式事物【RocketMQ事务消息、Docker安装 RocketMQ、实现订单微服务、订单微服务业务层实现】(八)-全面详解(学习总结---从入门到深化)(上)
分布式事物【RocketMQ事务消息、Docker安装 RocketMQ、实现订单微服务、订单微服务业务层实现】(八)-全面详解(学习总结---从入门到深化)
368 0