jq上传文件插件UploadiFive.js基本用法和配置 - javascript学习,js知识点 - CSS模版园-免费网站模版下载
当前位置 CSS模版园 >> 网站制作 >> javascript >> jq上传文件插件UploadiFive.js基本用法和配置

jq上传文件插件UploadiFive.js基本用法和配置

UploadiFive基本用法和配置

这段时间做了一个项目用到uploadifive上传控件,和uploadify不同,这个控件是基于HTML5的版本而不用支持falsh,因而移动端也可以使用。

官网:http://www.uploadify.com

下载:http://www.uploadify.com/download/

预览:http://www.uploadify.com/demos/


使用方式

1、引入jQuery和uploadifive样式表以及脚本

<script type="text/javascript" src="jquery-2.2.4.min.js"></script>  
<script type="text/javascript" src="uploadify/jquery.uploadifive.min.js"></script>

2、声明一个普通的html文件上传控件,并指定id

<input type="file" id="file_upload" name="file_upload">

3、初始化uploadifive

$(function() {  
    $('#file_upload').uploadifive({  
        'uploadScript' : 'uploadifive.php'
        'fileObjName' : 'file_upload',
    });  
});

相关属性与方法:

属性 作用
auto 是否自动上传,默认true
uploadScript 上传路径
fileObjName file文件对象名称
buttonText 上传按钮显示文本
queueID 进度条的显示位置
fileType 上传文件类型
multi 是否允许多个文件上传,默认为true
fileSizeLimit 允许文件上传的最大尺寸
uploadLimit 一次可以上传的最大文件数
queueSizeLimit 允许队列中存在的最大文件数
removeCompleted 隐藏完成上传的文件,默认为false
方法 作用
onUploadComplete 文件上传成功后执行
onCancel 文件被删除时触发
onUpload 开始上传队列时触发
onFallback HTML5 API不支持的浏览器触发

具体应用

$('#file_upload').uploadifive({
    'auto': true,
    'uploadScript': 'uploadPhoto.php',  //上传路径
    'fileObjName': 'file_upload',       //file文件对象名称
    'buttonText': '上传照片',           //上传按钮显示文本
    'queueID': 'tip-queue1',            //进度条的显示位置
    'fileType': 'image/*',              //上传文件类型
    'multi': false,                     //是否允许多个文件上传,默认为true
    'fileSizeLimit': 5242880,           //允许文件上传的最大尺寸
    'uploadLimit': 1,                   //一次可以上传的最大文件数
    'queueSizeLimit': 1,                //允许队列中存在的最大文件数

    //文件上传成功后执行
    'onUploadComplete': function (file, data) { 
    },

    //文件被删除时触发
    onCancel: function (file) {
        $("#frontSide").val("");
        /* 注意:取消后应重新设置uploadLimit */
        $data = $(this).data('uploadifive'),
        settings = $data.settings;
        settings.uploadLimit++;
        alert(file.name + " 已取消上传~!");
    },

    //HTML5 API不支持的浏览器触发
    onFallback: function () {
        alert("该浏览器无法使用!");
    },

    //开始上传队列时触发
    onUpload: function (file) {
        //当开始上传文件,要防止上传未完成而表单被提交
    }
});

声明本站所有资源仅供学习与参考,请勿用于商业用途。转载请注明来自:cssteach.com

原文http://cssteach.com/html/show-10-143.html

若文章内容有错误或无法下载,请在回复中说明(可无需登录,直接评论)

最新文章

图文

热门网站模版