jQuery上传插件Uploadify 3.2.1 简单例子

最新推荐文章于 2021-02-24 12:14:44 发布

SHen丶

最新推荐文章于 2021-02-24 12:14:44 发布

阅读量838

点赞数 1

分类专栏： jQuery插件文章标签： jquery 插件

jQuery插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Uploadify下载地址：http://www.uploadify.com/download/

Uploadify官网文档：http://www.uploadify.com/documentation/

Uploadify官网Demo：http://www.uploadify.com/demos/

1、导入CSS和JS文件

<link href="/scripts/uploadify/uploadify.css" rel="stylesheet" />
    <script type="text/javascript" src="/scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/scripts/uploadify/jquery.uploadify.min.js"></script>

2、HTML内容

<body>
    <div id="uploadfileQueue"></div>
    <div>
        <input type="file" name="upload_file" id="upload_file" />
        <a href="javascript:void(0);" οnclick="startUpload();">【开始上传】</a>
        <a href="javascript:void(0);" οnclick="cancelUpload();">【取消】</a>
    </div>
</body>

3、JS内容

<script type="text/javascript">
        $(function () {
            $('#upload_file').uploadify({
                //开启调试
                'debug': false,
                //是否自动上传
                'auto': false,
                //超时时间
                'successTimeout': 99999,
                //附带值
                'formData': {
                    'userid': '用户id',
                    'username': '用户名'
                },
                //flash
                'swf': '/scripts/uploadify/uploadify.swf',
                //不执行默认的onSelect事件
                'overrideEvents': ['onDialogClose'],
                //文件选择后的容器ID
                'queueID': 'uploadfileQueue',
                //上传处理程序
                'uploader': 'Uploadify',
                //上传后保留进度条
                'removeCompleted': false,
                //选择文件按钮文字
                'buttonText': '上传文件',
                //浏览按钮的背景图片路径
                //'buttonImage': 'upbutton.gif',
                //浏览按钮的宽度
                'width': '100',
                //浏览按钮的高度
                'height': '32',
                //服务器端接收文件对象的名称
                'fileObjName': 'file',
                //在浏览窗口底部的文件类型下拉菜单中显示的文本
                //'fileTypeDesc': '支持的格式：',
                //允许上传的文件后缀
                'fileTypeExts': '*.jpg;*.jpge;*.gif;*.png',
                //上传文件的大小限制
                'fileSizeLimit': '1MB',
                //上传数量
                'queueSizeLimit': 5,
                //选择上传文件后调用
                'onSelect': function (file) {

                },
                //返回一个错误，选择文件的时候触发
                'onSelectError': function (file, errorCode, errorMsg) {
                    switch (errorCode) {
                        case -100:
                            alert("上传的文件数量已经超出系统限制的" + $('#upload_file').uploadify('settings', 'queueSizeLimit') + "个文件！");
                            break;
                        case -110:
                            alert("文件 [" + file.name + "] 大小超出系统限制的" + $('#upload_file').uploadify('settings', 'fileSizeLimit') + "大小！");
                            break;
                        case -120:
                            alert("文件 [" + file.name + "] 大小异常！");
                            break;
                        case -130:
                            alert("文件 [" + file.name + "] 类型不正确！");
                            break;
                    }
                },
                //检测FLASH失败调用
                'onFallback': function () {
                    alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
                },
                //上传到服务器，服务器返回相应信息到data里
                'onUploadSuccess': function (file, data, response) {
                    $('#upload_file').uploadify('disable', false);
                    alert(data);
                }
            });
        });

        function startUpload() {
            $('#upload_file').uploadify('upload', '*');
            $('#upload_file').uploadify('disable', true);
        }

        function cancelUpload() {
            $('#upload_file').uploadify('cancel', '*');
            $('#upload_file').uploadify('disable', false);
        }

    </script>

本例子参考： http://www.abc3210.com/2012/js_09/jquery-uploadify.shtml