Ajax上传文件,获取返回值,拒绝页面刷新

原创于 2017-07-13 11:01:51 发布 · 787 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #文件 #上传

成长的程序员专栏收录该内容

80 篇文章

订阅专栏

本文介绍了一种使用HTML页面标签和JavaScript的FormData对象实现文件上传的方法。通过设置文件输入元素的click事件并利用自定义按钮样式，实现了文件选择与上传功能，并通过AJAX发送POST请求到服务器端点'api/file-upload'。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面标签 <input type=file id=file />

                var data = new FormData();
                data.append("name", $("#name").val());//可以传字符串参数
                data.append("file", document.getElementById("file").files[0]);//文件直接放进去
                $.ajax({
                    url: "api/file-upload",
                    type: "post",
                    data: data,
                    processData: false,  //tell jQuery not to process the data
                    contentType: false,  //tell jQuery not to set contentType
                    success: function (data) {
                       alert(data);
                    }
                });

用自定义图片的click关联file的click,满足一切样式需求.