java - 上传并读取XML文件并显示在Ext的文本区域中

Question

如何浏览和读取文件(XML)并将其显示在Ext中的文本区域中？

1. 是否可以在客户端本身执行该功能？

2. 我尝试使用 Java 上传 XML 文件并读取它并将响应作为 XML 字符串发送，但我无法在前端接收数据(出现异常“return eval(”(” +json+")")"在 extjs.all) 中？

   我在 Ext 中的代码

   <小时/>

   var win = new Ext.Window({
       layout: 'fit',
       title: 'XML Upload Window',
       id: 'winFileRead',
       resizable: false,
       modal: true,
       closeAction: 'close',
       closable: true,
       plain: true,
       items: [{
           xtype: 'form',
           id: 'frmFileRead',
           fileUpload: true,
           width: 500,
           frame: true,
           monitorValid: true,
           autoHeight: true,
           bodyStyle: 'padding: 10px 10px 0 10px;',
           labelWidth: 50,
           defaults: {
               anchor: '95%',
               allowBlank: false,
               msgTarget: 'side'
           },
           items: [{
               xtype: 'fileuploadfield',
               id: 'verFileReadCmp',
               emptyText: 'Select a File to import',
               fieldLabel: 'File',
               name: 'file',
               buttonCfg: {
                   text: '',
                   iconCls: 'upload-icon'
               }
           }],
           buttons: [{
               formBind: true,
               text: 'Upload',
               handler: function() {
               var fp = Ext.getCmp('frmFileRead');
                   if (fp.getForm().isValid()) {
                       fp.getForm().submit({
                           url: 'viewXml.do',
                           params: {},
                           method: 'POST',
                           waitMsg: 'Uploading your file...',
                           success: function(fp, o) {
                               if (Ext.decode(o.response.responseText).success) {
                                   //Set the XML value to the textarea. Ext.getCmp('textareaXML').setValue(Ext.decode(o.response.responseText).message);
                               } else {
                                   Util.showAlert('Err', Ext.decode(o.response.responseText).message);
                               }
                           },
                           failure: function(response, options) {
                               Util.showAlert('Err', response.responseText);
                           },
                           exception: function(a, b, c, d) {}
                       });
                   }
               }
           },
           {
               text: 'Reset',
               handler: function() {
                   var fp = Ext.getCmp('frmFileRead');
                   fp.getForm().reset();
           }
       }]
   }]
   

   });win.show();

   *****************************
   Java
   ****************************
   
   protected ModelAndView onSubmit(HttpServletRequest request, HttpServletResponse response, Object command, BindException errors) throws ServletException, IOException
   {
       UploadFileTO uploadFileTO = (UploadFileTO) command;
       List<XmlTO> al=new ArrayList<XmlTO>();
       Map<String,String> model = new HashMap<String,String>();
   
       MultipartFile file = uploadFileTO.getFile();
       InputStream inputStream = null;
       String xmlString="";
       String xml=null;
       if (file.getSize() > 0) {
           inputStream = file.getInputStream();
   
           int readBytes = 0;
           byte[] buffer = new byte[10000];
           while ((readBytes = inputStream.read(buffer, 0 , 10000))!=-1)
           {
               xml=new String(buffer, 0, readBytes);
               xmlString=xmlString.concat(xml);
           }
           inputStream.close();
       }
       if (!xmlString.equals("")){
           System.out.println( xmlString );
           model.put("result", "{success:true, message: \""+xmlString+"\"}");
       }else{
           model.put("result", "{success:false, message: \"File upload error.\"}");
       }
       return new ModelAndView("index", model);
   }
   
   ****************************
   
   Exception message in JSON evaluation.
   *******************************
   
   <TABLE width=400>
       <P style="FONT: 13pt/15pt verdana">The XML page cannot be displayed
           <P style="FONT: 8pt/11pt verdana">Cannot view XML input using style sheet. Please correct the error and then click the <A href="javascript:location.reload()" target=_self>Refresh</A> button, or try again later.
               <HR>
   
               <P
                 style="FONT: bold 8pt/11pt verdana">
                   Invalid at the top level of the document. Error processing resource 'http://XXXXXXXX/viewXml.do'.
               </P><PRE
                       style="LINE-HEIGHT: 12pt; FONT-VARIANT: normal; FONT-STYLE: normal; FONT-SIZE: 10pt; FONT-WEIGHT: normal"
                       ><FONT color=blue></FONT>
                   </PRE>
           </P>
       <TBODY>
       </TBODY>
   </TABLE>
   

   <小时/>
   1. 如果方法不正确，请选择或提供支持主要浏览器(Internet Explorer、Firefox、Chrome)的最佳方法？

Answer 1

还需要查看您的 XML。你的代码看起来不错。以下是一些可以帮助您解决问题的指南:

1. 检查 XML 是否格式错误。
2. 请记住，您要将 XMl 嵌入到 JSON 中，因此需要转义任何单引号 (') 或双引号 (")。
3. 执行 viewXml.do 后检查浏览器是否收到有效的 JSON

我确信该问题是由这三者之一或三者组合引起的。我刚刚使用以下 json 尝试了您的代码并且工作正常:

{success:true, message: '<?xml version=\'1.0\' encoding=\'ISO-8859-1\'?><note><to>Tove</to><from>Jani</from><heading>Reminder</heading><body>Test body..</body></note>'}

XML 在 ExtJS 文本区域上呈现得非常好。