利用SWFUpload V2.2.0 免费控件进行大文件上传！
2013-08-09 09:31
417 查看
1.页面
1.引用js脚本 2.编写样式
<link href="swfupload/css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="swfupload/js/swfupload.js"></script>
<script type="text/javascript" src="swfupload/js/swfupload.queue.js"></script>
<script type="text/javascript" src="swfupload/js/fileprogress.js"></script>
<script type="text/javascript" src="swfupload/js/handlers.js"></script>
<!-- 初始化swfupload 对象-->
<script type="text/javascript">
var upload;
window.onload = function() {
upload = new SWFUpload({
//提交路径
upload_url: "upload.action",
//向后台传递额外的参数
post_params: {"name" : "kaobian"},
//上传文件的名称
file_post_name: "file",
// 下面自己按照字面意思理解
file_size_limit : "2048 MB", // 100MB
file_types : "*.*",
file_types_description : "All Files",
file_upload_limit : "10",
file_queue_limit : "0",
// 事件处理
file_dialog_start_handler : fileDialogStart,
file_queued_handler : fileQueued,
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,
upload_start_handler : uploadStart,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete,
// 按钮的处理
button_image_url : "swfupload/images/XPButtonUploadText_61x22.png",
button_placeholder_id : "spanButtonPlaceholder1",
button_width: 61,
button_height: 22,
// Flash Settings
flash_url : "swfupload/js/swfupload.swf",
custom_settings : {
progressTarget : "fsUploadProgress1",
cancelButtonId : "btnCancel1"
},
// Debug Settings
debug: false
});
}
</script>
</head>
<body>
<div id="content">
<form action="upload.action" method="post" name="thisform" enctype="multipart/form-data">
<table>
<tr valign="top">
<td>
<div>
<div class="fieldset flash" id="fsUploadProgress1">
<span class="legend">文件上传</span>
</div>
<div style="padding-left: 5px;">
<span id="spanButtonPlaceholder1"></span>
<input type="button" value="开始上传" onclick="upload.startUpload()"/>
<input id="btnCancel1" type="button" value="停止上传" onclick="cancelQueue(upload);" disabled="disabled" style="margin-left: 2px; height: 22px; font-size: 8pt;" />
<br />
</div>
</div>
</td>
</tr>
</table>
</form>
</div>
<div><A href="test.action">测试</A></div>
2.配置struts2.xml
<!-- 配置struts2.1.8 上传是文件的最大限制为100000M -->
<constant name="struts.multipart.maxSize" value="1048576000000" />
<!-- 设置struts2 上传文件时 保存的临时目录 -->
<constant name="struts.multipart.saveDir" value="C:\temp"></constant>
3.action写入流
// 实现上传
InputStream is = new FileInputStream(file);
String root = ServletActionContext.getRequest().getRealPath("/upload");
File deskFile = new File(root, this.getFileFileName());
OutputStream os = new FileOutputStream(deskFile);
byte[] bytefer = new byte[1024];
int length = 0;
while ((length = is.read(bytefer)) != -1) {
os.write(bytefer, 0, length);
}
os.close();
is.close();
return "success";$('#uploadify').uploadify({
uploader: '/home/upload', // 服务器端处理地址
swf: '/uploadify/uploadify.swf', // 上传使用的 Flash
width: 60, // 按钮的宽度
height: 23, // 按钮的高度
buttonText: "上传", // 按钮上的文字
buttonCursor: 'hand', // 按钮的鼠标图标
fileObjName: 'Filedata', // 上传参数名称
// 两个配套使用
fileTypeExts: "*.jpg;*.png", // 扩展名
fileTypeDesc: "请选择 jpg png 文件", // 文件说明
auto: true, // 选择之后，自动开始上传
multi: true, // 是否支持同时上传多个文件
queueSizeLimit: 5 // 允许多文件上传的时候，同时上传文件的个数
});
例子2
$('#uploadify').uploadify({
uploader: '/home/upload', // 服务器端处理地址
swf: '/uploadify/uploadify.swf', // 上传使用的 Flash
width: 60, // 按钮的宽度
height: 23, // 按钮的高度
buttonText: "上传", // 按钮上的文字
buttonCursor: 'hand', // 按钮的鼠标图标
fileObjName: 'Filedata', // 上传参数名称
// 两个配套使用
fileTypeExts: "*.jpg;*.png", // 扩展名
fileTypeDesc: "请选择 jpg png 文件", // 文件说明
auto: true, // 选择之后，自动开始上传
multi: true, // 是否支持同时上传多个文件
queueSizeLimit: 5 // 允许多文件上传的时候，同时上传文件的个数
});
1.引用js脚本 2.编写样式
<link href="swfupload/css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="swfupload/js/swfupload.js"></script>
<script type="text/javascript" src="swfupload/js/swfupload.queue.js"></script>
<script type="text/javascript" src="swfupload/js/fileprogress.js"></script>
<script type="text/javascript" src="swfupload/js/handlers.js"></script>
<!-- 初始化swfupload 对象-->
<script type="text/javascript">
var upload;
window.onload = function() {
upload = new SWFUpload({
//提交路径
upload_url: "upload.action",
//向后台传递额外的参数
post_params: {"name" : "kaobian"},
//上传文件的名称
file_post_name: "file",
// 下面自己按照字面意思理解
file_size_limit : "2048 MB", // 100MB
file_types : "*.*",
file_types_description : "All Files",
file_upload_limit : "10",
file_queue_limit : "0",
// 事件处理
file_dialog_start_handler : fileDialogStart,
file_queued_handler : fileQueued,
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,
upload_start_handler : uploadStart,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete,
// 按钮的处理
button_image_url : "swfupload/images/XPButtonUploadText_61x22.png",
button_placeholder_id : "spanButtonPlaceholder1",
button_width: 61,
button_height: 22,
// Flash Settings
flash_url : "swfupload/js/swfupload.swf",
custom_settings : {
progressTarget : "fsUploadProgress1",
cancelButtonId : "btnCancel1"
},
// Debug Settings
debug: false
});
}
</script>
</head>
<body>
<div id="content">
<form action="upload.action" method="post" name="thisform" enctype="multipart/form-data">
<table>
<tr valign="top">
<td>
<div>
<div class="fieldset flash" id="fsUploadProgress1">
<span class="legend">文件上传</span>
</div>
<div style="padding-left: 5px;">
<span id="spanButtonPlaceholder1"></span>
<input type="button" value="开始上传" onclick="upload.startUpload()"/>
<input id="btnCancel1" type="button" value="停止上传" onclick="cancelQueue(upload);" disabled="disabled" style="margin-left: 2px; height: 22px; font-size: 8pt;" />
<br />
</div>
</div>
</td>
</tr>
</table>
</form>
</div>
<div><A href="test.action">测试</A></div>
2.配置struts2.xml
<!-- 配置struts2.1.8 上传是文件的最大限制为100000M -->
<constant name="struts.multipart.maxSize" value="1048576000000" />
<!-- 设置struts2 上传文件时 保存的临时目录 -->
<constant name="struts.multipart.saveDir" value="C:\temp"></constant>
3.action写入流
// 实现上传
InputStream is = new FileInputStream(file);
String root = ServletActionContext.getRequest().getRealPath("/upload");
File deskFile = new File(root, this.getFileFileName());
OutputStream os = new FileOutputStream(deskFile);
byte[] bytefer = new byte[1024];
int length = 0;
while ((length = is.read(bytefer)) != -1) {
os.write(bytefer, 0, length);
}
os.close();
is.close();
return "success";$('#uploadify').uploadify({
uploader: '/home/upload', // 服务器端处理地址
swf: '/uploadify/uploadify.swf', // 上传使用的 Flash
width: 60, // 按钮的宽度
height: 23, // 按钮的高度
buttonText: "上传", // 按钮上的文字
buttonCursor: 'hand', // 按钮的鼠标图标
fileObjName: 'Filedata', // 上传参数名称
// 两个配套使用
fileTypeExts: "*.jpg;*.png", // 扩展名
fileTypeDesc: "请选择 jpg png 文件", // 文件说明
auto: true, // 选择之后，自动开始上传
multi: true, // 是否支持同时上传多个文件
queueSizeLimit: 5 // 允许多文件上传的时候，同时上传文件的个数
});
例子2
$('#uploadify').uploadify({
uploader: '/home/upload', // 服务器端处理地址
swf: '/uploadify/uploadify.swf', // 上传使用的 Flash
width: 60, // 按钮的宽度
height: 23, // 按钮的高度
buttonText: "上传", // 按钮上的文字
buttonCursor: 'hand', // 按钮的鼠标图标
fileObjName: 'Filedata', // 上传参数名称
// 两个配套使用
fileTypeExts: "*.jpg;*.png", // 扩展名
fileTypeDesc: "请选择 jpg png 文件", // 文件说明
auto: true, // 选择之后，自动开始上传
multi: true, // 是否支持同时上传多个文件
queueSizeLimit: 5 // 允许多文件上传的时候，同时上传文件的个数
});
<ul>
<li>uploader: 服务器端接收上传文件的地址</li>
<li>swf：用来实现客户端支持的 Flash</li>
<li>width：按钮的宽度</li>
<li>height：按钮的高度</li>
<li>buttonText: 上传按钮的文字</li>
<li>buttonCursor：按钮的鼠标图标</li>
<li>fileObjName：上传文件的请求参数名称</li>
<li>fileTypeExts：上传文件过滤使用的扩展名</li>
<li>fileTypeDesc：上传文件的类型描述</li>
<li>auto：选择之后，是否自动开始上传</li>
<li>multi：是否允许上传多个文件</li>
<li>queueSizeLimit：同时选择多个文件的限额</li>
</ul>
</p>
<span id="uploadify"></span>
<script src="~/uploadify/jquery-1.9.1.min.js"></script>
<script src="~/uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript">
$(function () {
$('#uploadify').uploadify({
uploader: '/home/upload', // 服务器端处理地址
swf: '/uploadify/uploadify.swf', // 上传使用的 Flash
width: 60, // 按钮的宽度
height: 23, // 按钮的高度
buttonText: "上传", // 按钮上的文字
buttonCursor: 'hand', // 按钮的鼠标图标
fileObjName: 'Filedata', // 上传参数名称
// 两个配套使用
fileTypeExts: "*.jpg;*.png", // 扩展名
fileTypeDesc: "请选择 jpg png 文件", // 文件说明
auto: true, // 选择之后，自动开始上传
multi: true, // 是否支持同时上传多个文件
queueSizeLimit: 5 // 允许多文件上传的时候，同时上传文件的个数
});
});<ul>
<li>uploader: 服务器端接收上传文件的地址</li>
<li>swf：用来实现客户端支持的 Flash</li>
<li>width：按钮的宽度</li>
<li>height：按钮的高度</li>
<li>buttonText: 上传按钮的文字</li>
<li>buttonCursor：按钮的鼠标图标</li>
<li>fileObjName：上传文件的请求参数名称</li>
<li>fileTypeExts：上传文件过滤使用的扩展名</li>
<li>fileTypeDesc：上传文件的类型描述</li>
<li>auto：选择之后，是否自动开始上传</li>
<li>multi：是否允许上传多个文件</li>
<li>queueSizeLimit：同时选择多个文件的限额</li>
</ul>
</p>
<span id="uploadify"></span>
<script src="~/uploadify/jquery-1.9.1.min.js"></script>
<script src="~/uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript">
$(function () {
$('#uploadify').uploadify({
uploader: '/home/upload', // 服务器端处理地址
swf: '/uploadify/uploadify.swf', // 上传使用的 Flash
width: 60, // 按钮的宽度
height: 23, // 按钮的高度
buttonText: "上传", // 按钮上的文字
buttonCursor: 'hand', // 按钮的鼠标图标
fileObjName: 'Filedata', // 上传参数名称
// 两个配套使用
fileTypeExts: "*.jpg;*.png", // 扩展名
fileTypeDesc: "请选择 jpg png 文件", // 文件说明
auto: true, // 选择之后，自动开始上传
multi: true, // 是否支持同时上传多个文件
queueSizeLimit: 5 // 允许多文件上传的时候，同时上传文件的个数
});
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 利用Brettle.Web.NeatUpload控件对打文件进行上传（转）
- 利用Indy的TIdFtp控件实现FTP协议, 远程下载上传文件
- 利用TCP进行文件上传到服务端
- 利用HttpClient进行http文件上传
- [转]利用.NET的File控件上传文件的最终解决方案(个人版)
- web服务器搭建之利用pscp进行文件的上传下载
- 【自动化测试】利用Jmeter对Http接口的文件上传进行测试
- 如何利用AJAX进行文件的上传，并对上传内容进行限制，在项目中总会遇见这样的问题，下面就为大家举个栗子。 HTML代码 <form id="uploadForm" enctype="multipar
- ASP.NET中采用HTML控件File进行多文件上传
- 【原】用上传控件进行文件上传时，页面程序代码都不执行，显示“页面信息无法显示”
- swfupload多文件上传控件的使用
- 利用HttpClient进行http文件上传
- 利用.NET的File控件上传文件的最终解决方案(个人版)
- 利用.NET的File控件上传文件的最终解决方案(个人版)
- 利用HttpClient进行http文件上传
- Spring Boot 利用WebUploader进行文件上传功能
- Java 利用SWFUpload多文件上传 session 为空失效，不能验证的问题
- 利用uploadify进行ajax方式进行文件上传
- 2014-07-23 利用ASP.NET自带控件实现单文件上传与下载
- 利用.NET的File控件上传文件的最终解决方案