网页有一个很重要的功能就是文件上传，以前的数据交互就是用一个ajax进行的。
也用惯了。
今天忽然发现要进行文件的交互好像只能用form表单提交。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Html5 Ajax 上传文件</title>
<script type="text/javascript">
function UpladFile() {
var fileObj = document.getElementById("file").files[0]; // 获取文件对象
var FileController = "http://172.16.0.109:1109/api/community/upload?id=506e3a37677544efa4a1ba8e78c873c1"; // 接收上传文件的后台地址
// FormData 对象
var form = new FormData();
form.append("author", "hooyes"); // 可以增加表单数据
form.append("file", fileObj); // 文件对象
// XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
xhr.open("POST", FileController, true);
xhr.onload = function(){
alert("上传完成!");
};
xhr.send(form);
console.log(fileObj);
}
</script>
</head>
<body>
<input type="file" id="file" name="myfile" />
<input type="button" onclick="UpladFile()" value="上传" />
</body>
</html>
也可能是是我哪里写错了。
理想中的ajax文件提交至于要把文件对象获取到就行了。也就是
var fileObj = document.getElementById("file").files[0]; // 获取文件对象
然后加在ajax的data数据中就行了啊！
有点意思啊！！！
其实ajax按道理是完全可以实现文件提交的，因为如果不能早就没网友吐槽出来了。
所以一定是自己的问题。
网友评论