jQuery上传插件Uploadify

$(document)
.ready(
function (){
   $("#mobileFile").uploadify({
      'swf'       :'<%=request.getContextPath()%>/js/uploadify/uploadify.swf',
      'uploader'  :'<%=request.getContextPath()%>/send/taskImport.do',
      'fileDataName':'file',
      'method'      :'get',
      'buttonText':'选择文件',
      'fileTypeExts'   :'*.txt',
      'fileTypeDesc'  :'请选择txt文本文件',
      'multi'     :false,
      'auto'      :false,
      //'dataType'  :'json',
      //'debug'     :true,
      'width'     :100,
      'height'    :16,
      'queueSizeLimit' :1,
       'successTimeout' :120,
       'onUploadStart':function(file){
        clearHiddenValue();
        is_select_black($("input[name='is_filter_black']"));
        if(!src_form($("input[name='src_from']"))){
         alert('请最少选择一种号码来源');
         $("#mobileFile").uploadify('cancel');
        }
        if($("input[name='src_from']")[0].checked){
          if(!src_form($("input[name='groupName']"))){
            alert('请最少选择一个组');
            $("#mobileFile").uploadify('cancel');
          }else{
               count($("input[name='groupName']"));
               if($("#currentSmsCount").val()>$("#CountId").val()){
                 alert('选择组的下发条数大于本月剩余下发条数');
                 $("#mobileFile").uploadify('cancel');
                 return;
               }
              
          }
        }
        selectSrcForm($("input[name='src_from']"));
               $("#mobileFile").uploadify('settings', 'formData', { 'isBlackFilter':$("#isBlackFilter").val(),
                                                                    'src_form':$("#src_form").val(),
                                                                    'groupId' :$("#groupId").val()
                                                                   
                                                                    })
      },
      'onUploadSuccess' : function (file,data,response){
      alert(data);
         data=eval("("+data+")");
         if(Math.abs(data[3])>Math.abs($("#CountId").val())){
                      $('#uploadMessage').html('<font color=red>此次上传有效的号码个数为'+data[3]+"条。超出了"+(Math.abs(data[3])-Math.abs($("#CountId").val()))+"条。将不上传请重新上传。</font>");
                    }else{
                         $('#selTxtAndgroup').attr("value","重新上传");
             $('#mobileListFile').val(data[0]);
                         $('#blackListFile').val(data[1]);
                         $('#repeatListFile').val(data[2]);
                         $('#currentFileList').val(data[3]);
                         $('#uploadMessage').html('<font color=red>此次上传有效的号码个数为'+data[3]+"条。</font>");
                    }
      },
      'onUploadError' : function(file, errorCode, errorMsg) {
          if(errorCode==-200){
           alert('系统发生异常，请联系管理员');
          }
      }
   })
}
)























什么是Uploadify


原文：Uploadify is a jQuery plugin that integrates a fully-customizable multiple file upload utility on your website. It uses a mixture of Javascript， ActionScript， and any server-side language to dynamically create an instance over any DOM element on a page.







译文：Uploadify是一个jQuery插件，集成了一个完全可定制的多个文件上传您的网站上的效用。它混淆应用的Javascript，ActionScript，和任何办事器端说话来动态创建的任何一个页面上的DOM元素的一个实例。







原文: Uploadify was born out of the need for a multiple file upload utility for a CMS that was being developed.  After evaluating the other available options， RonnieSan decided the best option was to build a new plug-in and make it available to the development community.  In order to make the plug-in easy to implement and highly-customizable， the jQuery format was chosen.  After word got out， the popularity of the plug-in spawned the need for a dedicated site.  Travis Nickels volunteered his help to refine the Uploadify plug-in and make it what it is today.







译文:CMS开辟后，须要实现多文件上传功能，如许，Uploadify这个实用对象出生了。经过评过其他可用选项，RonnieSan决意创建一个新的插件供给给开辟社区。为了使这个插件轻易实验，并可高度定制，最后选择了Jquery.消息传出后，这个插件的普及，使其须要一个专门的网站来供给支撑。Travis Nickels挺身而出的去帮助和完美Uploadify插件。这就是我们今天看到的这个网站。







Uplodify的特点






Features




特点







<!--[if !supportLists]-->·         <!--[endif]-->jQuery Implementation




Jquery支撑







<!--[if !supportLists]-->·         <!--[endif]-->Multiple File Upload Capabilities




多文件上传功能







<!--[if !supportLists]-->·         <!--[endif]-->SWFObject Integration




SWFObject集成







<!--[if !supportLists]-->·         <!--[endif]-->Compatibility with Popular Server-Side Languages




风行的办事器端说话功能







<!--[if !supportLists]-->·         <!--[endif]-->Highly-Customizable




高定制性







<!--[if !supportLists]-->·         <!--[endif]-->Large Support Community




强大的社区支撑







<!--[if !supportLists]-->·         <!--[endif]-->Extensive Documentation with Examples




扩大文档和实例











怎么应用Uploadify


原文:Uploadify was created to be an easy-to-implement solution for multiple file uploads. As a jQuery plugin， the Uploadify implementation is simple and highly-customizable.



While it may require a foundational knowledge of jQuery to successfully implement， this documentation should provide a comprehensive enough reference for those who are having trouble.  If you are running into issues that this documentation can""t help solve， there is an active community of Uploadify users that can be accessed through the forums.  In addition， we""ve provided a list of FAQs that may also aid in troubleshooting your Uploadify instance







译文:



Uploadify是一个简单易用的多文件上传规划。作为一个Jquery插件，Uploadify应用简单，并具有高度的定制性。



正常应用Uploadify插件须要一些Jquery根蒂根基常识。为了削减应用题目，本文档供给了足够周全的参考常识。若是该文档不克不及解决你在应用中碰到的题目，请接见论坛（http://www.uploadify.com/forums/）获取更多信息。此外，我们供给了常见题目列表，也许这些信息也能帮助你解决Uploadify在应用中碰到的题目。











最低需求







jQuery 1.4.x or greater




Jquery1.4及更高版本







swfObject 2.2 or greater




SwfObject2.2及以上版本







Flash Player 9.0.24 or greater




Flash Player 9.0.24及以上版本











示例代码



头文件引入



<link href="uploadify/uploadify.css" type="text/css" rel="Stylesheet" rev="Stylesheet" />



<script type="text/javascript" language="javascript" src="uploadify/jquery-1.4.2.min.js"></script>



<script type="text/javascript" language="javascript" src="uploadify/swfobject.js"></script>



<script type="text/javascript" language="javascript" src="uploadify/jquery.uploadify.v2.1.4.min.js"></script>



应用Uploadify插件须要引入uploadify.css、jquery.js、swfobjects.js、和uploadify.js等4个文件







HTML文件



<input type="file" id="up_file" />



若是只是实现简单的文件上传功能，只须要在body里，添加一个file。



Js代码



<script type="text/javascript" language="javascript">



        ￥（document）.ready（function （） {



            ￥（"＃up_file"）.uploadify（{



                ""uploader"": ""/uploadify/uploadify/uploadify.swf""，



                ""script"": ""/uploadify/UploadifyHandler.ashx""，



                ""cancelImg"": ""/uploadify/uploadify/cancel.png""，



                ""folder"": ""/upload""，



                ""auto"":true，



                ""multi"":true



            }）;



        }）;



    </script>



Ok，以上文件就可以实现一个文件上传功能。







                                                                  属性







名称




类型




描述







auto




boolean




文件添加到上传队列后，主动进行上传。默认为false







buttonImg




string




浏览按钮的图片路径







buttonText




string




浏览按钮上显示的文字（不支撑中文，然则可以设置有中文的图片）







cancelImg




string




文件上传队列中的作废按钮图片路径







checkScript




string




检测办事器上已经存在的文件的办事器端脚本路径







displayData




string




文件上传过程中，在该文件的队列条目显示的数据信息。默认是上传的百分比（percentage），你可以改为”speed”，显示文件上传的均匀速度。







expressInstall




string




expressInstall.swf 的文件路径，若是策画机不存在flash，则应用该选项初始化flash。







fileDataName




string




办事器端脚本应用的文件数组名称。默认为Filedata







fileDesc




string




<!--[if !supportLists]-->1.        <!--[endif]-->该选项必须共同fileExt一路应用，他是文件类型选中显示的内容，例如:



<!--[if !supportLists]-->2.        <!--[endif]-->""fileExt""     : ""*.jpg;*.gif;*.png""，



<!--[if !supportLists]-->3.        <!--[endif]--> ""fileDesc""    : ""Web Image Files （.JPG， .GIF， .PNG）""







fileExt




string




容许上传的文件类型，应用分号（”;）”分别 例如:*.jpg;*.gif，默认为null（所有文件类型）







folder




string




上传的文件保存路径（文件夹目次）







height




integer




浏览按钮的高度







hideButton




boolean




隐蔽flash按钮，如许你就可以本身设置底层div元素的样式了







method




string




提交体式格式POST 和GET，默认是POST







multi




boolean




是否允很多文件上传。默认为false







queueID




string




页面上作为文件上传队列的元素的ID







queueSizeLimit




integer




容许上传的文件数量上限.默认是999







removeCompleted




boolean




文件上传完成后，是否主动移除队列中的文件。默认为true







rollover




boolean




若是设置为true，则鼠标移到浏览按钮上后，会有翻转结果







script




string




办事器端处理惩罚文件上传的脚本路径







scriptAccess




string




flash脚本文件的接见模式，若是在本地测试设置为always.容许的选项: ""sameDomain"" / ""always""，默认是sameDomain.







scriptData




JSON object with mixed types




在文件上传的过程中，scriptData选项容许发送额外的数据到办事器端脚本，你能像正常应用提交体式格式获取值（request.Form[“scriptData variable”]）。同时，连络.uploadifySettings（）办法，可以发送动态数据。



例如: ""scriptData""  : {""firstName"":""Ronnie""，""age"":30}







simUploadLimit




integer




同时上传文件的数量。默认为1







sizeLimit




integer




容许上传的文件大小（kb）， 例如: ""sizeLimit""   : 102400







uploader




string




Uploadify.swf文件路径







width




string




浏览按钮的宽度







wmode




String




设置该项为transparent 可以使浏览按钮的flash靠山文件透明，并且flash文件会被置为页面的最高层。 默认值：opaque







事务







onAllComplete




function




当队列中所有文件上传完成后触发。



function（event，data）







onCancel




function




当队列中的每个文件别移除时触发







onCheck




function




上传开端前，若是发明有同名的文件存在则触发该事务。







onClearQueue




function




当uploadifyClearQueue（）办法调用时触发







onComplete




function




当单个文件上传完成后触发







onError




function




当单个文件上传失足时触发







onInit




function




当uploadify实例加载时触发











事务



1、onAllComplete：当队列中所有文件上传完成后触发。



示例



‘onAllComplete’:function（event，data）{….}



event:事务对象（the event object）



data:包含上传文件的具体信息对象







Data数据对象







filesUploaded




上传了的文件的数量







errors




碰到的错误总数







allBytesLoaded




上传的总字节数







speed




均匀上传速度（kb/s）







2、onCancel:当队列中的每个文件别移除时触发



示例



‘onCancel’:function（event，ID，fileObj，data）{…}



event:事务对象（the event object）



ID:被作废的文件的独一标识



fileObj:选中文件的对象，他包含的属性列表如下







FileOjb属性







name




文件名







size




文件大小（byte）







creationDate




文件的创建日期







modifiedDate




文件最后一次批改日期







type




文件的扩大名<包含’.’>







data：文件队列具体信息







data属性







fileCount




队列中残剩文件的数量







allBytesTotal




队列中残剩文件的大小（byte）







3、onCheck: 上传开端前，若是发明有同名的文件存在则触发该事务。



示例：function（event，data，key）｛。。。。｝



event:事务对象（the event object）



data:包含办事器段所有文件名称的一个列表。每个文件的关键字是队列中的独一标识。



key:用户办事器段检测的独一标识



4、onClearQueue: 当uploadifyClearQueue（）办法调用时触发



示例:’onClearQueue’:function（event）{….}



event:事务对象（the event object）



5、onComplete：当单个文件上传完成后触发



示例：’onComplete’:function（event，ID，fileObj，response，data）{….}



event:事务对象（the event object）



ID:该文件在文件队列中的独一默示



fileObj:选中文件的对象，他包含的属性列表如下







FileOjb属性







name




文件名







filePath




上传办事器后的文件路径







size




文件大小（byte）







creationDate




文件的创建日期







modifiedDate




文件最后一次批改日期







type




文件的扩大名<包含’.’>







response:办事器端返回的Response文本



data：文件队列具体信息和文件上传的一般数据







data属性







fileCount




队列中残剩文件的数量







Speed




上传文件的均匀速度（byte）







6、onError：当单个文件上传失足时触发



示例：’onError’:function（event，ID，fileObj，errorObj）{…}



event:事务对象（the event object）



fileObj:选中文件的对象，他包含的属性列表如下







FileOjb属性







name




文件名







size




文件大小（byte）







creationDate




文件的创建日期







modifiedDate




文件最后一次批改日期







type




文件的扩大名<包含’.’>







errorObj:返回的错误信息对象







errorObj属性







type




HTTP/IO/ Security 之一







info




描述返回错误类型的信息。







7、onInit: 当uploadify实例加载时触发



示例:’onInit’:function（）{…}



8、onOpen:文件开端上传时触发



示例:’onOpen’:function（event，ID，fileObj）{…}



event:事务对象（the event object）



ID:开端上传的文件在文件队列中的独一默示



fileObj:选中文件的对象，他包含的属性列表如下







FileOjb属性







name




文件名







size




文件大小（byte）







creationDate




文件的创建日期







modifiedDate




文件最后一次批改日期







type




文件的扩大名<包含’.’>







9、onProgress: 点击上传时触发，若是auto设置为true则是选择文件时触发，若是有多个文件上传则遍历全部文件队列，在onOpen之后触发。



示例：’onProgress’:function（event，ID，fileObj，data）{…}



event:事务对象（the event object）



ID:正在上传的文件在文件队列中的独一默示



fileObj:选中文件的对象，他包含的属性列表如下







FileOjb属性







name




文件名







size




文件大小（byte）







creationDate




文件的创建日期







modifiedDate




文件最后一次批改日期







type




文件的扩大名<包含’.’>







data:上传和队列的信息对象。







data属性







percentage




文件上传的百分比







bytesLoaded




已经上传的字节数







allBytesLoaded




全部队列中上传的字节数







speed




上传文件的均匀速度（byte）







10、onQueueFull: 当设置了queueSizeLimit并且选择的文件个数超出了queueSizeLimit的值时触发



示例:’onQueueFull’:function（event，queueSizeLimit）{}



event:事务对象（the event object）



queueSizeLimit:上传文件的最大数。queueSizeLimit属性值。



11、onSelect: 选择文件时触发，



示例:’onSelect’:function（event，ID，fileObj）{…}



event:事务对象（the event object）



ID:选中文件的独一标识



fileObj:选中文件的对象，他包含的属性列表如下







FileOjb属性







name




文件名







size




文件大小（byte）







creationDate




文件的创建日期







modifiedDate




文件最后一次批改日期







type




文件的扩大名<包含’.’>







12、onSelectOnce: 在单文件或多文件上传时，选择文件时触发。



示例:’onSelectOnce’:function（event，data）{…}



event:事务对象（the event object）



data:选择的操纵信息







data属性







fileCount




队列中的文件数量







filesSelected




选择文件操纵中选中的文件数量







filesReplaced




队列中被调换的文件数量







allBytesTotal




全部队列中上传的字节数







13、onSWFReady:当flash文件加载时触发



示例:’onSWFReady’:function（）{}







办法



<!--[if !supportLists]-->·         <!--[endif]-->uploadify（） 创建一个uploadify实例。



<!--[if !supportLists]-->·         <!--[endif]-->uploadifyCancel（） 从队列中移除一个文件。若是文件正在上传，则停止上传，并在队列中移除该文件。uploadifyCancel（￥（“. uploadifyQueueItem”）.first（）.attr（“id”）.replace（“页面上的file的ID”，””））;



<!--[if !supportLists]-->·         <!--[endif]-->uploadifyClearQueue（）:作废文件上传，并移除队列中的所有文件。



<!--[if !supportLists]-->·         <!--[endif]-->uploadifySettings（）:更改uploadify初始化时的选项uploadifySettings（‘buttonText’，’Browse’）



<!--[if !supportLists]-->·         <!--[endif]-->uploadifyUpload（）上传文件:uploadifyUpload（￥（“. uploadifyQueueItem”）.first（）.attr（“id”）.replace（“页面上的file的ID”，’’））;



备注：因为官方给出的文件上传用的是PHP说话文件。所以本身写了一个.net的



附录

<!--[if !supportLists]-->·         <!--[endif]-->Uploadify的官方网站: http://www.uploadify.com/



<!--[if !supportLists]-->·         <!--[endif]-->Uploadify的下载页面: http://www.uploadify.com/download/



<!--[if !supportLists]-->·         <!--[endif]-->Uploadify-V2.1.4 :http://www.uploadify.com/wp-content/uploads/uploadify-v2.1.4.zip



<!--[if !supportLists]-->·         <!--[endif]-->帮助文档: http://www.uploadify.com/documentation/



<!--[if !supportLists]-->·         <!--[endif]-->常见题目: http://www.uploadify.com/faqs/



<!--[if !supportLists]-->·         <!--[endif]-->Demo下载地址: http://dl.dbank.com/c08qsci31i