溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文介紹jQuery的一個插件uploadify，現在的版本支持兩種實現。一個是flash，一個是HTML5。本文介紹的是flash版本的。
uploadify的官網
uploadify是一個jQuery插件,讓程序員很容易就實現多文件的上傳功能。有兩種不同的版本，一個是flash，另一個是HTML5.
因為官網已經有很詳細的文檔，而且簡單易懂，這邊就不在詳細介紹uploadify的API。
服務器端的代碼與之前文章介紹的差不多，所以為了減少文章的篇幅，這邊就不在展示服務器端的代碼了。現在具體講解前端界面的實現。
1.下載uploadify
2.新建上傳頁面，引入jQuery，uploadify的js。如下所示：
- <%@ page language="java" contentType="text/html; charset=UTF-8"
- pageEncoding="UTF-8"%>
- <!DOCTYPE>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>File Upload</title>
- <link rel="stylesheet" type="text/css" href="css/uploadify.css" />
- <link rel="stylesheet" type="text/css" href="css/UploadifyFileUpload.css" />
- </head>
- <body>
- <div id="head"><h4>利用uploadify實現文件上傳</h4></div>
- <div id="body">
- <div class="example">
- <div>
- <h7>example 1</h7>
- </div>
- <div>
- <input type="file" id="file_upload1" />
- </div>
- </div>
- </div>
- <div id="footer"></div>
- <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
- <script type="text/javascript" src="js/jquery.uploadify-3.1.js"></script>
- <script type="text/javascript" src="js/UploadifyFileUpload.js"></script>
- </body>
- </html>
2.UploadifyFileUpload.js
- $(function() {
- // example 1
- $('#file_upload1').uploadify(
- {
- 'swf' : 'flash/uploadify.swf',//指定flash，在下載的uploadify里有
- 'uploader' : 'jsonResultFileLoadAction', //action地址
- 'fileObjName' : 'file', //文件名
- 'buttonText' : '瀏覽', //按鈕顯示
- 'buttonCursor' : 'point', //按鈕鼠標樣式
- 'onUploadSuccess' : function(file, data, response) {
- alert('The file ' + file.name
- + ' was successfully uploaded with a response of '
- + response + ':' + data);
- } //上傳成功后的調函數
- });
- });
總結：uploadify是一個非常棒的jQuery插件，幫助開發人員快速輕松地實現一個功能強大的文件上傳。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
