上传插件uploadifive的用法

最新推荐文章于 2025-05-22 13:15:51 发布

Pluto517

最新推荐文章于 2025-05-22 13:15:51 发布

阅读量4.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： webpack 文章标签： ouploadifive

本文链接：https://blog.youkuaiyun.com/weixin_43346192/article/details/88527438

webpack 专栏收录该内容

1 篇文章

订阅专栏

当公司产品上传功能因依赖Flash失效时，转向使用H5插件uploadifive。uploadifive不依赖Flash，适合移动端。本文介绍了新版uploadifive的API变化，并提供了项目中常用属性和方法的示例，包括如何引入和使用该插件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：由于公司产品上传功能失效，就去检查了代码，最后发现关于插件uploadify需要依赖flash才能使用上传。但是新版浏览器现在已经默认禁用flash，而且flash将会在2020年彻底被抛弃，于是查阅了资料发现需要使用H5的uploadifive插件。此插件不用支持falsh，因而移动端也可以使用。再此也非常感谢我公司的另外一个大牛指导我插件的使用。

新版uploadifive的api跟旧版的有很多不一样，当然他们都是基于jquery的。接下来罗列的是我项目或者常用到的属性和方法。

属性
auto	是否自动上传，默认为true
queueSizeLimit	允许队列中存在的最大文件数
fileType	上传的文件类型
multi	是否允许多文件上传，默认为true
uploadLimit	一次可以上传的最大文件数
height	元素的高度
width	元素的宽度
buttonText	上传按钮的显示文本
uploadScript	上传图片的路径（就是所谓的存储位置）
fileObjName	file文件对象名称
formData	静态参数（对象格式），传递给后台

方法
onInit	uploadifive初始化时触发（最早的触发函数）
onUpload	开始上传队列时触发
onUploadComplete	上传完成时触发
onCancel	文件被删除时触发
onFallback	HTML5 API不支持的浏览器触发

使用方法：

①.首先引入jquery和uploadifive

<script src="../js/jquery/jquery-1.7.2.js"></script>
<script src= "../uploadifive/jquery.uploadifive.js"><script>

②.具体使用（忽略我的angular框架语法而且这里我做了兼容。真正的uploadifive使用方法看if里面的就可以）

(function (window, angular, $, ucApp) {
    'use strict';

    ucApp.directive('uploadAvatar', function () {
        /**
         * scope
         *      model
         * attrs
         *      html
         */
        return {
            scope: {
                model: '=model'
            },
            restrict: 'EA',
            link: function (scope, elem, attrs) {
                if ( window.FormData) {
                    $(elem).uploadifive({
                        queueSizeLimit: 100,
                        multi: false,
                        height: 20,
                        buttonText: '选择头像',
                        uploadScript:"/uploadimg",
                        width: 69,
                        fileObjName: "images",
                        // removeCompleted:true,
                        formData: { type: 11 },
                        onInit: function() {
                            this.data('uploadifive').button.css({
                                'border-radius':'3px',
                                'background-color':'#4a61a4', 
                                'overflow'    : 'hidden',
                                'position'    : 'relative',
                                'text-align'  : 'center', 
                                'color':'#fff'
                            })
                        },
                        onUpload: function (file) {
                            var formData = this.data('uploadifive').settings.formData;
                            var session_name = $('#session_name').val();
                            formData[session_name] = wx.cookie(session_name);
                            $('.filename').remove();
                            $('.fileinfo').remove();
                            $('.close').remove();
                        },
                        onUploadComplete: function (file, data, response) {
                            data = $.parseJSON(data);
                            scope.model = data.data.big;
                            scope.$apply();
                            
                        }
                    });
                } else {
                    $(elem).uploadify({
                         queueSizeLimit: 1,
                         multi: false,
                         height: 20,
                         buttonText: '选择头像',
                         swf:uc.static.UPLOAD_SWF_PATH,
                         uploader:"/uploadimg",
                         width: 69,
                         fileObjName: "images",
                         formData: { type: 11 },
                         onUploadStart: function (file) {
                             var formData = this.wrapper.uploadify('settings', 'formData');
                             var session_name = $('#session_name').val();
                             formData[session_name] = wx.cookie(session_name);
                             this.wrapper.uploadify('settings', 'formData', formData);
                         },
                         onUploadSuccess: function (file, data, response) {
                             data = $.parseJSON(data);
                             scope.model = data.data.big;
                             scope.$apply();
                         }
                    });
                    $('.uploadify-button').html(attrs.html);
                    $('.uploadify-queue').remove();
                }

            }
        };
    });
})(window, window.angular, $, angular.module('ucApp'));

html代码：

 <div class="grzxFGBox clearfix">
                <label class="grzxFGLabel">头像：</label>
                <div class="grzxFGCBox">
                    <div class="grzlCountPic">
                        <div class="grzlCountPicBox siteCircleBox">
                            <img ng-src="{{user.headerUrl}}"/>
                        </div>
                        <div class="grzlCountPicText">
                            <input upload-Avatar type="file" name="uploadify" id="uploadify" model="user.headerUrl" />
                            <p class="textP">支持JPG,JPEG,GIF,PNG,BMP格式，且不超过5M</p>
                        </div>
                    </div>
                </div>
            </div>