使用Ajax上传File文件流到云服务器

这是今天在写一个小Demo的时候遇到的一个问题，因为之前写过一篇(一个使用Form表单上传文件的小案例)，所以我们知道使用Form表单可以完成图片及文件的上传，而如何使用Ajax上传文件到服务器，今天把具体的解决思路和部分代码归档一下。

首先我们需要准备一个file类型的input，绑定upload函数，在选中图片之后执行upload函数将图片上传到服务器。

<input id="fileBtn" type="file" onchange="upload();" />

然后进行upload函数的编写，首先获取选中的图片，然后初始化FormData，将文件添加到FormData中，当然在这一步可以把你想带到后台的数据绑定上去，最后使用ajax完成数据提交即可。

        function upload() {

            var $c = document.querySelector("#fileBtn");//上传触发按钮

            var file = $c.files[0];//获取file对象单张

            var formFile = new FormData();//初始化formdata
            formFile.append("file", file); //加入文件对象

            //formFile.append("name", "张三"); //可以在本步添加其他数据到FormData

            $.ajax({
                url: "/Home/AddAccessoryImg",
                data: formFile,
                processData: false,
                contentType: false,
                type: "POST",
                success: function (data) {
                    
                    console.info(data);//通常在本步骤使用服务器返回的图片地址进行预览显示缩略图

                }
            });
        };

最后总结一下，其实该方法利用的依旧是Form表单提交，只不过省略了<form></form>，换成了ajax，这种方式也只会在少部分应用场景用到，当个实现思路的备用方案。