jquery 实现ajax 上传文件的功能(使用插件 ajaxfileupload)
js文件的下载地址 : http://files.cnblogs.com/wangqc/ajaxfileupload.js
页面代码:
<html>
<!-- 引入相关的js文件,相对路径
-->
<script type="text/javascript"
src="js/jquery.js"></script>
<script
type="text/javascript" src="js/ajaxfileupload.js"></script>
<!-- 执行上传文件操作的函数 -->
<script
type="text/javascript">
function ajaxFileUpload(){
$.ajaxFileUpload(
{
url:‘update.do?method=uploader‘,
secureuri:false,
fileElementId:‘houseMaps‘,
dataType:
‘xml‘,
success: function (data,
status)
{
$(‘#result‘).html(‘添加成功‘);
},
error: function (data, status, e)
//上传失败 可能的原因有 页面提交按钮为submit
照成页面刷新,或者有可能是返回的数据类型不正确(不包含success:true 的用法 或者是返回的success
为false也会进入error的方法)
{
$(‘#result‘).html(‘添加失败‘);
}
}
);
}
</script>
</head>
主要参数说明:
1,url表示处理文件上传操作的文件路径,可以测试URL是否能在浏览器中直接访问,如上:upload.php
2,fileElementId表示文件域ID,如上:fileToUpload
3,secureuri是否启用安全提交,默认为false
4,dataType数据数据,一般选json,javascript的原生态
5,success提交成功后处理函数
6,error提交失败处理函数
<body>
<form method="post"
action="update.do?method=uploader" enctype="multipart/form-data">
<input type="file" id="houseMaps"
name="houseMaps"/>
<input
type="button" value="提交" onclick="ajaxFileUpload()"/>
</form>
<div
id="result"></div>
</body>
</html>
服务器代码:
public class UpdateAction extends DispatchAction
{
public ActionForward uploader(ActionMapping mapping,
ActionForm form,
HttpServletRequest request, HttpServletResponse response)
{
UpFormForm upFormForm = (UpFormForm)
form;
FormFile ff =
upFormForm.getHouseMaps();
try
{
InputStream is =
ff.getInputStream();
File file = new File("D:/" + ff.getFileName());
//指定文件存储的路径和文件名
OutputStream os = new
FileOutputStream(file);
byte[] b = new byte[1024];
int len = 0;
while((len = is.read(b)) != -1){
os.write(b, 0,
len);
}
os.close();
is.close();
} catch (Exception e)
{
e.printStackTrace();
}
return
null;
}
}
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。