AJAX + FormData 上传文件失败？
做了一个上传头像的功能，先选择头像（用按钮代替了丑陋的input），选择文件成功，用 input onchange() 句柄 做的预览图片功能也成功，确认上传的时候，想用AJAX，从
有什么方法能ajax上传文件呢 ?
了解到可以用 原生JS + FormData 上传。点击按钮，POST返回301，POST的内容很丰富，应该是发送成功了；响应返回200，应该也是成功了。
但是服务器的特定路径里就是没有上传的文件，请问为什么？
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function loading()
{
upload_thumbnail();
}
function upload_thumbnail()
{
var upload_thumbnail_node = document.getElementById('upload_thumbnail'); // 选择文件按钮
var upload_thumbnail_input = document.getElementById('upload_thumbnail_input'); // input file
var thumbnail_node = document.getElementById('thumbnail'); // 图片预览
var upload_thumbnail_submit_node = document.getElementById('upload_thumbnail_submit'); // 确认上传按钮
upload_thumbnail_node.onclick = function()// 按钮代替 input
{
upload_thumbnail_input.click();// 打开文件管理器
upload_thumbnail_input.onchange = function()// 图片预览
{
thumbnail_node.src = window.URL.createObjectURL(upload_thumbnail_input.files[0]);
};
};
upload_thumbnail_submit_node.onclick = function()// 上传
{
var xml = new XMLHttpRequest();
var form_obj = new FormData();
var file = upload_thumbnail_input.files[0];
form_obj.append('file',file);
xml.open("POST","./save/thumbnail");
xml.send(form_obj);
alert("success!");
};
}
</script>
</head>
<body onload="loading();">
<img id="thumbnail" src="" alt="预览图片" />
<span id="upload_thumbnail">选择头像</span>
<span id="upload_thumbnail_submit">确认上传</span>
<input id="upload_thumbnail_input" type="file">这个input应该是隐藏的，但是为了找bug，就显示出来了
</body>
</html>
展开
收起
2
条回答
写回答
写回答
-
-
我测试过了，你这些代码应该是没有什么大问题的，如果有的话，可能在两个地方：
1是：xml.open("POST","./save/thumbnail"); 这个地方，那个地址是不是有效地址？比如，如果后端用php的话，地址应该是类似这样：./save/thumbnail.php2.是你后端的实现代码有问题，不知你后端是直接显示信息，还是保存了图片。如果是直接显示的话，你应该是看不到的，这时你的前端需要添加一些代码才能看到后端是否已经接收到。
upload_thumbnail_submit_node.onclick = function()// 上传 { var xml = new XMLHttpRequest(); var form_obj = new FormData(); var file = upload_thumbnail_input.files[0]; form_obj.append('file',file); xml.open("POST","./save.php"); //看一下后端有没有接收到文件 xml.onreadystatechange=function() { if (xml.readyState==4 && xml.status==200){ console.log(xml.responseText); } } //添加以上这一段看看后端返回的信息 xml.send(form_obj); alert("success!"); };我用的是php,在./save.php这个文件里就简单一点：
<?php var_dump($_FILES); ?>测试的效果如图：
![Uploading screenshot . . .]()2019-07-17 19:42:28赞同 展开评论 打赏
问答分类：
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
