使用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,这种方式也只会在少部分应用场景用到,当个实现思路的备用方案。

THE END