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

目录
打赏
0
0
0
0
1
分享
相关文章
多文件上传组件FineUploader使用心得
原文 多文件上传组件FineUploader使用心得 做Web开发的童鞋都知道,需要经常从客户端上传文件到服务端,当然,你可以使用来上传文件,这是Asp.Net默认的上传文件元素。但是,受到系统的限制,如果要更改file元素的样式,让他看起来 美观一些,这就比较费劲了,当然可能是本人css功夫没到家吧,总之试了几次,也没能达到想要的效果。
1358 0
温故而知新:silverlight中的图片资源绑定
先来看xaml部分 代码                              cs部分: 代码 using System.Windows.Controls;namespace ListBoxSilde{    public partial class Us...
727 0
今年十八,喜欢文件上传
今年十八,喜欢文件上传
73 1
文件上传并生成几种大小的缩略图之二
Image uploader Ajax图片上传生成缩略图,原版是国外一个有名的图片上传程序,采用无刷新的Ajax上传方式,上传成功后,可生成四张不同大小的缩略图,参数可以自己调整,演示效果可看如本站首页。
1190 0
基于springboot+vue.js的流浪动物救助网站附带文章和源代码设计说明文档ppt
基于springboot+vue.js的流浪动物救助网站附带文章和源代码设计说明文档ppt
60 0
[ExtJS5学习笔记]第二十九节 sencha ext js 5.1.0中动态更换皮肤主题
本文地址:http://blog.csdn.net/sushengmiyan/article/details/42016107 本文作者:sushengmiyan -------------------------------------------.
1121 0
|
10月前
|
elementui-upload组件自定义样式上传(upload中常用的属性,但是网络上却找不到教程)(解决bug删除之后再次上传会上传删除的图片)专注后端工程师的前端速成
elementui-upload组件自定义样式上传(upload中常用的属性,但是网络上却找不到教程)(解决bug删除之后再次上传会上传删除的图片)专注后端工程师的前端速成
1001 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等