开发者社区> 问答> 正文

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>

展开
收起
爵霸 2016-06-17 11:58:38 4751 0
2 条回答
写回答
取消 提交回答
  • 2019-07-17 19:42:29
    赞同 展开评论 打赏
  • 我测试过了,你这些代码应该是没有什么大问题的,如果有的话,可能在两个地方:
    1是:xml.open("POST","./save/thumbnail"); 这个地方,那个地址是不是有效地址?比如,如果后端用php的话,地址应该是类似这样:./save/thumbnail.php

    2.是你后端的实现代码有问题,不知你后端是直接显示信息,还是保存了图片。如果是直接显示的话,你应该是看不到的,这时你的前端需要添加一些代码才能看到后端是否已经接收到。

      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
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载