關於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,
                    width: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>

   屬性解釋:

http://blog.sina.com.cn/s/blog_6d34781a01018149.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM