Question

我使用this example为HttpServletRequest创建了一个自定义的MultipartFilter，可以将任何类型的文件从客户端上传到我的数据库。

表单是放置在模式中的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...
});

Answer 1

您可以尝试使用iframe。制作隐藏的假帧和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" }*/
}

Answer 2

您的代码存在问题

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 - 如果multipart / form-data不起作用，请将其设置为 false，但不要离开它，因为jQuery默认为application / x-www-form-urlencoded并且不发送文件

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

Answer 3

我建议使用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服务器预期数据

在AJAX post请求中使用自定义HttpServletRequest Filter

3 个答案: