當(dāng)前位置：首頁(yè) >

Uploadify v3.2.1

發(fā)布時(shí)間：2025/5/22 17 豆豆

生活随笔收集整理的這篇文章主要介紹了 Uploadify v3.2.1 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

這幾天做一個(gè)web項(xiàng)目的上傳功能折騰了好幾天，發(fā)現(xiàn)了一個(gè)相當(dāng)?shù)暮糜玫膚eb上傳插件，趕緊記下來(lái)，以后用的時(shí)候方便。

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

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

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

一、簡(jiǎn)單使用方法：

1.新建uploadify文件夾放入需要的插件（因?yàn)閡ploadify是依賴于jquery的,所以我直接也把jquery放進(jìn)去了，下載的插件包是沒(méi)有jquery的）

目錄結(jié)構(gòu)

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

2.新建html頁(yè)面，并引入相應(yīng)的包（紅色框中的部分）

寫(xiě)入必要的HTML文本

3.在js中引用uploadify插件

常規(guī)的uploadify插件設(shè)置

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

這樣就簡(jiǎn)單的實(shí)現(xiàn)了文件的上傳功能

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 {/*** 跳轉(zhuǎn)至文件測(cè)試頁(yè)面 * @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插入數(shù)據(jù)庫(kù)就可以了} catch (Exception e) {System.out.println("上傳文件出錯(cuò)！"+e);}}return "success"; //返回此附件的數(shù)據(jù)庫(kù)Id} }

上傳成功效果圖

二、擴(kuò)展

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

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

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

（2）附件上傳成功的時(shí)候把附件保存進(jìn)集合

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

（3）增加小叉叉的點(diǎn)擊方法

/*** 點(diǎn)擊附件后面的小叉叉刪除附件的方法*/var cancelAtt = function() { //點(diǎn)擊附件的那個(gè)小叉叉$("#accessory .cancel").off("click"); //取消原本的單擊事件$("#accessory .cancel").on("click",function() {var fileId = $(this).parent(".uploadify-queue-item").attr("id"); // 文件的html中的Idvar fileInfo = null; // 文件后端返回的Id(數(shù)據(jù)庫(kù)的文件Id)for (var i = 0; i < fileList.length; i++) {if (fileList[i].fileId = fileId) { // 如果文件集合中有當(dāng)前的文件fileInfo = fileList[i].fid; // 把文件的數(shù)據(jù)庫(kù)Id獲取到fileList.splice(i,1); // 把集合中的文件刪除break;}}if (fileInfo != null) { // 如果文件的數(shù)據(jù)庫(kù)Id存在$.ajax({type: "post",url: "testUploadify/deleteAtt", //刪除數(shù)據(jù)庫(kù)中此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', //處理此文件的后臺(tái)文件'cancelImg': '../../testUploadify/uploadify/uploadify-cancel.png', //插件上的小叉叉的圖片'queueID': 'accessory', //存放上傳文件的div的Id'filleSizeLimit':'20MB', //上傳的最大文件的大小'auto': true, //設(shè)置為true當(dāng)選擇文件后就直接上傳了，為false需要點(diǎn)擊上傳按鈕才上傳 'multi': true, //設(shè)置為true時(shí)可以上傳多個(gè)文件。'buttonText':'上傳附件', //上傳按鈕的名稱(chēng)'removeCompleted':false, //是否自動(dòng)將已完成任務(wù)從隊(duì)列中刪除，設(shè)置為false則會(huì)一直保留此任務(wù)顯示'onUploadStart':function(file){//上傳開(kāi)始的時(shí)候執(zhí)行的，返回false就不往下執(zhí)行},'onSWFReady': function() {//flash文件載入成功后觸發(fā)，也可以理解為uploadify插件加載成功后執(zhí)行},'onUploadSuccess': function(file, data) {var file = {"fileId": file.id,"fid": data};fileList.push(file);cancelAtt();}});/*** 點(diǎn)擊附件后面的小叉叉刪除附件的方法*/var cancelAtt = function() { //點(diǎn)擊附件的那個(gè)小叉叉$("#accessory .cancel").off("click"); //取消原本的單擊事件$("#accessory .cancel").on("click",function() {var fileId = $(this).parent(".uploadify-queue-item").attr("id"); // 文件的html中的Idvar fileInfo = null; // 文件后端返回的Id(數(shù)據(jù)庫(kù)的文件Id)for (var i = 0; i < fileList.length; i++) {if (fileList[i].fileId = fileId) { // 如果文件集合中有當(dāng)前的文件fileInfo = fileList[i].fid; // 把文件的數(shù)據(jù)庫(kù)Id獲取到fileList.splice(i,1); // 把集合中的文件刪除break;}}if (fileInfo != null) { // 如果文件的數(shù)據(jù)庫(kù)Id存在$.ajax({type: "post",url: "testUploadify/deleteAtt", //刪除數(shù)據(jù)庫(kù)中此id的附件async: true,data: {attId: ~fileInfo.indexOf('"') ? fileInfo.substring(1, fileInfo.length - 1) : fileInfo},success: function(data) {}});}});}</script> </body> </html>

2.草稿文件加載附件塊

（1）設(shè)置加載uploadify插件為回調(diào)函數(shù)

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

（2）查詢數(shù)據(jù)庫(kù)的此附件，然后加載

/*** 如果是草稿文件，查詢有附件就加載附件*/ 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(); //執(zhí)行加載附件的回調(diào)}}); }

（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', //處理此文件的后臺(tái)文件'cancelImg': '../../testUploadify/uploadify/uploadify-cancel.png', //插件上的小叉叉的圖片'queueID': 'accessory', //存放上傳文件的div的Id'filleSizeLimit':'20MB', //上傳的最大文件的大小'auto': true, //設(shè)置為true當(dāng)選擇文件后就直接上傳了，為false需要點(diǎn)擊上傳按鈕才上傳 'multi': true, //設(shè)置為true時(shí)可以上傳多個(gè)文件。'buttonText':'上傳附件', //上傳按鈕的名稱(chēng)'removeCompleted':false, //是否自動(dòng)將已完成任務(wù)從隊(duì)列中刪除，設(shè)置為false則會(huì)一直保留此任務(wù)顯示'onUploadStart':function(file){//上傳開(kāi)始的時(shí)候執(zhí)行的，返回false就不往下執(zhí)行},'onSWFReady': function() {//flash文件載入成功后觸發(fā)，也可以理解為uploadify插件加載成功后執(zhí)行},'onUploadSuccess': function(file, data) {var file = {"fileId": file.id,"fid": data};fileList.push(file);cancelAtt();}});});/*** 點(diǎn)擊附件后面的小叉叉刪除附件的方法*/var cancelAtt = function() { //點(diǎn)擊附件的那個(gè)小叉叉$("#accessory .cancel").off("click"); //取消原本的單擊事件$("#accessory .cancel").on("click",function() {var fileId = $(this).parent(".uploadify-queue-item").attr("id"); // 文件的html中的Idvar fileInfo = null; // 文件后端返回的Id(數(shù)據(jù)庫(kù)的文件Id)for (var i = 0; i < fileList.length; i++) {if (fileList[i].fileId = fileId) { // 如果文件集合中有當(dāng)前的文件fileInfo = fileList[i].fid; // 把文件的數(shù)據(jù)庫(kù)Id獲取到fileList.splice(i,1); // 把集合中的文件刪除break;}}if (fileInfo != null) { // 如果文件的數(shù)據(jù)庫(kù)Id存在$.ajax({type: "post",url: "testUploadify/deleteAtt", //刪除數(shù)據(jù)庫(kù)中此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(); //執(zhí)行加載附件的回調(diào)}});}</script> </body> </html>

轉(zhuǎn)載于:https://my.oschina.net/ThreeTiger/blog/1547733

總結(jié)

以上是生活随笔為你收集整理的Uploadify v3.2.1的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

Uploadify