JavaWEB基础之文件上传实现

一时失言乱红尘 2021-09-10 22:58 322阅读 0赞

准备：我们需要找一张绿色或者其它颜色的背景图，放在photo文件夹里就好哈，然后加jar：common-io和commo-fileupload就可以哈

![Center][]

创建progress.css文件：

.pro{
    
      height:15px;
    
      width:500px;
    
      background: #FFFFF0;
    
      border: 1px solid #8FBC8F;
    
      margin: 0;
    
      padding: 0;
    
      display:none;
    
      position: relative;
    
      left:25px;
    
      float:left;
    
    }

创建uploadAjax.js

调用和引入

<div class="am-g">
          <div class="am-u-sm-12" align="left">
        	<div class="am-form-group">
    		<form action="<%=basePath %>UploadSpotImgServlet" name="f1" id="f1" method="post" enctype="multipart/form-data" target="if">
    	 		<div class="field">
                    <a class="button input-file" href="javascript:void(0);">+ 浏览文件<input size="30" type="file" name="logo" data-validate="required:请选择上传文件,regexp#.+.(jpg|jpeg|png|gif)$:只能上传jpg|gif|png格式文件" /></a>
                 </div>
                 <br>
                 <input type="reset" name="res1" value="重置"  class="am-btn am-btn-primary" />
                 <input type="submit" name="but1" value="提交" onclick="go();" class="am-btn am-btn-primary" />
    		</form><br>
    		<div id="pro" class="pro" align="left" style="height:1px;width:600px;">
     		<img alt="" src="photo/progress.png" width="0px" id="imgpro">
    		</div>
      		<span id="prop" style="width:15px;height:15px;display: none;">0%</span>
      		<br><br>
    		<iframe id="if" name="if" src="" style="display: none"></iframe>
    		
    		
    	   </div>
         </div>
       </div>

创建UploadSpotImgServlet

public class UploadSpotImgServlet extends HttpServlet {
    
    	/**
    	 * 
    	 */
    	private static final long serialVersionUID = 1L;
    
    	private String fileName;
    	
    	private File tempFile;
    
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		//设置编码格式为utf-8
    		response.setContentType("text/html;charset=UTF-8");
    		PrintWriter out1 = response.getWriter();
    		
    		request.setCharacterEncoding("UTF-8");
    		//获取session，保存进度和上传结果，上传结果初始值为NOK，当为Ok表示上传完成
    		HttpSession session=request.getSession();
    		session.setAttribute("prog", "0");
    		session.setAttribute("result", "NOK"); 
    		session.setAttribute("error", "");
    		String error="";
    		//给上传的文件设一个最大值，这里是不得超过50MB
    		int maxSize=50*1024*1024;
    		//创建工厂对象和文件上传对象
    		DiskFileItemFactory factory=new DiskFileItemFactory();
    		ServletFileUpload upload=new ServletFileUpload(factory);
    		try {
    			//解析上传请求
    			List items=upload.parseRequest(request);
    			Iterator itr=items.iterator();
        
    		   while(itr.hasNext()){
    			    FileItem item=(FileItem)itr.next();
    			    //判断是否为文件域
    			    if(!item.isFormField()){
    			     if(item.getName()!=null&&!item.getName().equals("")){
    				      //获取上传文件大小和文件名称
    				      long upFileSize=item.getSize();   
    				      fileName=item.getName();
    				      if(upFileSize>maxSize){
    				       error="您上传的文件太大了，请选择不超过50MB的文件!";
    				       break;
    				      }
    				      //此时文件暂存在服务器的内存中，构造临时对象
    				      tempFile=new File(fileName);
    				      //指定文件上传服务器的目录及文件名称
    				      File file=new File("D:\\MyEclipse\\workspace\\TourismSystemServer\\WebRoot\\source\\images",tempFile.getName());
    				      //构造输入流读文件
    				      InputStream is=item.getInputStream();
    				      int length=0;
    				      byte[] by=new byte[1024];
    				      double persent=0;
    				      FileOutputStream fos=new FileOutputStream(file);
    				      PrintWriter out=response.getWriter();
    				      while((length=is.read(by))!=-1){
    				       //计算文件进度
    				       persent+=length/(double)upFileSize*100D;
    				       fos.write(by, 0, length);
    				       session.setAttribute("prog", Math.round(persent)+""); 
    				       Thread.sleep(10);
    				      }
    				      fos.close();
    				      Thread.sleep(1000);
    			     	}else{
    			     		error="没选择上传文件！";
    			     	}
    			    }
    		   }
    		   
    		  Constant.ImgPath.path = "/source/images/"+tempFile.getName();
    		  //System.out.println(Constant.ImgPath.path);
    		   response.sendRedirect(Constant.WEB_URL_ADDSPOTINFO);
    		   
    		} catch (Exception e) {
    			e.printStackTrace();
    			error="上传文件出现错误:"+e.getMessage();
    		}
    		if(!error.equals("")){ 
    			session.setAttribute("error", error);
    		}else{
    			session.setAttribute("result", "OK");
    		}
    		
    		out1.flush();
    		out1.close();
    	}
     
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		doGet(request, response);
    	}
    	
    }

ok,这样我们就可以上传文件到我们制定的文件夹里哦，还有结合Ajax，就不会出现页面刷新的情况了哦！

[Center]: /images/20210813/7ea1be745608480faaabc20d01d930d0.png