这几天做一个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页面，并引入相应的包（红色框中的部分）
<link rel="stylesheet" type="text/css" href="../uploadify/uploadify.css"/>
<script src="../uploadify/jquery-3.0.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../uploadify/jquery.uploadify.min.js" type="text/javascript" charset="utf-8"></script>写入必要的HTML文本
<input type="file" name="uploadify" id="uploadInput" />
<div id="accessory"></div>
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.完整的代码块
前端
<!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">
$("#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) {
//文件上传成功后执行
}
});
</script>
</body>
</html>后端
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中的Id
var 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中的Id
var 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中的Id
var 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>
122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
