[HTML5][JSP]利用FormData对象完成表单的异步上传|文件上传|图文同时上传

身披白袍

于 2017-10-27 21:48:49 发布

阅读量1.9k

点赞数 1

分类专栏：前端|JavaScript|Node.js 网站|服务器|网络|通信

本文链接：https://blog.csdn.net/Shenpibaipao/article/details/78369587

版权

本文介绍了如何使用HTML5的FormData对象结合JSP实现表单的异步上传，无需传统的Form标签。在前端，通过jQuery简化操作，而在后台的Servlet中接收并处理上传的数据。为了实现这一功能，需要引入`commons-fileupload-1.3.2.jar`和`commons-io-2.5.jar`两个依赖包。

摘要由CSDN通过智能技术生成

前端很简单：（jquery写起来方便，事实上用原生的javascript也是完全可以的，略，可以参见>这里<）

        $("#uploadFileBtn").click(function () {
            var pic = $("#uploadFileInput")[0].files[0];
            var fd = new FormData();
            fd.append('pw',$("#pw").val() );//这里挂载的普通文本，假设我这里传的是管理员密码
            fd.append('uploadFile', pic);//这里挂载的是一个文件
            $.ajax({
                url: gv.root + "FileUploadServlet",
                type: "post",
                // Form数据
                data: fd,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    $.growl({
                        title: "操作结果",
                        message: data