仿Ajax无刷新上传附件

      最近由于项目原因，需要在页面中上传Excel文件并在后台中对文件中的数据进行分析然后再在当前页面显示出来，当时首先就想到了Ajax上传附件的功能，可在网站找了些资料，发现Ajax是无法实现上传文件的，因为Ajax与后台通信都是通过传递字符串，而上传文件是通过二进制的，是不可能传递文件的，还有就是出于安全方面的考虑JavaScript是不能操作文件的。所以Ajax是根本不可以上传附件的。但项目中确实需要这种无页面刷新上传附件的功能，所以在网上找了些资料，自己动手做了个仿Ajax无刷新上传附件的功能，主要的思路就是在页面中加入个隐藏的iFrame来实现这个功能，将需提交的表单的target设置为该iFrame的ID，当表单提交后其实它是刷新了这个隐藏的iFrame，只是我们看不到罢了，所以就达到了无刷新页面上传附件的功能
      最先时在网上找了个jQuery插件，叫ajaxfileupload.js，也是无刷新上传页面的，看里面的代码，其实也是通过构建个隐藏的iFrame，原理也是大同小异。不过用起来个人觉得它的返回值的处理不是很好，不知是我没有用好还是它本来就是这样。我需要上传附件后再从后台返回一个包含文件中相关数据的JSON的对象。于是我便自己动手写了个，可能代码没有写到最简洁，但自己用起来却得心应手。好了，废话少说，看代码，首先是前台HTML代码：

<form action="MessageSend.do" id="form2" enctype="multipart/form-data" method="post" target="hidden_iframe"> <div style="display:none;" mce_style="display:none;"> <input type="hidden" name="method" value="uploadExcel" /> <iframe name="hidden_iframe" id="hidden_iframe"></iframe> </div> <span style="position:absolute;display:none;" mce_style="position:absolute;display:none;" id="showUploadFile"> <input type="file" id="uploadExcelFile" name="uploadExcelFile" style="width:200px;" disabled="disabled" /> <input type="button" id="upload" value=" 上 传 " οnclick="if(Validator.Validate(this.form,1))this.form.submit();" disabled="disabled" /> </span> </form>

其中的<iframe name="hidden_iframe" id="hidden_iframe"></iframe>主要就是给该form上传后刷新用的，所以将其放在隐藏的DIV中，后台代码如下：

public ActionForward uploadExcel(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception { List<UploadFile> uploadFileList = super.uploadFile(form, true); if (null == uploadFileList || uploadFileList.size() != 1) { super.renderJavaScript(response, "alert('上传文件出错');"); return null; } //下面这段代码主要是读取Excel文件的，每个人的实现方法也许不同，可忽略 StringBuffer objsSB = new StringBuffer("["); UploadFile uploadFile = uploadFileList.get(0); String realPath = request.getSession().getServletContext().getRealPath("/"); ExcelReaderUtils excelUtils = new ExcelReaderUtils(realPath + uploadFile.getFileSavePath(), 0, 1); while (excelUtils.haxNextLine()) { String[] cells = excelUtils.readLineForArray(); if (null == cells) { continue; } objsSB.append("{"); objsSB.append("user_name:'").append(cells[0]).append("',"); objsSB.append("customize_tel:'").append(cells[1]).append("',"); objsSB.append("customize_mail:'").append(cells[2]).append("',"); objsSB.append("customize_fax:'").append(cells[3]).append("'"); objsSB.append("},"); } excelUtils.close(); objsSB.append("{}]"); // 在后台通过调用前台的JavaScript代码，将在后台拼装成的JSON对象传递给它， // 这样，便可完成无刷新页面动态加载上传文件中的数据了 super.renderJavaScript(response, "window.parent.addCustomizeUsers(/"" + objsSB.toString() + "/");"); return null; }

附：renderJavaScript方法

protected void renderJavaScript(HttpServletResponse response, String text) { final String prefixJavaScript = "<mce:script type=/"text/javascript/"><!-- "; final String suffixJavaScript = " // --></mce:script>"; StringBuffer sb = new StringBuffer(); sb.append(prefixJavaScript).append(text).append(suffixJavaScript); this.render(response, sb.toString(), "text/html;charset=UTF-8"; }

另：在做这个功能的过程中发现了个问题，便是<input type="file" />标签的特殊性，举个例子，假如我想上传D：/text.txt文件，在FireFox中，我可以先创建个<input type="file" />标签然后点击选择D：/text.txt文件，然后我可以再复制这个标签，这时复制时产生新的<input type="file" />标签中是含有D：/text.txt文件路径的，可在IE8下无论我怎么复制，包括用jQuery的clone()、clone(true)还是有原始的cloneNode(node)，还通过复制它的父结点，都无法达到连同它的值一起复制的效果，后台查了相关资料，说是为了安全性着想，必须要用户点击上传控件才能有效，不然什可以通过程序在后台偷偷的上传文件了。所以最后想到了，在页面加载完成后将该form中的上传控件通过JavaScript将其移动到指定位置，这样便达到了我理想的效果