Ajax文件上传

文件上传嘛，没办法有这个需求，所以记录一下这个功能。

时间：2020.4.1

HTML代码与js：

   请选择你的文件:
<input id="articleImageFile" name="excelFile" type="file" class="form-control"
       style="width: 300px; display: inline;"/>

<input id="edgeGrindingCncZButton" type="button" style="width: 60px;height: 35px;"
       value="上传">

<input id="BooleanDemoTest" type="test" value="0" style="width: 60px;height: 35px;"
       class="hide"/>

 $("#edgeGrindingCncZButton").on('click', function () {
        //装数据的，啥都可以装，你想装啥都可以
        var formData = new FormData();
        //装个name玩玩
        var name = $("#articleImageFile").val();
        formData.append("name", name);//这个地方可以传递多个参数
        //最重要的是这个，文件上传的： $("#articleImageFile")[0].files[0]
        formData.append("file", $("#articleImageFile")[0].files[0]);
       
        $.ajax({
            url: "写自己的地址咯",
            type: 'POST',//不用看了肯定是post
            async: false,//要不要异步咯
            data: formData,//把数据往里面塞就行了，塞满它
            // 告诉jQuery不要去处理发送的数据，你想处理，你可以处理试试
            processData: false,
            // 告诉jQuery不要去设置Content-Type请求头，你想处理，你可以处理试试
            contentType: false,
            beforeSend: function () {
                console.log("正在进行，请稍候");
            },
            success: function (data) {
                console.log(data);
            }, error: function (e) {
                alert("错误！！");
                window.clearInterval(timer);
            }
        });
        get();//此处为上传文件的进度条
    })

    @RequestMapping("/exportDemo")
    @ResponseBody
    public List<String> exportDemo(@RequestParam("file") MultipartFile file,
                               HttpServletRequest request, HttpServletResponse response, String name) {
            System.out.println(name);//可以直接获取，file也是一样，下面就自己处理咯

}