zoukankan      html  css  js  c++  java
  • 关于jquery文件上传插件 uploadify 3.1的使用

       要使用uplaodify3.1,自然要下载相应的包,下载地址http://www.uploadify.com/download/,这里有两种包,一个是基于flash,免费的,一个是基于html5,需要付费,我这里所说的也是前一种。当然现在可能已经不再是3.1版本了,估计是3.2了。不过,差别不会太大!

       首先在页面中引入一下文件:

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

     uploadify.swf要和css放在一起,不然会找不到。

    jsp页面里:

    <input type="file" name="uploadify" id="uploadify" value="浏览"/>
    <div id="fileQueue" style="border-top: thin solid gray;"></div>

     一下是我自己的页面的代码:

    <script type="text/javascript">
         $('#rightFrame').load(function(){
           var account = $("#account").val();
           var id= $("#userId").val();
           var currentNode=0;
           $("#uploadify").uploadify({
          //注:这里uploadify为html标签,文件输入框id
                        swf: 'css/uploadify.swf',
                        uploader: 'uploadfile.action;',
                        cancelImg: '/images/uploadify-cancel.png',
                        buttonText:'选择文件',
                        fileObjName :'uploadify',
                        auto: true,
                        multi:true,
                        Debug:true,
                        queueID:'fileQueue',//这里fileQueue 为上传进度条显示在哪个div里
                        formData:{'account':account,'id':id,'currentNode':$("#rightFrame").contents().find("#test").val()},
                        removeCompleted:true,
                        queueSizeLimit:999,
                        fileSizeLimit:'100MB',
                        height:28,
                        90,
                        successTimeout:28,
                        requeueErrors:true,
                        uploadLimit:5,
                        onUploadSuccess: function (file, data, response) {
                         if(response)
                         {
                          currentNode=data;
                            }
                  },
                  onQueueComplete : function(stats){
                      window.parent.rightFrame.location.href="fileaction?filenode="+currentNode;
                   alert("上传完毕");
                     }
                      
                 });
             });
         
         </script>

    属性解释:

    auto

    Boolean

    True

    添加到队列后是否自动上传

    buttonClass

    String

    Empty String

    为Uploadify按钮添加一个类名

    buttonCursor

    String

    “hand”

    鼠标移上浏览按钮显示的鼠标样式

    两个值:arrow(箭头)、hand(手形)

    buttonImage

    String

    Null

    “浏览”按钮的背景图像的路径。

    如果使用默认的样式,你可以设置按钮悬停状态(这个选项是一个方便的选项和按钮分配图像的最佳方式是在CSS文件中。)

    buttonText

    String

    “SELECT FILES”

    显示在浏览按钮上的文本。注:若没有修改uploadify.swf的字体和uploadify.js文件的编码方式,使用中文将会是乱码

    checkExisting

    String

    Debug

    Boolean

    False

    设置为True打开SWFUpload调试模式。

    fileObjName

    String

    “Filedata”

    在服务器端接收文件的Form表单键名

    fileSizeLimit

    Number

    0

    允许上传文件的最大大小。这个值可以是一个数字或字符串。如果它是一个字符串,它接受一个单位(B, KB, MB, or GB)。默认单位为KB。您可以将此值设置为0 ,没有限制。

    fileTypeDesc

    String

    “All Files”

    可选的文件的说明。此字符串将出现在浏览文件对话框的文件类型下拉框中。

    fileTypeExts

    String

    “*.*”

    允许上传的文件扩展名。可以以英文分号隔开的多种文件扩展名。即”*.jpg;*.gif;”

    注:如果用户手动键入文件名,将会绕过此安全级别,所以你需要在后台再次对文件名类型进行验证。

    formData

    JSON Object

    Empty Object

    一个额外的JSON对象数据,将与每个文件一起发送至服务器端。如果为动态值,请在onUploadStart()中使用settings()方法更改该JSON值

    Height

    Number

    30

    浏览按钮所显示的高度

    method

    String

    “post”

    上传文件的方式。

    两个值:”get”、”post”

    multi

    Boolean

    True

    设置是否为多文件上传,如果设置为False,一次将只能上传一个文件

    overrideEvents

    JSON Array

    Empty Array

    你想绕过的默认脚本的事件名称的数组。你可以告诉在文档页中的每个事件可以被重写的事件。

    preventCaching

    Boolean

    True

    一个防止Flash缓存和冲突的方式,如果设置为True,则Flash的URL将会添加一个随机数。

    progressData

    String

    “percentage”

    设置要在文件上传进度更新队列项目中显示数据的类型。

    两个值”percentage”(显示百分比)、” speed”(显示速度)

    queueID

    String

    False

    上传文件队列所放的元素ID,必须为ID,且不像jQuery选择器那样,它不需要加#号。如果为false,则队列会自动添加到浏览按钮下方。

    queueSizeLimit

    Number

    999

    一次可以在队列中文件的最大数目。这并不限制可以上载的文件的数目。若要限制可以上载的文件的数目,请使用 uploadLimit。如果选定要添加到队列的文件的数目超过此限制,则会触发 onSelectError 事件。

    removeCompleted

    Boolean

    True

    当文件上传完成后,是否将此文件从上传队列中清除(默认清除)。

    removeTimeout

    Number

    3

    从文件上传完成到清除此文件之间的延迟。单位:秒

    requeueErrors

    Boolean

    False

    如果设置为true,期间上传回传失误,重新排队,并多次试图上传的文件。

    successTimeout

    Number

    30

    上传成功后,将等待服务器的响应时间。在此时间后,若服务器未响应,则默认为成功(因为已经上传完成,只是等待服务器的响应)。单位:秒

    swf

    String

    “uploadify.swf”

    uploadify中的uploadify.swf的路径,可以是相对或绝对路径。相对路径为相对于当前页面路径。

    uploader

    String

    “uploadify.php”

    服务器上传脚本,即接收上传文件后台处理文件路径,可以是相对或绝对路径。相对路径为相对于当前页面路径。

    uploadLimit

    Number

    999

    允许您上传的文件的最大数量。当达到或超过这个数字, onUploadError事件被触发。

    width

    Number

    120

    浏览按钮的宽度。

    需要注意的是:fileObjName属性 它必须和你服务器里文件接收名一致,不然接收不到路径!

  • 相关阅读:
    krpano--控制热点跳转到场景的指定视角
    bzoj 4237: 稻草人 -- CDQ分治
    bzoj 4176: Lucas的数论 -- 杜教筛,莫比乌斯反演
    bzoj 3545/3551: [ONTAK2010]Peaks -- 主席树,最小生成树,倍增
    bzoj 4627: [BeiJing2016]回转寿司 -- 权值线段树
    bzoj 1901: Zju2112 Dynamic Rankings -- 主席树,树状数组,哈希
    bzoj 3252: 攻略 -- 长链剖分+贪心
    bzoj 5055: 膜法师 -- 树状数组
    bzoj 1006: [HNOI2008]神奇的国度 -- 弦图(最大势算法)
    bzoj 1176: [Balkan2007]Mokia&&2683: 简单题 -- cdq分治
  • 原文地址:https://www.cnblogs.com/zhujiabin/p/4978922.html
Copyright © 2011-2022 走看看