今天就来写一下一个简单的ajax文件的上传+进度条的显示（而且是单个文件的），上代码！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script>
window.onload = function(){
var myfile = document.getElementById("myfile");
var btn = document.getElementById("obtn");
var opro = document.getElementById("pro");
obtn.onclick = function(){
var xhr = new XMLHttpRequest();
xhr.onload = function(data){
alert('上传成功!');
};
xhr.open('POST','post_file.php',true);
xhr.setRequestHeader('X-Request-With', 'XMLHttpRequest');
var oFormData = new FormData();//FormData 对象，可以把form中所有表单元素的name与value组成一个queryString
oFormData.append('file',myfile.files[0]);//file是接收文件的参数名，myfile.files是所传的文件为json格式，我们只上传了一个，则为myfile.files[0]。myfile.files[0]会成为二进制格式的文件
var pro = xhr.upload;//进度对象，提供多个方法
pro.onprogress = function(ev){//onprogress 为正在上传或下载的方法
var iscale = ev.loaded/ev.total;//ev.loaded为已上传的文件大小，ev.total为总得文件大小
opro.value = iscale*100;
}
xhr.send(oFormData);
}
}
</script>
<body>
<input type="file" id="myfile" /><input type="submit" value="上传" id="obtn"/>
<progress value="0" max="100" id="pro" style="display:block">
</progress>
</body>
</html>
348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
