• 免费的HTML5版uploadify送上


      相信有不少同学用过uploadify这一款文件上传插件,它支持多文件选择、能显示进度条、可配置性高,总体来说是比较好用的。官网有两个版本供下载,分别是flash版和HTML5版。不过令人惋惜的是,HTML5版是收费的。活了这么多年,啥时候用软件掏过钱啊!秉着发扬我们的优良传统,我决定照着它的API自己实现一个HTML5版的。

      经过一番折腾,终于覆盖了大部分API,已经能够实现基本的文件上传需求。如下,是插件中的default配置:

    var defaults = {
            fileTypeExts:'',//允许上传的文件类型,格式'*.jpg;*.doc'
            uploader:'',//文件提交的地址
            auto:false,//是否开启自动上传
            method:'post',//发送请求的方式,get或post
            multi:true,//是否允许选择多个文件
            formData:null,//发送给服务端的参数,格式:{key1:value1,key2:value2}
            fileObjName:'file',//在后端接受文件的参数名称,如PHP中的$_FILES['file']
            fileSizeLimit:2048,//允许上传的文件大小,单位KB
            showUploadedPercent:true,//是否实时显示上传的百分比,如20%
            showUploadedSize:false,//是否实时显示已上传的文件大小,如1M/2M
            buttonText:'选择文件',//上传按钮上的文字
            removeTimeout: 1000,//上传完成后进度条的消失时间,单位毫秒
            itemTemplate:itemTemp,//上传队列显示的模板
            onUploadStart:null,//上传开始时的动作
            onUploadSuccess:null,//上传成功的动作
            onUploadComplete:null,//上传完成的动作
            onUploadError:null, //上传失败的动作
            onInit:null,//初始化时的动作
            onCancel:null//删除掉某个文件后的回调函数,可传入参数file
        }

      已实现的特性有:

    1. 多文件上传
    2. 显示进度条
    3. 显示已上传文件大小和百分比
    4. 文件后缀名和文件大小检测
    5. 向服务端提交额外数据
    6. 自定义文件队列中的html模板
    7. css样式分离出单独文件,可自己定制样式
    8. 添加文件上传各阶段的回调函数

    使用方式

      首先页面上需要一个容器,通常是一个div,如:

    <div id="upload"></div>

      然后直接调用即可:

    $('#upload').Huploadify({
            auto:true,
            fileTypeExts:'*.jpg;*.png;*.exe',
            multi:true,
            formData:{key:123456,key2:'vvvv'},
            fileSizeLimit:1024,
            showUploadedPercent:true,
            showUploadedSize:true,
            removeTimeout:9999999,
            uploader:'upload.php',
            onUploadStart:function(){
                console.log('开始上传');
                },
            onInit:function(){
                console.log('初始化');
                },
            onUploadComplete:function(){
                console.log('上传完成');
                },
            onCancel:function(file){
                console.log(file);
            }
        });

      具体的参数含义,如果看上面的不太清晰,可以直接去uploadify官网http://www.uploadify.com/documentation/查看,因为我完全是照着他的API实现的,用法与他一致。下面上个截图:

    完整代码包

      为方便大家测试,我编写了一个完整的demo,需要运行在PHP环境中,如果你是其他后台语言,就自己写一下吧,很简单~

      猛戳这里下载:http://files.cnblogs.com/lvdabao/Huploadify.zip

      如果发现bug或其他建议,可以和我联系哦~

  • 相关阅读:
    【就业】腾讯VS百度
    MySQL基础知识
    PHP读取远程文件并保存
    【GTK3.0】背景设置
    【GTK】信号量(signal)大全
    c# 调用win32 api
    PHP写窗体程序
    一个苏州IT人的5年挨踢经历面试篇(之二)
    【c++ Primer 】 4.10复习题 12题(int)、(int&)和(int*)
    线段树技巧
  • 原文地址:https://www.cnblogs.com/lvdabao/p/3452858.html
Copyright © 2020-2023  润新知