2

フォームを作成するextjsコードがあり、ユーザーはサーバーにアップロードするファイルを選択できます。以下はextjsコードです。

 var fp = new Ext.FormPanel({
    renderTo: 'questionnaire_div',
    id : 'FileuploadID',
    fileUpload: true,
    width: 500,
    frame: true,
    title: 'Upload Audit File',
    autoHeight: true,
    bodyStyle: 'padding: 10px 10px 10px 10px;',
    labelWidth: 50,
    defaults: {
    anchor: '95%',
    allowBlank: false,
    msgTarget: 'side'
},
items: [{
    xtype: 'fileuploadfield',
    id: 'form-file',
    emptyText: 'Select PDF file',
    fieldLabel: 'PDF',
    name: 'file'
}],
buttons: [{
    text: 'Upload',
    handler: function(){
    if(fp.getForm().isValid()){
        fp.getForm().submit({
            url: 'uploadAuditPDF',
            //method : 'POST',
            waitMsg: 'Uploading Audit PDF file...',
            success: function(fp, o){
            msg('Success', 'Processed file "'+o.result.file+'" on the server');
        },
        failure : function() {
            alert('Uploading Audit PDF file failed...');
        }
        });
    }
}
}]
});

以下は、リクエストを受け入れてファイルをデータベースに保存するコードです。

@RequestMapping(value="/uploadAuditPDF", method = RequestMethod.POST)     
public @ResponseBody String uploadAuditPDF(WebRequest request, FileUploadBean uploadItem, BindingResult result){

    if (result.hasErrors()){
        for(ObjectError error : result.getAllErrors()){ 
        return "{\"success\":false}";
    }    

    if(uploadItem.getFile() != null){
        String fileName = uploadItem.getFile().getOriginalFilename();
        byte[] file = uploadItem.getFile().getBytes();
        QuestionnaireHandler questionnaireHandler = new QuestionnaireHandler();
        try{
            questionnaireHandler.saveFileAttachment(fileName, file);
        }catch (Exception ex) {
                    throw new VDSQRuntimeException(PropertiesReader.getValue(Constants.ERROR_GENERIC));
        }

    }else{
        return "{\"success\":false}";
    }
    return "{\"success\":true}";
}

ここで私の問題は、ファイルのアップロード機能が必要に応じて適切に機能しているにもかかわらずです。しかし、応答、つまり成功文字列が ExtJS 側に来ないため、extjs 形式では常に失敗コールバック関数が実行されます。

failure : function() {
            alert('Uploading Audit PDF file failed...');
        }

ファイルアップロードの成功または失敗のステータスを伝えるために、応答をユーザーに送信する方法を誰でも助けることができますか?

4

3 に答える 3

2

私にとって、この問題 (私が 1 日の大半を費やした問題) の解決は非常に簡単でした。JSON 応答のトップレベルに{"success":true,...}を含めます。ExtJS はそれを期待しています。

これが私のコントローラー機能です：

@RequestMapping(value="/convertXLSToJSON", method=RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE)
public String handleFileUpload(@RequestParam("name") String name, @RequestParam("file") MultipartFile file) 
{
      JSONObject full_jo = null;

      //blah blah blah... process file into JSON

      return full_jo.toString();
}
于 2015-04-10T20:50:25.673 に答える
0

formpanel コードを次のように変更します。

var fp = new Ext.FormPanel({
    renderTo: 'questionnaire_div',
    id: 'FileuploadID',
    fileUpload: true,
    width: 500,
    frame: true,
    title: 'Upload Audit File',
    autoHeight: true,
    bodyStyle: 'padding: 10px 10px 10px 10px;',
    labelWidth: 50,
    defaults: 
    {
        anchor      : '95%',
        allowBlank  : false,
        msgTarget   : 'side'
    },
    items: [
        {
            xtype: 'fileuploadfield',
            id: 'form-file',
            emptyText: 'Select PDF file',
            fieldLabel: 'PDF',
            name: 'file'
        }
    ],
    buttons: [
        {
            text: 'Upload',
            handler: function () 
            {
                if (fp.getForm().isValid()) 
                {
                    fp.getForm().submit(
                    {
                        url: 'uploadAuditPDF',
                        //method : 'POST',
                        waitMsg: 'Uploading Audit PDF file...',
                        success: function (fp, o) 
                        {
                            // ******************************************************
                            var result = o.result.success;
                            if(success)
                            {
                                msg('Success', 'Processed file "' + o.result.file + '" on the server');
                            }
                            else
                            {
                                alert('Uploading Audit PDF file failed...');
                            }
                            // ******************************************************
                        }
                    });
                }
            }
        }
    ]
});

Java コントローラーを次のように変更します。

@RequestMapping(value="/uploadAuditPDF", method = RequestMethod.POST)     
public @ResponseBody void uploadAuditPDF(WebRequest request, FileUploadBean uploadItem, BindingResult result, HttpServletResponse response)
{
    // I defined global return variable and initialized it
    String successResult = false;

    if (result.hasErrors())
    {

        successResult = false;
    }    

    if(uploadItem.getFile() != null)
    {
        String fileName = uploadItem.getFile().getOriginalFilename();
        byte[] file = uploadItem.getFile().getBytes();
        QuestionnaireHandler questionnaireHandler = new QuestionnaireHandler();
        try
        {
            questionnaireHandler.saveFileAttachment(fileName, file);
        }
        catch (Exception ex) 
        {
            throw new VDSQRuntimeException(PropertiesReader.getValue(Constants.ERROR_GENERIC));
        }

    }
    else
    {
        successResult = false;
    }
    successResult = true;

    // TODO: here is important part
    response.setContentType("text/html");
    response.getWriter().write("{success:"+successResult+"}");
}
于 2013-03-30T13:52:27.890 に答える