zoukankan      html  css  js  c++  java
  • 免费的HTML5版uploadify

    转http://www.cnblogs.com/lvdabao/p/3452858.html

    复制代码
    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实现的,用法与他一致。下面上个截图:

  • 相关阅读:
    SQL SERVER 2008的数据压缩
    protected,internal和protected internal
    CSS笔记
    太吓人了!妈妈必看:国内人贩子抢孩子竟使出狠招
    ASP.NET上传图片的简单方法
    VS2005快捷键大全
    判断ExecuteScalar()是否返回结果
    AppSettings和ConnectionStrings的区别
    VSS中的签入和签出
    对目前工作烦躁的人来看看,你真正明白多少
  • 原文地址:https://www.cnblogs.com/yanghongfei/p/7661525.html
Copyright © 2011-2022 走看看