swfupload文件上传组件 服务端用servlet配置教程
swfupload是个不错的上传组件,可以实现无刷新上传图片,并返回自己想要的数据,今天写了一个用java servlet来作为服务端接收客户端文件,自己在项目中也有使用,功能是实现远程上传文件并返回上传后在服务端的文件路径。
1,在官网下载swfupload,地址:http://demo.swfupload.org,
2,编写上传页面(这里的上传页面完全是从官网整过来的),并在下载的文件中找到以下html代码中的js文件并并入,(我下载的包中没有default.css文件,以下css也是我是官网copy过来的,里面用到一个按钮的样式,包括图片,如果不想自己写也可以先整过来),部分详情看页面注释的几个函数。
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上传图片</title>
<jsp:include page="/home/head_html.jsp" flush="true" />
<script type="text/javascript" src="/myimg/copy.js"></script>
<link href="upload/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="upload/swfupload.js"></script>
<script type="text/javascript" src="upload/swfupload.swfobject.js"></script>
<script type="text/javascript" src="upload/fileprogress.js"></script>
<script type="text/javascript" src="upload/handers.js"></script>
<script type="text/javascript">
var swfu;
window.onload = function () {
swfu = new SWFUpload({
// Backend settings
upload_url: "<%=basePath%>/upload/uploadImg",//服务端接收的servlet地址
file_post_name: "resume_file",
// Flash file settings
file_size_limit : "10 MB",
file_types : "*.*", // or you could use something like: "*.doc;*.wpd;*.pdf",
file_types_description : "All Files",
file_upload_limit : "0",
// 向服务端传递的参数 user代表上传的用户,p我是用来代表某个产品类别的意思,作为上传文件的路径用,具体的看自己需求
post_params: {
"user" : "admin",
"p" : "x"
},
file_queue_limit : "1",
use_query_string : true,
// Event handler settings
swfupload_loaded_handler : swfUploadLoaded,
file_dialog_start_handler: fileDialogStart,
file_queued_handler : fileQueued,
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,//当你选择文件后执行的函数,你可以在这个函数里设置成选择文件后直接上传或者提交表单时再上传
//upload_start_handler : uploadStart, // I could do some client/JavaScript validation here, but I don't need to.
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,//文件上传成功后执行的函数,服务端返回的数据也是从这里获取,详情在handlers.js中
upload_complete_handler : uploadComplete,//文件上传完成后的操作
// Button Settings
button_image_url : "images/XPButtonUploadText_61x22.png",
button_placeholder_id : "spanButtonPlaceholder",
button_width: 61,
button_height: 22,
// Flash Settings
flash_url : "upload/Flash/swfupload.swf",
custom_settings : {
progress_target : "fsUploadProgress",
//upload_successful : false
},
// Debug settings
debug: false
});
};
</script>
</head>
<body>
<div id="header">
<h1 id="logo"><a href="../">SWFUpload</a></h1>
<div id="version">v2.2.0</div>
</div>
<div id="content">
<h2>Classic Form Demo</h2>
补充:Web开发 , ASP.Net ,