使用Ajax实现文件上传功能

最新推荐文章于 2024-03-28 17:16:20 发布

原创

最新推荐文章于 2024-03-28 17:16:20 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#文件上传 #Ajax

本文介绍了如何使用Ajax技术实现文件上传功能。通过创建FormData对象，将选择的文件添加到对象中，然后通过Ajax发送到后台，实现了无刷新的文件上传体验。

前台页面：

 $("#upload_img").bind("change", function () {
                var formData = new FormData();
                formData.append("file", $("#upload_img")[0].files[0]);
                $.ajax({
                    url: "uploadServlet.do",
                    type: "POST",
                    data: formData,
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false,
                    success: function (data) {
                        alert(data);
                        var jsonObj = JSON.parse(data);

                        var name = jsonObj.name;

                        var path = jsonObj.path;
                        //alert(path+"/"+name);
                        //alert(name);
                        $("#img_show").attr("src", path + "/" + name);
                        var a = $("#img_show")[0].src;
                        //alert(a);
                    }
                });

            });

后台

最低0.47元/天解锁文章