JavaWEB基础之文件上传实现

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

创建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

      function go(){
       f1.submit();
       document.getElementById("pro").style.display="block";
       document.getElementById("prop").style.display="";
       timer=setInterval("getP()",50);
      }
      var xmlHttpRequest;
      function getP(){
       if(window.XmlHttpRequest){
        xmlHttpRequest=new XmlHttpRequest();
       }else{
        xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
       }
       xmlHttpRequest.onreadystatechange=callBack;
       url="GetProgressServlet";
       xmlHttpRequest.open("post",url,true);
       xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
       xmlHttpRequest.send("&timeStamp="+(new Date()).getTime());
      }
      //回调函数
      function callBack(){
       if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
        result=xmlHttpRequest.responseText;
        var result=result.replace(/(^\s*)|(\s*$)/g, "");
        var res=result.split(",");
        var flag=res[1];
        var per=parseInt(res[0]);
        var err=res[2];
        document.getElementById("imgpro").style.width=per*5+"px";
        document.getElementById("prop").innerHTML=per+"%";
        if(flag=="OK"){
         window.clearInterval(timer);
         alert("上传成功！");
         document.getElementById("pro").style.display="none";
         document.getElementById("prop").innerHTML="";
         f1.reset();
        }
        if(err!=""||err.length>0){
         window.clearInterval(timer);
         alert(err);
        }
        if(flag==null){
         window.clearInterval(timer);
        }
       }
      }
  
 

调用和引入

<link rel="stylesheet" type="text/css" href="css/progress.css">
<script type="text/javascript" src="js/uploadAjax.js" charset="UTF-8"></script>
   

      <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，就不会出现页面刷新的情况了哦！



文章来源: smilenicky.blog.csdn.net，作者：smileNicky，版权归原作者所有，如需转载，请联系作者。

原文链接：smilenicky.blog.csdn.net/article/details/51113823