在 AJAX post request 中使用自定义 HttpServletRequest 过滤器

Use custom HttpServletRequest Filter in AJAX post request

本文关键字：自定义 HttpServletRequest 过滤器 AJAX post request      更新时间：2023-09-26

我为HttpServletRequest创建了一个自定义的多部分过滤器，使用此示例将任何类型的文件从客户端上传到我的数据库。

表单是放置在模态内的multipart/form-data形式，以其他形式显示：

<!-- MAIN FORM -->
<form:form>
    <button // this button shows the modal
</form:form>
<!-- MODAL TO UPLOAD FILES -->
<div class="modal fade" id="myModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
    <form action="documentoSubmit" method="post" id="documentoForm" enctype="multipart/form-data">

我可以通过两种方式提交我的表单，并通过我的自定义过滤器找到正确的字段和其他字段：

a） 按钮onchange方法和javascript功能：

<button type="button" class="btn btn-primary" onclick="validarDocumento()">
    <spring:message code="guardar" />
</button>
function validarDocumento() {
    // check if valid data
    $("#myform").submit();
}

b） 输入字段（也可以是<button>）：

<input type="submit" class="btn btn-default" >

这是正确的，但我的问题是父表单，其中包含正在重新加载表单的模态，我需要捕获结果以通过AJAX更新我的视图而无需重新加载表单。

与此类似的任何内容，但应用了我的自定义 java Filter

$.post( "<%=session.getAttribute("URL_HOST")%>/my/url/documentoSubmit", {})
.done(function(data) {
    // do stuff...
}

或

$("#myForm").submit().done(function (data){
    // do stuff...
});

或

$("#myForm").submit(function (data){
    // do stuff...
});

你的代码的问题就在这个函数中

function validarDocumento() {
    // check if valid data
    $("#myform").submit();
}

在jquery元素上调用submit（）实际上将提交表单，这是一个同步请求，因此页面被刷新。为了防止这种情况，您必须通过 AJAX 上传文件，不要担心您的自定义过滤器仍然可以工作，因为它基本上会拦截每个传入的请求（同步/异步无关紧要）到您的服务器。

如果你不想使用JQuery，你可以做这样的事情。

<input type="file" id="uploadfile" name="uploadfile" />
$('.btn btn-primary').on('submit', function(event){
    event.stopPropagation(); // Stop propagating submit event to your parent form
    event.preventDefault(); // Stop form's default action in your modal
    var data = new FormData();
    var file = document.getElementById("uploadfile");
    formData.append("upload", file.files[0]);
    // append other form fields to formData
         $.ajax({
              url: 'ur-action-to-upload-file',
              type: 'POST',
              data: data,
              cache: false,
              dataType: 'json',
              processData: false,
              contentType: 'multipart/form-data' 
         }).done(function(data,jqXHR){
                if(jqXHR.status == 200){
                 // handle your success flow
                }
         });
});

有几件事需要注意，

  • processData - 如果您有文件，请将其设置为 false，因为 jQuery 将将文件数组转换为字符串，服务器无法选择它向上。
  • contentType - 如果多部分/表单数据不起作用，请将其设置为false，但不要离开它，因为jQuery默认为application/x-www-form-urlencode并且不发送文件

如果您需要更多示例，请参阅此和此

你可以尝试使用iframes。制作隐藏的假帧并加载 iframe 的回调。

<form action="youAction" method="post" id="documentoForm" target = "fake-frame" enctype="multipart/form-data"></form>
<iframe id="fake-frame" name="fake-frame" style="display: none"></iframe>

还有一个回调：

iframe.load(function () {
/*you may pass some special content to detect file loaded { status = "success" }*/
}

我建议使用fileReader，FormData和XMLHTTPRequest API。 示例：

// button click to submit
<button type="button" class="btn btn-primary" onclick="validarDocumento()">
//input change
<input name="file" onchange='readFile'>
//global vars
       var data = new FormData(),
       reader - new FileReader(),
       xhr =  new XMLHttpRequest();    
//considering the example, you could validate file and read as binary or a base64 decoded file before upload
function readFile(e){
 file = e.target.files[0]; // reads the file input change event and returns array
 var binaryFile = reader.readAsBinaryString(file); // file reader gets file as binary
 reader.onloadend(function(e){
   //check reader data
   data.append('file', binaryFile);
 });
}
function validarDocumento(){
  // validate document and other inputs
 xhr.upload.onprogress =  function(event){
   // event that checks for progress on upload;
 };
 xhr.onload = function(e){
 // check for server responce on event and refresh view
 };
 xhr.open("POST","<%=session.getAttribute("URL_HOST")%>/my/url/documentoSubmit",true);
 xhr.send(data);
}

虽然这可能需要一些调整才能使用您的文件，但这是一个简单的例子，我希望能为您指明正确的方向。 这有助于您提交表单并通过JavaScript检查何时刷新视图/也许重置输入，因为文件将保留在圆顶中，因为没有刷新。

另请查看您可能

能够读取文件的其他方法，以帮助匹配 Java 服务器预期数据

相关文章：