當前位置：首頁 >

Uploadify v3.2.1

發布時間：2025/5/22 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 Uploadify v3.2.1 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

2019獨角獸企業重金招聘Python工程師標準>>>

這幾天做一個web項目的上傳功能折騰了好幾天，發現了一個相當的好用的web上傳插件，趕緊記下來，以后用的時候方便。

官方下載地址：http://www.uploadify.com/download/

官方文檔：http://www.uploadify.com/documentation/

七郎的參數說明的博客，講的很全（侵刪）：http://www.cnblogs.com/yangy608/p/3915349.html

一、簡單使用方法：

1.新建uploadify文件夾放入需要的插件（因為uploadify是依賴于jquery的,所以我直接也把jquery放進去了，下載的插件包是沒有jquery的）

目錄結構

?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

2.新建html頁面，并引入相應的包（紅色框中的部分）

寫入必要的HTML文本

3.在js中引用uploadify插件

常規的uploadify插件設置

$("#uploadInput").uploadify({ //上傳附件'swf': '../../testUploadify/uploadify/uploadify.swf', //加載swf文件'uploader': '/nutzbook/testUploadify/uploadifyCommon', //處理此文件的后臺文件'cancelImg': '../../testUploadify/uploadify/uploadify-cancel.png', //插件上的小叉叉的圖片'queueID': 'accessory', //存放上傳文件的div的Id'filleSizeLimit':'20MB', //上傳的最大文件的大小'auto': true, //設置為true當選擇文件后就直接上傳了，為false需要點擊上傳按鈕才上傳 'multi': true, //設置為true時可以上傳多個文件。'buttonText':'上傳附件', //上傳按鈕的名稱'removeCompleted':false, //是否自動將已完成任務從隊列中刪除，設置為false則會一直保留此任務顯示'onUploadStart':function(file){//上傳開始的時候執行的，返回false就不往下執行},'onSWFReady': function() {//flash文件載入成功后觸發，也可以理解為uploadify插件加載成功后執行},'onUploadSuccess': function(file, data) {//文件上傳成功后執行}});

這樣就簡單的實現了文件的上傳功能

4.完整的代碼塊

前端

后端

package net.zb.nutzbook.control;import java.io.ByteArrayOutputStream; import java.io.File;import javax.imageio.stream.FileImageInputStream;import org.nutz.mvc.annotation.AdaptBy; import org.nutz.mvc.annotation.At; import org.nutz.mvc.annotation.Ok; import org.nutz.mvc.annotation.Param; import org.nutz.mvc.upload.TempFile; import org.nutz.mvc.upload.UploadAdaptor;@At("/testUploadify") public class UploadifyAction {/*** 跳轉至文件測試頁面 * @return*/@At("/loadUploadHtml")@Ok("redirect:/testUploadify/html/myupload_zb.html")public String loadUploadHtml() {return "success";}/*** 處理上傳文件* @param file* @return*/@At("/uploadifyCommon")@AdaptBy(type = UploadAdaptor.class, args = { "/uploadTemp", "8192","UTF-8", "10" })@Ok("json")public String uploadifyCommon(@Param("Filedata") TempFile file) {if (file != null) {File fl = file.getFile();FileImageInputStream pic = null;ByteArrayOutputStream bos = null;try {pic = new FileImageInputStream(fl);byte[] buffer = null;bos = new ByteArrayOutputStream();byte[] b = new byte[1024];int n = 0;while ((n = pic.read(b)) != -1) {bos.write(b, 0, n);}buffer = bos.toByteArray();//把buffer插入數據庫就可以了} catch (Exception e) {System.out.println("上傳文件出錯！"+e);}}return "success"; //返回此附件的數據庫Id} }

上傳成功效果圖

二、擴展

1.增加小叉叉的刪除功能

（1）新建集合變量保存附件

var fileList = []; ? ? ?//保存附件的集合

（2）附件上傳成功的時候把附件保存進集合

'onUploadSuccess': function(file, data) {var file = {"fileId": file.id,"fid": data};fileList.push(file);cancelAtt();}

（3）增加小叉叉的點擊方法

/*** 點擊附件后面的小叉叉刪除附件的方法*/var cancelAtt = function() { //點擊附件的那個小叉叉$("#accessory .cancel").off("click"); //取消原本的單擊事件$("#accessory .cancel").on("click",function() {var fileId = $(this).parent(".uploadify-queue-item").attr("id"); // 文件的html中的Idvar fileInfo = null; // 文件后端返回的Id(數據庫的文件Id)for (var i = 0; i < fileList.length; i++) {if (fileList[i].fileId = fileId) { // 如果文件集合中有當前的文件fileInfo = fileList[i].fid; // 把文件的數據庫Id獲取到fileList.splice(i,1); // 把集合中的文件刪除break;}}if (fileInfo != null) { // 如果文件的數據庫Id存在$.ajax({type: "post",url: "testUploadify/deleteAtt", //刪除數據庫中此id的附件async: true,data: {attId: ~fileInfo.indexOf('"') ? fileInfo.substring(1, fileInfo.length - 1) : fileInfo},success: function(data) {}});}});}

（4）完整的前端代碼

<!DOCTYPE html> <html><head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../uploadify/uploadify.css" /> <script src="../uploadify/jquery-2.1.3.js" type="text/javascript"charset="utf-8"></script> <script src="../uploadify/jquery.uploadify.min.js"type="text/javascript" charset="utf-8"></script> </head><body><input type="file" name="uploadify" id="uploadInput" /><div id="accessory"></div><script type="text/javascript">var fileList = []; //保存附件的集合$("#uploadInput").uploadify({ //上傳附件'swf': '../../testUploadify/uploadify/uploadify.swf', //加載swf文件'uploader': '/nutzbook/testUploadify/uploadifyCommon', //處理此文件的后臺文件'cancelImg': '../../testUploadify/uploadify/uploadify-cancel.png', //插件上的小叉叉的圖片'queueID': 'accessory', //存放上傳文件的div的Id'filleSizeLimit':'20MB', //上傳的最大文件的大小'auto': true, //設置為true當選擇文件后就直接上傳了，為false需要點擊上傳按鈕才上傳 'multi': true, //設置為true時可以上傳多個文件。'buttonText':'上傳附件', //上傳按鈕的名稱'removeCompleted':false, //是否自動將已完成任務從隊列中刪除，設置為false則會一直保留此任務顯示'onUploadStart':function(file){//上傳開始的時候執行的，返回false就不往下執行},'onSWFReady': function() {//flash文件載入成功后觸發，也可以理解為uploadify插件加載成功后執行},'onUploadSuccess': function(file, data) {var file = {"fileId": file.id,"fid": data};fileList.push(file);cancelAtt();}});/*** 點擊附件后面的小叉叉刪除附件的方法*/var cancelAtt = function() { //點擊附件的那個小叉叉$("#accessory .cancel").off("click"); //取消原本的單擊事件$("#accessory .cancel").on("click",function() {var fileId = $(this).parent(".uploadify-queue-item").attr("id"); // 文件的html中的Idvar fileInfo = null; // 文件后端返回的Id(數據庫的文件Id)for (var i = 0; i < fileList.length; i++) {if (fileList[i].fileId = fileId) { // 如果文件集合中有當前的文件fileInfo = fileList[i].fid; // 把文件的數據庫Id獲取到fileList.splice(i,1); // 把集合中的文件刪除break;}}if (fileInfo != null) { // 如果文件的數據庫Id存在$.ajax({type: "post",url: "testUploadify/deleteAtt", //刪除數據庫中此id的附件async: true,data: {attId: ~fileInfo.indexOf('"') ? fileInfo.substring(1, fileInfo.length - 1) : fileInfo},success: function(data) {}});}});}</script> </body> </html>

2.草稿文件加載附件塊

（1）設置加載uploadify插件為回調函數

loadAttachment(function() {//原插件引用方法});

（2）查詢數據庫的此附件，然后加載

/*** 如果是草稿文件，查詢有附件就加載附件*/ var loadAttachment = function(callback) { $.ajax({type: "post",url: "testUploadify/loadAttachment", //查詢附件async: true,data: {fileId: ** //附件Id,傳參},success: function(data) {var da = $.parseJSON(data);var html = "";if (da) {$.each(da, function(index, d) {html += "<div id=\"" + d.attachmentId + "\" class=\"uploadify-queue-item\">";html += "<div class=\"cancel\">";html += "<a href=\"javascript:$(\'#uploadFiles\').uploadify(\'cancel\', \'" + d.attachmentId + "\')\">X</a>";html += "</div> ";html += "<span class=\"fileName\">" + d.attachmentName + "</span>";html += "<span class=\"data\"> - Complete</span>";html += "<div class=\"uploadify-progress\">";html += "<div class=\"uploadify-progress-bar\" style=\"width: 100%;\">";html += "</div>";html += "</div>";html += "</div>";var file = {"fileId": d.attachmentId,"fid": d.attachmentId};fileList.push(file);});}$("#accessory").html(html);cancelAtt(); //使附件后的叉叉生效callback(); //執行加載附件的回調}}); }

（3）前端完整代碼

<!DOCTYPE html> <html><head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../uploadify/uploadify.css" /> <script src="../uploadify/jquery-2.1.3.js" type="text/javascript"charset="utf-8"></script> <script src="../uploadify/jquery.uploadify.min.js"type="text/javascript" charset="utf-8"></script> </head><body><input type="file" name="uploadify" id="uploadInput" /><div id="accessory"></div><script type="text/javascript">var fileList = []; //保存附件的集合loadAttachment(function() {$("#uploadInput").uploadify({ //上傳附件'swf': '../../testUploadify/uploadify/uploadify.swf', //加載swf文件'uploader': '/nutzbook/testUploadify/uploadifyCommon', //處理此文件的后臺文件'cancelImg': '../../testUploadify/uploadify/uploadify-cancel.png', //插件上的小叉叉的圖片'queueID': 'accessory', //存放上傳文件的div的Id'filleSizeLimit':'20MB', //上傳的最大文件的大小'auto': true, //設置為true當選擇文件后就直接上傳了，為false需要點擊上傳按鈕才上傳 'multi': true, //設置為true時可以上傳多個文件。'buttonText':'上傳附件', //上傳按鈕的名稱'removeCompleted':false, //是否自動將已完成任務從隊列中刪除，設置為false則會一直保留此任務顯示'onUploadStart':function(file){//上傳開始的時候執行的，返回false就不往下執行},'onSWFReady': function() {//flash文件載入成功后觸發，也可以理解為uploadify插件加載成功后執行},'onUploadSuccess': function(file, data) {var file = {"fileId": file.id,"fid": data};fileList.push(file);cancelAtt();}});});/*** 點擊附件后面的小叉叉刪除附件的方法*/var cancelAtt = function() { //點擊附件的那個小叉叉$("#accessory .cancel").off("click"); //取消原本的單擊事件$("#accessory .cancel").on("click",function() {var fileId = $(this).parent(".uploadify-queue-item").attr("id"); // 文件的html中的Idvar fileInfo = null; // 文件后端返回的Id(數據庫的文件Id)for (var i = 0; i < fileList.length; i++) {if (fileList[i].fileId = fileId) { // 如果文件集合中有當前的文件fileInfo = fileList[i].fid; // 把文件的數據庫Id獲取到fileList.splice(i,1); // 把集合中的文件刪除break;}}if (fileInfo != null) { // 如果文件的數據庫Id存在$.ajax({type: "post",url: "testUploadify/deleteAtt", //刪除數據庫中此id的附件async: true,data: {attId: ~fileInfo.indexOf('"') ? fileInfo.substring(1, fileInfo.length - 1) : fileInfo},success: function(data) {}});}});}/*** 如果是草稿文件，查詢有附件就加載附件*/var loadAttachment = function(callback) { $.ajax({type: "post",url: "testUploadify/loadAttachment", //查詢附件async: true,data: {fileId: ** //附件Id,傳參},success: function(data) {var da = $.parseJSON(data);var html = "";if (da) {$.each(da, function(index, d) {html += "<div id=\"" + d.attachmentId + "\" class=\"uploadify-queue-item\">";html += "<div class=\"cancel\">";html += "<a href=\"javascript:$(\'#uploadFiles\').uploadify(\'cancel\', \'" + d.attachmentId + "\')\">X</a>";html += "</div> ";html += "<span class=\"fileName\">" + d.attachmentName + "</span>";html += "<span class=\"data\"> - Complete</span>";html += "<div class=\"uploadify-progress\">";html += "<div class=\"uploadify-progress-bar\" style=\"width: 100%;\">";html += "</div>";html += "</div>";html += "</div>";var file = {"fileId": d.attachmentId,"fid": d.attachmentId};fileList.push(file);});}$("#accessory").html(html);cancelAtt(); //使附件后的叉叉生效callback(); //執行加載附件的回調}});}</script> </body> </html>

轉載于:https://my.oschina.net/ThreeTiger/blog/1547733

總結

以上是生活随笔為你收集整理的Uploadify v3.2.1的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

Uploadify