ajaxfileupload.js_jqueryfileupload上传_ajaxfileupload在IE8下
电脑杂谈 发布时间：2017-06-09 16:02:52 来源：网络整理
1.JQuery ajaxfileupload插件使用准备
下载地址：
2.原理分析
3.具体使用
jsp页面
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JQuery ajaxfileupload文件上传</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="css/ajaxfileupload.css" >
<script type="text/javascript" src="js/jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery/ajaxfileupload.js"></script>
<script type="text/javascript">
//定时器对象
var uploadProcessTimer = null;
//获取文件上传进度
function getFileUploadProcess() {
$.get('/upload/getFileProcessServlet', function(data) {
$('#fileUploadProcess').html(data);
});
}
function ajaxFileUpload()
{
//设置加载图标的显示
$('#loading').show();
uploadProcessTimer = window.setInterval(getFileUploadProcess, 20);
$.ajaxFileUpload
({
url:'/upload/ajaxUploadServlet',
secureuri:false,
fileElementId:'fileToUpload',
dataType: 'json',
data:{name: $('#name').val()},
success: function (data, status)
{
//清除定时器
if(uploadProcessTimer) {
window.clearInterval(uploadProcessTimer);
}
$('#loading').hide();
var message = data['message'];
var code = data['code'];
if(code != 200) {
$('#fileUploadProcess').html('0%');
}
if(message)
{
alert(data.message);
}
},
error: function (data, status, e)
{
//清除定时器
if(uploadProcessTimer) {
window.clearInterval(uploadProcessTimer);
}
$('#loading').hide();
//这里处理的是网络异常，返回参数解析异常，DOM操作异常
alert("上传发生异常");
}
})
return false;
}
</script>
</head>
<body>
<h2>JQuery ajaxfileupload文件上传</h2>
<img id="loading" src="images/loading.gif" style="display:none;">
用户信息： <br/>
姓名：<input id="name" name="name" type="text"> <br/>
附件：<input id="fileToUpload", name="file1" type="file" class="input"> <br/>
<br><br>
<input type="button" onclick="return ajaxFileUpload();" value="上传"><br/>
上传进度：<label id="fileUploadProcess"></label>
</body>
</html>
本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/ruanjian/article-52006-1.html
相关阅读
发表评论 请自觉遵守互联网相关的政策法规，严禁发布、暴力、反动的言论
每日福利
从入门到精通的C#基础知识C#入门经典视频教程全集下载百度网盘
适合平板用的桌面 想成安卓接班人：Fuchsia OS需补上其硬伤
如何将笔记本电脑设置为无线路由器_IT /计算机_资料
超值资料：如何购买笔记本电脑记忆棒热点图片
#吴亦凡#哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥