溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

文件上傳之三基于flash的文件上傳

發(fā)布時間：2020-07-06 00:59:26 來源：網(wǎng)絡(luò) 閱讀：2743 作者：zhbhun 欄目：web開發(fā)

 本文介紹jQuery的一個插件uploadify，現(xiàn)在的版本支持兩種實現(xiàn)。一個是flash，一個是HTML5。本文介紹的是flash版本的。

uploadify的官網(wǎng)

uploadify介紹

  uploadify是一個jQuery插件,讓程序員很容易就實現(xiàn)多文件的上傳功能。有兩種不同的版本，一個是flash，另一個是HTML5.

特點

  • 多文件上傳
  • 拖拽（HTML5版本）
  • 可以實時的查看上傳情況（百分比，上傳速度等）
  • 定義上傳文件的限制，如大小，數(shù)目，類型

uploadify的API

  因為官網(wǎng)已經(jīng)有很詳細(xì)的文檔，而且簡單易懂，這邊就不在詳細(xì)介紹uploadify的API。

Struts2與uploadify的結(jié)合

  服務(wù)器端的代碼與之前文章介紹的差不多，所以為了減少文章的篇幅，這邊就不在展示服務(wù)器端的代碼了。現(xiàn)在具體講解前端界面的實現(xiàn)。

1.下載uploadify

2.新建上傳頁面，引入jQuery，uploadify的js。如下所示：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" 
  2.     pageEncoding="UTF-8"%> 
  3. <!DOCTYPE> 
  4. <html> 
  5. <head> 
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  7. <title>File Upload</title> 
  8. <link rel="stylesheet" type="text/css" href="css/uploadify.css" /> 
  9. <link rel="stylesheet" type="text/css" href="css/UploadifyFileUpload.css" /> 
  10. </head> 
  11. <body> 
  12.     <div id="head"><h4>利用uploadify實現(xiàn)文件上傳</h4></div> 
  13.     <div id="body"> 
  14.         <div class="example"> 
  15.             <div> 
  16.                 <h7>example 1</h7> 
  17.             </div> 
  18.             <div> 
  19.                 <input type="file" id="file_upload1" /> 
  20.             </div> 
  21.         </div> 
  22.     </div> 
  23.     <div id="footer"></div> 
  24.     <script type="text/javascript" src="js/jquery-1.9.1.js"></script> 
  25.     <script type="text/javascript" src="js/jquery.uploadify-3.1.js"></script> 
  26.     <script type="text/javascript" src="js/UploadifyFileUpload.js"></script> 
  27. </body> 
  28. </html> 

2.UploadifyFileUpload.js

  1. $(function() { 
  2.     // example 1 
  3.     $('#file_upload1').uploadify( 
  4.             { 
  5.                 'swf' : 'flash/uploadify.swf',//指定flash，在下載的uploadify里有 
  6.                 'uploader' : 'jsonResultFileLoadAction', //action地址
  7.                 'fileObjName' : 'file', //文件名
  8.                 'buttonText' : '瀏覽', //按鈕顯示
  9.                 'buttonCursor' : 'point', //按鈕鼠標(biāo)樣式
  10.                 'onUploadSuccess' : function(file, data, response) { 
  11.                     alert('The file ' + file.name 
  12.                             + ' was successfully uploaded with a response of ' 
  13.                             + response + ':' + data); 
  14.                 } //上傳成功后的調(diào)函數(shù)
  15.             }); 
  16. }); 

總結(jié)：uploadify是一個非常棒的jQuery插件，幫助開發(fā)人員快速輕松地實現(xiàn)一個功能強大的文件上傳。

 

附件：http://down.51cto.com/data/2362510
向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手