如何使用JSP/Servlet和Ajax上传文件到服务器？

Question

如何使用JSP/Servlet和Ajax上传文件到服务器？

19

我正在创建一个JSP/Servlet Web应用程序，希望通过Ajax将文件上传到Servlet。我该如何操作？我使用jQuery。

目前为止，我已经做了以下工作：

<form class="upload-box">
    <input type="file" id="file" name="file1" />
    <span id="upload-error" class="error" />
    <input type="submit" id="upload-button" value="upload" />
</form>

使用这个jQuery：

$(document).on("#upload-button", "click", function() {
    $.ajax({
        type: "POST",
        url: "/Upload",
        async: true,
        data: $(".upload-box").serialize(),
        contentType: "multipart/form-data",
        processData: false,
        success: function(msg) {
            alert("File has been uploaded successfully");
        },
        error:function(msg) {
            $("#upload-error").html("Couldn't upload file");
        }
    });
});

然而，它似乎没有发送文件内容。

- Nachshon Schwartz

希望这能对你有所帮助：http://www.webdeveloperjuice.com/2010/02/13/7-trusted-ajax-file-upload-plugins-using-jquery/ - gred

你可以使用XMLHttpRequest方法。看这里：https://dev59.com/Emw05IYBdhLWcg3w3lol - Paolo Biavati

4个回答

5

Monsif的代码适用于表单只有文件类型输入的情况下运行良好。如果除文件类型之外还有其他输入项，则这些输入项会丢失。因此，可以将原始表单本身提供给构造函数，而不是复制每个表单数据并将其附加到FormData对象中。

<script type="text/javascript">
        var files = null; // when files input changes this will be initialised.
        $(function() {
            $('#form2Submit').on('submit', uploadFile);
    });

        function uploadFile(event) {
            event.stopPropagation();
            event.preventDefault();
            //var files = files;
            var form = document.getElementById('form2Submit');
            var data = new FormData(form);
            postFilesData(data);
}

        function postFilesData(data) {
            $.ajax({
                url :  'yourUrl',
                type : 'POST',
                data : data,
                cache : false,
                dataType : 'json',
                processData : false,
                contentType : false,
                success : function(data, textStatus, jqXHR) {
                    alert(data);
                },
                error : function(jqXHR, textStatus, errorThrown) {
                    alert('ERRORS: ' + textStatus);
                }
            });
        }
</script>

HTML代码可能类似于以下内容：

<form id ="form2Submit" action="yourUrl">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br>
<input id="fileSelect" name="fileSelect[]" type="file" multiple accept=".xml,txt">
<br>
  <input type="submit" value="Submit">
</form>

- Memin

1

链接已损坏：“页面未找到”。 - Peter Mortensen

死链正在被移除。 - Memin

2

$('#fileUploader').on('change', uploadFile);


function uploadFile(event)
    {
        event.stopPropagation(); 
        event.preventDefault(); 
        var files = event.target.files; 
        var data = new FormData();
        $.each(files, function(key, value)
        {
            data.append(key, value);
        });
        postFilesData(data); 
     }
    
function postFilesData(data)
    {
     $.ajax({
        url: 'yourUrl',
        type: 'POST',
        data: data,
        cache: false,
        dataType: 'json',
        processData: false, 
        contentType: false, 
        success: function(data, textStatus, jqXHR)
        {
            //success
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
            console.log('ERRORS: ' + textStatus);
        }
        });
    }

<form method="POST" enctype="multipart/form-data">
    <input type="file" name="file" id="fileUploader"/>
</form>

- Monsif EL AISSOUSSI

0

这段代码对我有效。

我使用了Commons IO的io.jar，Commons file upload.jar和jQuery表单插件：

<script>
    $(function() {
        $('#upload-form').ajaxForm({
            success: function(msg) {
                alert("File has been uploaded successfully");
            },
            error: function(msg) {
                $("#upload-error").text("Couldn't upload file");
            }
        });
    });
</script>

<form id="upload-form" class="upload-box" action="upload" method="POST" enctype="multipart/form-data">
    <input type="file" id="file" name="file1" />
    <span id="upload-error" class="error">${uploadError}</span>
    <input type="submit" id="upload-button" value="upload" />
</form>

 boolean isMultipart = ServletFileUpload.isMultipartContent(request);

 if (isMultipart) {
     // Create a factory for disk-based file items
     FileItemFactory factory = new DiskFileItemFactory();

     // Create a new file upload handler
     ServletFileUpload upload = new ServletFileUpload(factory);

     try {
         // Parse the request
         List items = upload.parseRequest(request);
         Iterator iterator = items.iterator();
         while (iterator.hasNext()) {
             FileItem item = (FileItem) iterator.next();
             if (!item.isFormField()) {
                 String fileName = item.getName();
                 String root = getServletContext().getRealPath("/");
                 File path = new File(root + "../../web/Images/uploads");
                 if (!path.exists()) {
                     boolean status = path.mkdirs();
                 }

                 File uploadedFile = new File(path + "/" + fileName);
                 System.out.println(uploadedFile.getAbsolutePath());
                 item.write(uploadedFile);
             }
         }
     } catch (FileUploadException e) {
         e.printStackTrace();
     } catch (Exception e) {
         e.printStackTrace();
     }
 }

- Sameera Madushanka

感谢提供一个能够读取提交内容的服务器端Java代码示例。大部分帖子都只展示了Javascript，但是在Java中处理方式不同于大多数情况。 - Derek Wade

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BalusC · Accepted Answer

以当前的XMLHttpRequest版本1和jQuery库的使用情况来看，使用JavaScript通过XMLHttpRequest上传文件是不可能的。常见的解决方法是让JavaScript创建一个隐藏的<iframe>并将表单提交给它，以此来创建异步操作的印象。这也正是大多数jQuery文件上传插件所做的，比如jQuery Form插件（一个例子）。

假设您的JSP HTML表单已经改写为以下形式，这样即使客户端禁用了JavaScript也不会出现问题：

<form id="upload-form" class="upload-box" action="/Upload" method="post" enctype="multipart/form-data">
    <input type="file" id="file" name="file1" />
    <span id="upload-error" class="error">${uploadError}</span>
    <input type="submit" id="upload-button" value="upload" />
</form>

然后，借助jQuery表单插件的帮助，只需要简单地进行以下操作：

<script src="jquery.js"></script>
<script src="jquery.form.js"></script>
<script>
    $(function() {
        $('#upload-form').ajaxForm({
            success: function(msg) {
                alert("File has been uploaded successfully");
            },
            error: function(msg) {
                $("#upload-error").text("Couldn't upload file");
            }
        });
    });
</script>

在servlet方面，不需要特殊处理。只需像不使用Ajax一样实现即可：如何使用JSP / Servlet上传文件到服务器？ 您只需要在servlet中进行额外的检查，看看

X-Requested-With 标题是否等于 XMLHttpRequest ，以便知道应该为禁用JavaScript的情况返回什么类型的响应（目前，大多数是较旧的移动浏览器）。

if ("XMLHttpRequest".equals(request.getHeader("X-Requested-With"))) {
    // Return an Ajax response (e.g. write JSON or XML).
} else {
    // Return a regular response (e.g. forward to JSP).
}

请注意，相对较新的XMLHttpRequest版本2可以使用新的File和FormData API发送选定的文件。另请参见HTML5拖放文件上传到Java Servlet和通过XMLHttpRequest以多部分形式发送文件。