技术小手
								2015-02-25 14:28:05
							
							java上传文件仿ajax实现,将上传的文件在后台解析后,不刷新页面,直接显示在前台代码片段
界面形如下图:
- 由于ajax无法发送带有文件的post请求。因此为了达到ajax效果,需要借助iframe。如下:
 <form action="${pageContext.request.contextPath}/sms/uploadFileByExcel"
           id="form2" name="form2" encType="multipart/form-data" method="post"
           target="hidden_frame">
           <table width="95%" border="0" cellpadding="0" cellspacing="0"
                 class="table2">
                 <tr>
                      <td colspan="6" align="left" class="table2_title">导入联系人</td>
                 </tr>
                 <tr>
                      <td width="10%" align="right" colspan="2"><a href="${pageContext.request.contextPath }/rule/downloadDemo?file=/smslk.xls"
                            target="_blank" style="color: blue">点此下载联系人模板</a>
                      </td>
                      <td width="14%" align="right">选择需导入的联系人文件:</td>
                      <td align="left" colspan="2"><input name="file" id="file"
                            type="file" size="35" maxlength="195" />     
                            <input type="button" value="导入" onclick="checker();"> <iframe
                                  name='hidden_frame' id="hidden_frame" style='display:none'></iframe>
                      </td>
                 </tr>
           </table>
</form>
- 表单中action正常填写处理文件上传的操作。target填写一个隐藏的iframe。这样表单提交之后,文件会被上传,但是页面却不会刷新,因为表单提交后被刷新页面为隐藏的iframe,因此用户看到的效果和ajax处理的效果是一样的。
- ajax一样了,但是ajax是有返回值的。但是现在我们值刷新了iframe页面,却没有ajax的返回值,不知道操作到底是成功了还是失败了。因此需要在页面中写一个js的callback方法,然后在处理上传操作成功后来调用这个callback方法,将上传的数据展现在前台。
<script type="text/javascript">
      function callback(msg)  
      {  
           if(msg=="00"){
                 alert("上传失败,请按模版格式重新上传!");
                 return;
           }else if(msg!="null"){
                 var mobiles=document.getElementById("mobile").value;
                 if(mobiles == null || "" == mobiles){
                      document.getElementById("mobile").value =msg;
                 }else{
                      document.getElementById("mobile").value=mobiles+","+msg;
                 }
                 document.getElementById("file").value="";
           }
      }
</script>
- uploadFileByExcel接受到form请求后,进行处理,并调用iframe父页面的callback方法,将数据传到前台,如下:
  /**
       * 从excel批量导入
       */
      @RequestMapping("uploadFileByExcel")
      public String insertBatchByExcel(HttpServletRequest request, HttpServletResponse response, Model model) {
           PrintWriter out;
           response.setContentType("text/html; charset=utf-8");
           try {
           out = response.getWriter();
           MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
           MultipartFile file = multipartRequest.getFile("file");
           String fileNp = "//WEB-INF//resources//demo//";
           String fileName = file.getOriginalFilename();// 获取文件名
           // 判断后缀是否符合
           if ((!fileName.endsWith(".xls")) && (!fileName.endsWith(".xlsx"))) {
                 out.print("<script>parent.callback('00')</script>");//失败,调用iframe的父页面的callback方法。并且将一些信息作为参数传进了callback方法。
                 return null;
           }
           File uploadFile = null;
           // 获得文件名
           if (file.getSize() > 0) {
                 // 获取路径
                 String ctxPath = request.getSession().getServletContext().getRealPath("");
                 // 创建文件
                 File dirPath = new File(ctxPath + fileNp);
                 if (!dirPath.exists()) {
                      dirPath.mkdirs();
                 }
                 fileNp = fileNp + DateUtil.getExcelName();
                 uploadFile = new File(ctxPath + fileNp);
                 try {
                      FileCopyUtils.copy(file.getBytes(), uploadFile);
                 } catch (IOException e) {
                      out.print("<script>parent.callback('00')</script>");//失败,调用iframe的父页面的callback方法。并且将一些信息作为参数传进了callback方法。
                      return null;
                 }
           }
           String link = getAirByExcel(uploadFile,request,model);
           if(StringUtil.isEmpty(link)){
                 out.print("<script>parent.callback('00')</script>");//失败,调用iframe的父页面的callback方法。并且将一些信息作为参数传进了callback方法。
           }
           out.print( "<script>parent.callback('"+link+"')</script>");//成功,调用iframe的父页面的callback方法。并且将一些信息作为参数传进了callback方法。
           } catch (IOException e) {
           }
           return null;
      }
							猜你喜欢
请下载代码后再发表评论
     相关代码
相关代码
				 最近下载
最近下载
				 最近浏览
最近浏览
				
                597117933     LV9
                6月9日
            
            
        
                木子520     LV12
                5月23日
            
            
        
                rexefar    
                4月16日
            
            
                    暂无贡献等级
            
        
                fff2003     LV9
                2023年12月13日
            
            
        
                lyh1989     LV34
                2023年10月24日
            
            
        
                小屁孩     LV7
                2023年6月2日
            
            
        
                微信网友_6411724627349504     LV3
                2023年4月3日
            
            
        
                Small CN     LV7
                2023年1月12日
            
            
        
                Zyj0327    
                2022年11月30日
            
            
                    暂无贡献等级
            
        
                微信网友_6040315240812544     LV8
                2022年11月3日
            
            
        




 
                 
     
                