使用Jquery表单插件上传文件 [英] Upload file using Jquery form plugin

问题描述

我正在使用 jQuery表单插件在Ajax请求中上传文件.已成功发送到服务器，但在响应浏览器上要求通过以下弹出窗口保存响应

I am using Jquery form plugin to upload file in Ajax request.File is successfully sent to server but on response browser is asking to save response with following popup

这是我的HTML

<form:form name="newRequestForm" id="newRequestForm" modelAttribute="requestForm" method="POST">     
<form:input path="mrnFile" type="file" size="40"/>
</form:form>  

JS

    // Initializing Jquery form 
     $(function() {
        $('#newRequestForm').ajaxForm();   
    });

   // This function is called on click event of submit button  
function submitDataRequest(formAction) {
    var options = { 
            beforeSubmit: showRequest,  // pre-submit callback 
                success: showResponse,  // post-submit callback 
                url:  formAction,
                dataType:  'json'
            }; 
     $('#newRequestForm').ajaxSubmit(options); 
}   


function showRequest(formData, jqForm, options) { 
    alert('About to submit: '); 
    return true; 
} 

function showResponse(data, statusText, xhr, $form)  { 
    Alert("In response..")
    if (!data.actionPassed) {
        showErrors(data.errors);
        $("#hideOrShowErrors").show();  
    } else {
        showConfirmation(data, confirmationMsg, formName, successFormAction);
    }
} 

从未调用

showResponse，而是浏览器显示了弹出窗口. 我通过Firebug检查，响应代码为200，仍然未执行成功回调. 阅读一些类似的问题后，我认为这与服务器响应类型有关.因此，我确实在弹簧控制器中进行了跟踪操作

showResponse is never invoked instead browser shows the popup. I checked through Firebug, the response code is 200 still success callback is not executed. After reading some similar question I think it has something to do with server response type. So I did following in my spring controller

public ResponseEntity<ResponseDTO> save(@ModelAttribute("dataRequestForm") DataRequestFormDTO dataRequestFormDTO, BindingResult result, SessionStatus status, Model model, HttpServletResponse response) {  
HttpHeaders responseHeaders = new HttpHeaders();
        responseHeaders.setContentType(MediaType.APPLICATION_JSON);
        return new ResponseEntity<ResponseDTO>(responseDTO, responseHeaders, HttpStatus.CREATED);
    }   

两边我的数据类型都为json，但仍然出现弹出窗口.我犯了任何错误吗?

On both side I have data type as json but still I am getting the popup.Am I making any blunder?

谢谢！

更新的JS

function submitDataRequest(formAction) {
     var options = { 

                  beforeSubmit: function(){ 
                  alert("Before submit");
                  },  // pre-submit callback 
                    success: function(){
                    alert("On success");
                    },  // post-submit callback 
                    url:  formAction
    }  
         $('#newRequestForm').ajaxSubmit(options); 
 }

仍然会出现相同的弹出窗口，并且不会触发success回调.

Still I get the same popup and success callback is not fired.

在控制器中添加了initBinder

@InitBinder
    protected void initBinder(HttpServletRequest request,
            ServletRequestDataBinder binder) throws ServletException {
        binder.registerCustomEditor(CommonsMultipartFile.class,
                new ByteArrayMultipartFileEditor());    
    }   

添加initBinder后，出现以下错误

No serializer found for class java.io.ByteArrayInputStream and no properties discovered to create BeanSerializer

推荐答案

这是IE和iframe(jquery表单插件用于通过ajax上传文件)的常见问题.

This is a common issue with IE and iframe (used by jquery form plugin to upload files with ajax).

我分两步解决:

1)服务器端:删除标头，仅发送内容.

1) Server Side: remove headers, send back just the content.

2)客户端:请勿设置ajax请求 dataType 参数，成功使用以下代码提取json:

2) Client-Side: do not set the ajax request dataType parameter and on success use the following code to extract json:

success: function(data)
{
    try{
        jsonData = jQuery.parseJSON(data);
        // continue process with json encoded data
    }
    catch(e)  
    {
        // handle parsing error
    }

}

这篇关于使用Jquery表单插件上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！