zoukankan      html  css  js  c++  java
  • JQuery上传插件uploadify整理(Events)

    Arguments

    • file
      The file object being cancelled

    onCancel:调用calcel方法。$('#upload').uploadify('cancel');

    Arguments

    • queueItemCount
      The number of queue items that are being cancelled.

    onClearQueue:调用cancel方法,传一个'*'参数。$('#upload').uploadify('cancel','*');

     1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="JQ_uploadify.Demo" %>
     2 
     3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     4 <html xmlns="http://www.w3.org/1999/xhtml">
     5 <head runat="server">
     6     <title></title>
     7     <link href="/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
     8     <link href="/css/css.css" rel="stylesheet" type="text/css" />
     9     <script src="/js/jquery-1.8.3.js" type="text/javascript"></script>
    10     <script src="/uploadify/jquery.uploadify.js" type="text/javascript"></script>
    11     <style type="text/css">
    12         
    13     </style>
    14     <script type="text/javascript">
    15         $(function () {
    16             $("#upload").uploadify({
    17                 'swf': '/uploadify/uploadify.swf',
    18                 'uploader': '/ashx/upload.ashx',
    19                 'onClearQueue': function (queueItemCount) { alert(queueItemCount); }
    20             });
    21         });
    22     </script>
    23 </head>
    24 <body>
    25     <form id="form1" runat="server">
    26     <div>
    27         <input type="file" name="upload" value="上传" id="upload" />
    28         <input type="button" name="" value="取消" onclick="$('#upload').uploadify('cancel','*');" />
    29     </div>
    30     </form>
    31 </body>
    32 </html>
    onClearQueue

    onDestroy:调用destroy方法。$('#upload').uploadify('destroy');

    Arguments

    • queueData
      The queueData object containing information about the queue:
      • filesSelected
        The number of files selected in browse files dialog
      • filesQueued
        The number of files added to the queue (that didn’t return an error)
      • filesReplaced
        The number of files replaced in the queue
      • filesCancelled
        The number of files that were cancelled from being added to the queue (not replaced)
      • filesErrored
        The number of files that returned an error

    onDialogClose:浏览文件对话框关闭时触发。如果此事件被重写,出错不会提示错误信息。

    onDialogOpen:浏览文件对话框打开时触发。

    onDisable:$('#upload').uploadify('disable', true);

    onEnable:$('#upload').uploadify('disable', false);

    onFallback:Flash版本与浏览器不兼容触发。

    Arguments

    • instance
      The instance of the uploadify object

    onInit:初始化事件。

    Arguments

    • queueData
      The queueData object containing information about the queue:
      • uploadsSuccessful
        The number of uploads that were successfully completed
      • uploadsErrored
        The number of uploads that returned an error

    onQueueComplete:进入队列完成。

    Arguments

    • file
      The file object that was selected.

    onSelect:从浏览文件对话框选择放入到队列时触发。

    Arguments

    • file
      The file object that returned the error.
    • errorCode
      The error code that was returned.  The following constants can be used when determining the error code:
      • QUEUE_LIMIT_EXCEEDED – The number of files selected will push the size of the queue passed the limit that was set.
      • FILE_EXCEEDS_SIZE_LIMIT – The size of the file exceeds the limit that was set.
      • ZERO_BYTE_FILE – The file has no size.
      • INVALID_FILETYPE – The file type does not match the file type limitations that were set.
    • errorMsg
      The error message indicating the value of the limit that was exceeded.

    *You can access a full error message using ‘this.queueData.errorMsg’ if you do not override the default event handler.

    onSelectError:只要上传发生错误,此事件都能捕捉到。

     

    onSWFReady:Flash对象加载完毕时触发。

    onUploadComplete:上传完成时触发,无法判断上传成功或失败。

    Arguments

    • file
      The file object that was uploaded
    • errorCode
      The error code that was returned
    • errorMsg
      The error message that was returned
    • errorString
      The human-readable error message containing all the details of the error

    onUploadError:上传失败时触发。

    Arguments

    • file
      The file object being uploaded
    • bytesUploaded
      The number of bytes of the file that have been uploaded
    • bytesTotal
      The total number of bytes of the file
    • totalBytesUploaded
      The total number of bytes uploaded in the current upload operation (all files)
    • totalBytesTotal
      The total number of bytes to be uploaded (all files)

    onUploadProgress:显示已经上传的大小。

    Arguments

    • file
      The file object that is about to be uploaded

    onUploadStart:开始上传时触发。

    onUploadSuccess:上传成功时触发。

     最后测一下,各个事件的执行顺序。

    程序如下:

     1 $(function () {
     2     $("#upload").uploadify({
     3         'auto': true,
     4         'swf': '/uploadify/uploadify.swf',
     5         'uploader': '/ashx/upload.ashx',
     6         'onDialogClose': function () { alert('onDialogClose'); },
     7         'onDialogOpen': function () { alert('onDialogOpen'); },
     8         'onInit': function () { alert('onInit'); },
     9         'onQueueComplete': function () { alert('onQueueComplete'); },
    10         'onSelect': function () { alert('onSelect'); },
    11         'onSWFReady': function () { alert('onSWFReady'); },
    12         'onUploadComplete': function () { alert('onUploadComplete'); },
    13         'onUploadProgress': function () { alert('onUploadProgress'); },
    14         'onUploadStart': function () { alert('onUploadStart'); },
    15         'onUploadSuccess': function () { alert('onUploadSuccess'); }
    16     });
    17 });

    1、2、3、4、

    5、6、7、8、

    9、10、

    本文版权归作者和博客园共有,来源网址:http://www.cnblogs.com/tq1226112215/
    欢迎各位转载,但是未经作者本人同意,转载文章之后必须在文章页面明显位置给出作者和原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    HDU
    HYSBZ
    HDU
    POJ
    HDU
    HDU
    HDU
    「luogu2680」[NOIp2015] 运输计划
    「luogu1417」烹调方案
    网络(最大)流初步+二分图初步 (浅谈EK,Dinic, Hungarian method:]
  • 原文地址:https://www.cnblogs.com/tq1226112215/p/3507391.html
Copyright © 2011-2022 走看看