【第22期】观点:IT 行业加班,到底有没有价值?

uploadify.swf多图上传

原创 2015年07月08日 16:56:11

项目中用到多图上传和单图上传,用了2个不同的插件,还有出个上传触发,这里记录一下uploadify.swf多图上传

<script type="text/javascript" src="ams/js/uploadify/swfobject.js"></script>
<script type="text/javascript" src="ams/js/uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript">
    $("#file_upload").uploadify({
        formData       : { '<?php echo session_name();?>' : '<?php echo session_id();?>' },
        'auto'         : true,
        'debug'        : false,
        'fileObjName'  : 'uploadedfile',              //设置在后台脚本使用的文件名
        'queueId'      : 'some_file+queue',
        'swf'          : 'ams/js/uploadify/uploadify.swf',
        'uploader'     : '<?= Yii::app()->createUrl("ams/dealerImage/loadImage");?>',
        'buttonText'   : '<a class="imgupload"><span>选择图片</span></a>',
        'method'       : 'post',
        'fileTypeExts' : '*.jpg; *.jpeg',            // 上传图片的格式
        'fileSizeLimit': '35KB',                     //上传文件的大小限制
        'queueSizeLimit' : 8,                         //上传数量
//        onSelect: function(file){                   //选中时候触发
//        },
        'onUploadStart': function (file) {           //每张图预览是触发,业务是判断已有的图片数
            var myself = this;
            if($('.tdicig').find('img').length>7){
                AmsAlert("上传的图片不能超过8张",true);
                myself.cancelUpload(file.id);
                $('#file_upload').uploadify('cancel','*');    //取消队列里面所有
//                $('#' + file.id).remove();                  //取消当前
            }
        },
        //返回一个错误,选择文件的时候触发
        'onSelectError': function(file, errorCode, errorMsg) {
            switch (errorCode) {
                case -100:
                    AmsAlert("上传的图片数量超过" + $('#file_upload').uploadify('settings', 'queueSizeLimit') + "个文件!", true);
                    break;
                case -110:
                    AmsAlert("文件"+file.name+"必须为小于"+$('#file_upload').uploadify('settings', 'fileSizeLimit')+",请重新上传!", true);
                    break;
                case -120:
                    AmsAlert("文件"+file.name+"必须小于35K!", true);
                    break;
                case -130:
                    AmsAlert("文件"+file.name+"必须为gif、jpg、png格式!", true);
                    break;
            }
        },
        //成功时触发,显示图片
        'onUploadSuccess':function(file, data, response){//每个文件上传完成时执行的函数 response是服务器返回的数据
            var data = eval("(" + data + ")");
            if(data.msg){
//                AmsAlert(data.msg,true);
            }
            else{
                $('.tdicig').append('<img class="lit_img" name="'+data.file_url+'" src="ams/upload/dealerImage/'+data.file_url+'">' );
            }
        }
    });
</script>

前端虽然有flash来判断,为了业务的严谨,C层的验证图片规格,还有做图片预览处理

火狐浏览器下sessionId可能获取不到(IE和谷歌没有问题),可以在当前控制器下面设置flash带过来的sessionId,注意写清楚传过来的

(这里要细心打印,看看传值)

    public function init(){
        if(isset($_POST['PHPSESSID']) && $_POST['PHPSESSID'] != session_id())//火狐记不住sessionId
        {
            session_destroy();
            session_id($_POST['PHPSESSID']);
            session_start();
        }
        parent::init();
        $this->location = Yii::app()->createUrl('ams/dealerImage/index');
    }

    public function actionLoadImage()
    {
        $res["msg"] = "";//提示信息
        if(empty($_FILES) || $_FILES['uploadedfile']['error'] == 1)
        {
            $res['msg'] = "图片大小不能超过35K,请重新上传";
        }
        else
        {
            if(file_exists($_FILES['uploadedfile']['tmp_name']))
            {
                $imageName = $_FILES['uploadedfile']['name'];
                //将图片中的'&'转成'_'避免前端和ftp中将'&'自动转换为'&'而取不到图片
                $imageName = str_replace('&','_',$imageName);
                $ext = substr($imageName, strrpos($imageName, '.')+1);
//                $saveName = time() . ".".$ext;
                if(in_array(strtolower($ext), array('jpg','jpeg')))
                {
                    if($_FILES["uploadedfile"]["size"] / 1024 <= 35)
                    {
                        if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'],'ams/upload/dealerImage/'.$imageName)){
                             $res['file_url'] = $imageName;
                        }
                        else
                        {
                            $res["msg"] = "文件上传失败,请重试";
                        }
                    }
                    else
                    {
                        $res['msg'] = "图片大小不能超过35K,请重新上传";
                    }
                }
                else
                {
                    $res["msg"] = "图片格式不对,请上传jpg/jpeg格式";
                }
            }
            else
            {
                $res["msg"] = "请选择要上传的文件";
            }
        }
        $res['msg'] = iconv('GB2312', 'UTF-8', $res['msg']);
        echo json_encode($res);
        exit();
    }

最后是一些涉及到的属性重点:

每个属性方法的作用   装载自:

http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html

$('#file_upload').uploadify({
                auto:false, 
                //接受true or false两个值,当为true时选择文件后会自动上传;为false时只会把选择的文件增加进队列但不会上传,这时只能使用upload的方法触发上传。不设置auto时默认为true
                buttonClass: "some-class", 
                //设置上传按钮的class
                buttonCursor: 'hand',
                //设置鼠标移到按钮上的开状,接受两个值'hand'和'arrow'(手形和箭头)
                buttonImage: 'img/browse-btn.png', 
                //设置图片按钮的路径(当你的按钮是一张图片时)。如果使用默认的样式,你还可以创建一个鼠标悬停状态,但要把两种状态的图片放在一起,并且默认的放上面,悬停状态的放在下面(原文好难表达啊:you can create a hover state for the button by stacking the off state above the hover state in the image)。这只是一个比较便利的选项,最好的方法还是把图片写在CSS里面。
                buttonText: '<div>选择文件</div>',
                //设置按钮文字。值会被当作html渲染,所以也可以包含html标签
                checkExisting: '/uploadify/check-exists.php',
                //接受一个文件路径。此文件检查正要上传的文件名是否已经存在目标目录中。存在时返回1,不存在时返回0(应该主要是作为后台的判断吧),默认为false
                debug: false,
                //开启或关闭debug模式
                fileObjName:'filedata',
                //设置在后台脚本使用的文件名。举个例子,在php中,如果这个选项设置为'the_files',你可以使用$_FILES['the_files']存取这个已经上传的文件。
                fileSizeLimit:'100MB',
                //设置上传文件的容量最大值。这个值可以是一个数字或者字符串。如果是字符串,接受一个单位(B,KB,MB,GB)。如果是数字则默认单位为KB。设置为0时表示不限制
                fileTypeExts: '*.*',
                //设置允许上传的文件扩展名(也就是文件类型)。但手动键入文件名可以绕过这种级别的安全检查,所以你应该始终在服务端中检查文件类型。输入多个扩展名时用分号隔开('*.jpg;*.png;*.gif')
                fileTypeDesc: 'All Files',
                //可选文件的描述。这个值出现在文件浏览窗口中的文件类型下拉选项中。(chrome下不支持,会显示为'自定义文件',ie and firefox下可显示描述)
                formData: {
                    timestamp: '<?php echo $timestamp;?>',
                    token: '<?php echo md5('unique_salt' . $timestamp);?>'
                },
                //通过get或post上传文件时,此对象提供额外的数据。如果想动态设置这些值,必须在onUploadStartg事件中使用settings的方法设置。在后台脚本中使用 $_GET or $_POST arrays (PHP)存取这些值。看官网参考写法:http://www.uploadify.com/documentation/uploadify/formdata/
                height: 30,
                //设置按钮的高度(单位px),默认为30.(不要在值里写上单位,并且要求一个整数,width也一样)
                width: 120,
                //设置按钮宽度(单位px),默认120
                itemTemplate:false,
                //模板对象。给增加到上传队列中的每一项指定特殊的html模板。模板格式请看官网http://www.uploadify.com/documentation/uploadify/itemtemplate/
                method:'post',
                //提交上传文件的方法,接受post或get两个值,默认为post
                multi: false,
                //设置是否允许一次选择多个文件,true为允许,false不允许
                overrideEvents: [],
                //重写事件,接受事件名称的数组作为参数。所设置的事件将可以被用户重写覆盖
                preventCaching:true,
                //是否缓存swf文件。默认为true,会给swf的url地址设置一个随机数,这样它就不会被缓存。(有些浏览器缓存了swf文件就会触发不了里面的事件--by rainweb)
                progressData: 'percentage',
                //设置文件上传时显示数据,有‘percentage’ or ‘speed’两个参数(百分比和速度)
                queueID: false,
                //设置上传队列DOM元素的ID,上传的项目会增加进这个ID的DOM中。设置为false时则会自动生成队列DOM和ID。默认为false
                queueSizeLimit: 999,
                //设置每一次上传队列中的文件数量。注意并不是限制总的上传文件数量(那是uploadLimit).如果增加进队列中的文件数量超出这个值,将会触发onSelectError事件。默认值为999
                removeCompleted: true,
                //是否移除掉队列中已经完成上传的文件。false为不移除
                removeTimeout: 3,
                //设置上传完成后删除掉文件的延迟时间,默认为3秒。如果removeCompleted为false的话,就没意义了
                requeueErrors: false,
                //设置上传过程中因为出错导致上传失败的文件是否重新加入队列中上传
                successTimeout: 30,
                //设置文件上传后等待服务器响应的秒数,超出这个时间,将会被认为上传成功,默认为30秒
                swf: 'uploadify.swf',
                //swf的相对路径,必写项
                uploader: 'uploadify.php'
                //服务器端脚本文件路径,必写项
                uploadLimit: 999
                //上传文件的数量。达到或超出这数量会触发onUploadError方法。默认999
            })

复制代码

 Events:
复制代码

$('#file_upload').uploadify({    
                onCancel: function(file){
                        console.log('The file'+ file.name + 'was cancelled.')
                },
                //文件被移除出队列时触发,返回file参数
                onClearQueue: function(queueItemCount){
                    console.log(queueItemCount+'file(s) were removed frome the queue')
                },
                //当调用cancel方法且传入'*'这个参数的时候触发,其实就是移除掉整个队列里的文件时触发,上面有说cancel方法带*时取消整个上传队列
                onDestroy: function(){
                    //调用destroy方法的时候触发
                },
                onDialogClose: function(queueData){
                    console.log(queueData.filesSelected+'\n'+queueData.filesQueued+'\r\n'+queueData.filesReplaced+'\r\n'+queueData.filesCancelled+'\r\n'+ queueData.filesErrored)
                },
                //关闭掉浏览文件对话框时触发。返回queueDate参数,有以下属性:
                /*
                    filesSelected 浏览文件对话框中选取的文件数量
                    filesQueued 加入上传队列的文件数
                    filesReplaced 被替换的文件个数
                    filesCancelled 取消掉即将加入队列中的文件个数
                    filesErrored 返回错误的文件个数
                */
                onDialogOpen:function(){
                    //打开选择文件对话框时触发
                },
                onDisable:function(){
                    //禁用uploadify时触发(通过disable方法)
                },
                onEnalbe: function(){
                    //启用uploadify时触发(通过disable方法)
                },
                onFallback:function(){
                    //在初始化时检测不到浏览器有兼容性的flash版本时实触发
                },
                onInit: function(instance){
                    console.log('The queue ID is'+ instance.settings.queueID)
                },
                //每次初始化一个队列时触发,返回uploadify对象的实例
                onQueueComplete:function(queueData){
                    console.log(queueData.uploadsSuccessful+'\n'+queueData.uploadsErrored)
                },
                //队列中的文件都上传完后触发,返回queueDate参数,有以下属性:
                /*
                    uploadsSuccessful 成功上传的文件数量
                    uploadsErrored 出现错误的文件数量
                */
                onSelect: function(file){
                    console.log(file.name)
                },
                //选择每个文件增加进队列时触发,返回file参数
                onSelectError: function(file,errorCode,errorMsg){
                    console.log(errorCode)
                    console.log(this.queueData.errorMsg)
                },
                //选择文件出错时触发,返回file,erroCode,errorMsg三个参数
                /*
                    errorCode是一个包含了错误码的js对象,用来查看事件中发送的错误码,以确定错误的具体类型,可能会有以下的常量:
                    QUEUE_LIMIT_EXCEEDED:-100 选择的文件数量超过设定的最大值;
                    FILE_EXCEEDS_SIZE_LIMIT:-110 文件的大小超出设定
                    INVALID_FILETYPE:-130 选择的文件类型跟设置的不匹配

                    errorMsg 完整的错误信息,如果你不重写默认的事件处理器,可以使用‘this.queueData.errorMsg’ 存取完整的错误信息
                */
                onSWFReady: function(){
                    //swf动画加载完后触发,没有参数
                },
                onUploadComplete: function(file){
                    //在每一个文件上传成功或失败之后触发,返回上传的文件对象或返回一个错误,如果你想知道上传是否成功,最后使用onUploadSuccess或onUploadError事件
                },
                onUploadError: function(file,errorCode,erorMsg,errorString){
                },
                //一个文件完成上传但返回错误时触发,有以下参数
                /*
                    file 完成上传的文件对象
                    errorCode 返回的错误代码
                    erorMsg 返回的错误信息
                    errorString 包含所有错误细节的可读信息
                */
                onUploadProgress: function(file,bytesUploaded,bytesTotal,totalBytesUploaded,totalBytesTotal){
                    $('#pregress').html('总共需要上传'+bytesTotal+'字节,'+'已上传'+totalBytesTotal+'字节')
                },
                //每更新一个文件上传进度的时候触发,返回以下参数
                /*
                    file 正上传文件对象
                    bytesUploaded 文件已经上传的字节数
                    bytesTotal 文件的总字节数
                    totalBytesUploaded 在当前上传的操作中(所有文件)已上传的总字节数
                    totalBytesTotal 所有文件的总上传字节数
                */
                onUploadStart: function(file){
                    console.log('start update')
                },
                //每个文件即将上传前触发
                onUploadSuccess: function(file,data,respone){
                    alert( 'id: ' + file.id
                           + ' - 索引: ' + file.index
                + ' - 文件名: ' + file.name
                + ' - 文件大小: ' + file.size
                + ' - 类型: ' + file.type
                + ' - 创建日期: ' + file.creationdate
                + ' - 修改日期: ' + file.modificationdate
                + ' - 文件状态: ' + file.filestatus
                + ' - 服务器端消息: ' + data
                + ' - 是否上传成功: ' + response);
                }
                //每个文件上传成功后触发              
})  

复制代码

Methods:
Uploadify使用jquery推荐的插件模式,这意味着所有方法的调用都保持在一个命名空间里。 调用这些不同的方法,只需要把方法当成第一个参数传进uploadify里调用就行。在这些方法后面增加参数会被传进这个方法里(这两句翻译得不是很顺畅,附原文: To use the different method calls, simply call Uploadify on the DOM element with the method call as the first argument.Any additional arguments added after the method name are passed to the method.)

cancel:取消第一个上传的文件,如果后面带参数"*"则是取消掉整个上传队列,如$(el).uploadify('cancel', '*')

upload:上传第一个上传的文件,如果后面带参数"*"则上传整个队列,跟cancel一样

destroy:移除掉上传组建,按html默认的方法上传

disable:有true or false 两个参数,表示是否禁止上传按钮,true表示禁止,false表示允许上传

settings:返回或者更新一个实例的方法值,接受一个方法名的参数时是返回那个方法的值,当后面再跟一个参数,则是更新那个方法的值。如

$(el).uploadify('settings','buttonText','BROWSE'); //设置buttonText的值为BROWSE
$(el).uploadify('settings','buttonText') //返回buttonText的值

stop:停止正在上传中的文件或队列

一些业务处理,比如选中图片的提示,判断之类

装载:http://www.oschina.net/question/868460_82682

目前大体上功能已经达到了,不过在测试的过程中发现了一个问题,试了很多办法都没有解决,我先把部分代码贴出来吧。



如上图所示,我写了一个switch语句,其中有个case是-140,他的目的是为了检测上传的总文件数是否超过了我设定的最大数值。 

现在有个问题,假设我这么写 

//允许同时最多文件上传的数量。默认:999 

 'queueSizeLimit':2, 

//限制总上传文件数。指同一时间,如果关闭浏览器后重新打开又可上传。默认:999。 

 'uploadLimit':5, 

那么当你每次同时上传两个文件的时候,是不会有问题的,但是当你第三次上传的时候,系统提示你的却是“同时上传的文件数量已经超出系统限制的2个文件”,但是我想要的效果却是让系统提示用户“同时上传的最大文件数已经超出系统限制的5个”。 

我追到源码里面去看了,我发现不论是同时上传最大文件数还是总共上传最大文件数,它的errorCode都是-100,这很明显是不合理的。 

我试过很多方法,例如在jquery.uploadify.js的前面的SWFUpload.QUEUE_ERROR代码里面加了一个参数MAX_FILES:-140,我发现这样行不通,因为errorCode报的是-100,我写个-140根本用不到。 

我后来又把这个判断写到onUploadError事件里面去了,我发现依然行不通,因为这和onUploadError事件没有一点关系,这很明显就是onSelectError里面触发的事件。 


版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

jQuery-file-upload随笔

若想使用插件自带的验证必须要引入以下文件 script src="/static/js/vendor/jquery.ui.widget.js">script> script src="/st...

jQuery File Upload简单解读

FROM:   http://avnpc.com/pages/single-file-upload-component-by-jquery-file-upload jQuery File Uplo...

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

jquery File upload使用总结

1. jquery file upload 下载 jquery file upload Demo 地址:https://blueimp.github.io/jQuery-File-Upload/ ...

jquery.fileupload文件上传

$(function () { //文件上传地址 //var url = 'http://localhost/index.php/upload/do_upload'; var url = '...

jQuery ajaxFileUpload文件上传之前端

1、html部分: 上传 浏览 ...

jQuery File Upload踩坑记录

jQuery-File-Upload官网官方实例HTML:依赖:

jquery插件FileUpload实现异步上传文件

jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端。jQuery ...
  • qwbtc
  • qwbtc
  • 2016-08-01 17:59
  • 647

jQuery-file-upload插件的使用(小实例)

关于文件上传的插件网上有太多了。但是呢,做的特别好的,特别漂亮的上传插件对于IE低版本的兼容性不好,甚至有的不支持。这里我先说说jquery-file-upload这款插件,兼容性好。至于其他的上传插...

ie8下使用jquery-file-upload上传文件后返回json格式数据提示下载

原因:后台使用的是springMVC,方法使用@ResponseBody,方法返回JSONObject 解决方法:方法改为void,返回数据改为 PrintWriter pw = null; t...

jQuery插件之ajaxFileUpload使用小结

ajaxFileUpload是一个异步上传文件的jQuery插件。   传一个不知道什么版本的上来,以后不用到处找了。   语法:$.ajaxFileUpload([options])   optio...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)