文件提交

网页有一个很重要的功能就是文件上传,以前的数据交互就是用一个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按道理是完全可以实现文件提交的,因为如果不能早就没网友吐槽出来了。
所以一定是自己的问题。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容