zoukankan      html  css  js  c++  java
  • Uploadifive 使用教程【结合七牛】

    Uploadify是一个基于JQuery的多文件上传JS组件,高度定制,两个版本可供选择。flash版本在最新的Safari等不再支持flash的浏览器或者一些手机浏览器中就无法正常的加载使用,因此推荐使用html5版本!

    优点:

    • 支持多文件上传
    • 支持进度条显示
    • 支持拖拽上传
    • 支持文件格式检查及大小限制
    • 支持在文件上传的各个生命周期对文件进行处理

    Uploadify两个版本一个为flash版(免费),一个为HTML5版(收费$5.00 USD,还有一个用户商业用途的就比较贵了)

    基本使用:

    环境要求: jQuery1.4或以上的版本;一个能解析php、asp.net等类似的服务器端脚本语言的服务器运行环境。

    1. 下载uploadifive压缩文件解压至你的项目目录
    2. 引入相关js、css文件:
      • <link rel="stylesheet" type="text/css" href="uploadifive.css">
      • <script src="/jquery.js" type="text/javascript"></script>
      • <script src="jquery.uploadifive.js" type="text/javascript"></script>
    3. 页面中添加type="file"的一个input,并且指定id
      <input id="file_upload" type="file" name="file_upload" />
    4. 初始化uploadfive,绑定到id为file_upload的input上
    $(function() {
        $('#file_upload').uploadifive({
    		//处理文件上传的服务器端脚本,可根据自己的项目环境修改
            'uploadScript' : 'uploadifive.php'
            // Put your options here
        });
    });
    

    Options选项参数

    对常用参数进行解释

    • auto:是否自动触发上传 ,如果选择false需要手动触发通过调用:
      $('#file_upload').uploadifive('upload')
    • buttonText:指定上传按钮文字
    • checkScript:指定检查文件名是否重复的服务器端脚本
    • dnd:是否允许拖动上传,如果为false则禁用拖动上传
    • fileObjName:服务器端获取的文件对象的名称,如php的 $_FILES['fileObjName']
    • fileSizeLimit:限制上传文件的大小【单位KB,MB,GB】
    • fileType:上传文件类型:如图片 image/*,如果指定了类型限制,点击上传弹出的资源选择器中,非限定的文件类型将无法不选择
    • formData:额外提交的表单数据可以在这个参数下指定{'someKey' : 'someValue'}
    • height|上传按钮的宽度与高度只能通过这两个属性进行修改
    • multi:是否多文件上传[true|false]

    Events回调方法

    • onAddQueueItem:当文件添加至上传队列中时触发此回调方法
    $(function() {
        $('#file_upload').uploadifive({
            'uploadScript'   : '/uploadifive.php',
            'onAddQueueItem' : function(file) {
                alert('The file ' + file.name + ' was added to the queue!');
            }
        });
    });
    
    • onCancle:当点击取消上传,从上传队列中移除文件对象时触发
    $(function() {
        $('#file_upload').uploadifive({
            'uploadScript' : '/uploadifive.php',
            'onCancel'     : function() {
                alert('The file ' + file.name + ' was cancelled!');
            }
        });
    });
    
    • onUpload:当调用upload方法手动触发上传是触发一次
    • onUploadFile:在每个文件准备开始上传时触发一次【这个回调方法存在一个bug,见下文】
    $(function() {
        $('#file_upload').uploadifive({
            'uploadScript' : '/uploadifive.php'
            'onUploadFile' : function(file) {
                alert('The file ' + file.name + ' is being uploaded.');
            }
        });
    });
    
    • onProgress:文件上传过程中不断的触发,因此你可以在此回调方法中定制你的上传进度等信息
    $(function() {
        $('#file_upload').uploadifive({
            'uploadScript' : '/uploadifive.php'
            'onProgress'   : function(file, e) {
                if (e.lengthComputable) {
                    var percent = Math.round((e.loaded / e.total) * 100);
                }
                file.queueItem.find('.fileinfo').html(' - ' + percent + '%');
                file.queueItem.find('.progress-bar').css('width', percent + '%');
            }
        });
    });
    
    • onUploadComplete:文件上传完成时触发
      回调参数 file:上传完的文件对象;data:服务器端(uplodify.php)返回的信息
    $(function() {
        $('#file_upload').uploadifive({
            'uploadScript'     : '/uploadifive.php'
            'onUploadComplete' : function(file, data) {
                alert('The file ' + file.name + ' uploaded successfully.');
            }
        });
    });
    
    • onFallback:初始化时检查浏览器是否支持HTML5
    • onError:在文件添加到上传队列或者在上传的过程中发生错误的回调函数
      errorType类型见官网文档

    Methods直接调用的方法

    • debug:比较有用的debug方法,可以在控制台打印出上传的相关信息
    <a href="javascript:$('#file_upload').uploadifive('debug')">Debug</a>
    

    与七牛结合直接上传文件到七牛云存储

    注:上传到七牛需要对几个参数进行修改

    1. 七牛可以接受的fileObjName的名称是file
    2. 表单数据中必须包含上传token[token有服务器端返回]
    3. 表单数据中指定上传的key,作为七牛空间中存储的文件名
    4. uploadScript指定为:http://up.qiniu.com/

    以上2,3两项数据的传递需要修改formData选项,如果是单个文件上传,这样是没有问题的,如果是多文件上传的情况,第一个文件正常上传成功,当上传第二个时,up.qiniu.com就会返回一个错误状态码614,即文件已存在。

    最初是想在onAddQueueItem回调函数中修改formData中token和key的值,但是并没有得到想要的结果。查看请求到七牛的header中的表单信息的key值是一样的,所以,在文件加入队列中时进行修改表单formData只能触发一次,从源码中可以看到确实如此。

    继续查看文档找到onUploadFile是在每个文件上传前触发,于是修改代码,调试发现此回调函数并没有被触发,查看源码毫无此回调函数调用的踪迹,于是加入如下代码到jquery.uploadfive.js的$data.uploadFile 的函数里的填充form表单数据之前379行,如下所示:

    // Create a new FormData object
    var formData = new FormData();
    // Add the form data
    formData.append(settings.fileObjName, file);
    //trigger onUploadFile fucntion 看这里看这里看这里!!!
    if (typeof settings.onUploadFile === 'function') {
        settings.onUploadFile.call($this, file);
    }
    // Add the rest of the formData
    for (i in settings.formData) {
      formData.append(i, settings.formData[i]);
    }
    

    至此,多文件上传七牛与uploadfive的结合完成!


    参考文档:uploadify官网文档html5版本

  • 相关阅读:
    多态实现--虚函数与纯虚函数
    CentOS6编译安装gcc高版本
    Linux多进程CS服务器简单测试
    Linux单用户CS模型TCP通讯完全注释手册
    进程线程及其状态
    Java学习-字符串、字符、ASCII、数字的互相转换
    Java学习-素数
    Java学习-日期
    Java学习-多态
    Java学习-练习
  • 原文地址:https://www.cnblogs.com/skyfynn/p/5895738.html
Copyright © 2011-2022 走看看