当前位置： 移动技术网 > IT编程>开发语言>Java > springMVC实现前台带进度条文件上传的示例代码

springMVC实现前台带进度条文件上传的示例代码

2019年07月22日  | 移动技术网IT编程  | 我要评论

项目框架采用spring+hibernate+springmvc如果上传文件不想使用flash那么你可以采用html5;截图前段模块是bootstarp框架;不废话直接来代码;spring-mvc配置文件;效果截图如下:

详细实现如下:

1、mvc-config.xml

<?xml version="1.0" encoding="utf-8"?> 
<beans xmlns="http://www.springframework.org/schema/beans" 
  xmlns:xsi="http://www.w3.org/2001/xmlschema-instance"      
    xmlns:context="http://www.springframework.org/schema/context" 
  xmlns:mvc="http://www.springframework.org/schema/mvc" 
  xsi:schemalocation="http://www.springframework.org/schema/beans  
  http://www.springframework.org/schema/beans/spring-beans.xsd 
  http://www.springframework.org/schema/context 
  http://www.springframework.org/schema/context/spring-context-3.2.xsd 
  http://www.springframework.org/schema/mvc 
  http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd"> 
 
  <!-- 注解扫描包 --> 
  <context:component-scan base-package="com.yunfang.banks.controllers" /> 
 
  <!-- 开启注解 --> 
  <mvc:annotation-driven /> 
  <!-- 不拦截静态资源 --> 
  <mvc:default-servlet-handler /> 
  <mvc:interceptors> 
    <mvc:interceptor> 
      <mvc:mapping path="/js/" /> 
      <mvc:mapping path="/js/**" /> 
      <bean class="com.yunfang.banks.intreceptor.myinterceptor"></bean> 
    </mvc:interceptor> 
  </mvc:interceptors> 
  <mvc:interceptors> 
    <bean class="com.yunfang.banks.intreceptor.myinterceptor"></bean> 
  </mvc:interceptors> 
  <!-- 静态资源(js/image)的访问 --> 
  <mvc:resources location="/js/" mapping="/js/**" /> 
 
  <!-- 定义视图解析器 --> 
  <bean id="viewresolver" 
    class="org.springframework.web.servlet.view.internalresourceviewresolver"> 
    <property name="prefix" value="/"></property> 
    <property name="suffix" value=""></property> 
  </bean> 
 
  <bean class="org.springframework.web.servlet.mvc.annotation.annotationmethodhandleradapter"> 
    <property name="messageconverters"> 
      <list> 
        <!--下载的时候专用 --> 
        <bean 
          class="org.springframework.http.converter.bytearrayhttpmessageconverter" /> 
        <bean id="jsonhttpmessageconverter" 
          class="org.springframework.http.converter.json.mappingjacksonhttpmessageconverter"> 
          <property name="supportedmediatypes"> 
            <list> 
              <value>text/plain;charset=utf-8</value> 
            </list> 
          </property> 
        </bean> 
      </list> 
    </property> 
  </bean> 
  <!-- 配置springmvc处理上传文件的信息,自定义上传,带进度条 --> 
  <bean id="multipartresolver" class="com.yunfang.banks.listener.custommultipartresolver"> 
      <property name="defaultencoding" value="utf-8" /> 
    <property name="maxuploadsize" value="10000000000" /> 
  </bean> 
    <!--    
    <bean id="multipartresolver" 
    class="org.springframework.web.multipart.commons.commonsmultipartresolver"> 
    <property name="defaultencoding" value="utf-8" /> 
    <property name="maxuploadsize" value="10485760000" /> 
    <property name="maxinmemorysize" value="40960" /> 
  </bean>  
    --> 
   
</beans>

2、实体工具类：progress.java

package com.yunfang.banks.listener; 
 
public class progress { 
   
  private long pbytesread; 
  private long pcontentlength; 
  private long pitems; 
  public long getpbytesread() { 
    return pbytesread; 
  } 
  public void setpbytesread(long pbytesread) { 
    this.pbytesread = pbytesread; 
  } 
  public long getpcontentlength() { 
    return pcontentlength; 
  } 
  public void setpcontentlength(long pcontentlength) { 
    this.pcontentlength = pcontentlength; 
  } 
  public long getpitems() { 
    return pitems; 
  } 
  public void setpitems(long pitems) { 
    this.pitems = pitems; 
  } 
  @override 
  public string tostring() { 
    return "progress [pbytesread=" + pbytesread + ", pcontentlength=" 
        + pcontentlength + ", pitems=" + pitems + "]"; 
  } 
   
   
   
}

3、文件上传进度监听类：fileuploadprogresslistener.java

package com.yunfang.banks.listener; 
 
import javax.servlet.http.httpsession; 
import org.apache.commons.fileupload.progresslistener; 
import org.springframework.stereotype.component; 
 
@component 
public class fileuploadprogresslistener implements progresslistener { 
  private httpsession session; 
  public void setsession(httpsession session){ 
    this.session=session; 
    progress status = new progress();//保存上传状态 
    session.setattribute("status", status); 
  } 
  public void update(long pbytesread, long pcontentlength, int pitems) { 
    progress status = (progress) session.getattribute("status"); 
    try { 
      thread.sleep(5); 
    } catch (interruptedexception e) { 
      e.printstacktrace(); 
    } 
    status.setpbytesread(pbytesread); 
    status.setpcontentlength(pcontentlength); 
    status.setpitems(pitems); 
    //system.out.println(">>>>>>>>>>>>>>>>>>>>"+status); 
     
  } 
 
}

4、自定义扩展org.springframework.web.multipart.commons.commonsmultipartresolver类，重写public multipartparsingresult parserequest(httpservletrequest request) throws multipartexception方法：

custommultipartresolver.java

package com.yunfang.banks.listener; 
 
import java.util.list; 
 
import javax.servlet.http.httpservletrequest; 
import org.apache.commons.fileupload.servlet.servletfileupload; 
import org.apache.commons.fileupload.fileitem; 
import org.apache.commons.fileupload.fileupload; 
import org.apache.commons.fileupload.fileuploadbase; 
import org.apache.commons.fileupload.fileuploadexception; 
import org.springframework.beans.factory.annotation.autowired; 
import org.springframework.web.multipart.maxuploadsizeexceededexception; 
import org.springframework.web.multipart.multipartexception; 
import org.springframework.web.multipart.commons.commonsmultipartresolver; 
 
public class custommultipartresolver extends commonsmultipartresolver { 
  @autowired 
  private fileuploadprogresslistener progresslistener; 
 
  public void setfileuploadprogresslistener( 
      fileuploadprogresslistener progresslistener) { 
    this.progresslistener = progresslistener; 
  } 
   
  @override 
  @suppresswarnings("unchecked") 
  public multipartparsingresult parserequest(httpservletrequest request) 
      throws multipartexception { 
    string encoding = determineencoding(request); 
    fileupload fileupload = preparefileupload(encoding); 
    progresslistener.setsession(request.getsession()); 
    fileupload.setprogresslistener(progresslistener); 
    try { 
      list<fileitem> fileitems = ((servletfileupload) fileupload).parserequest(request); 
      return parsefileitems(fileitems, encoding); 
    } 
    catch (fileuploadbase.sizelimitexceededexception ex) { 
      throw new maxuploadsizeexceededexception(fileupload.getsizemax(), ex); 
    } 
    catch (fileuploadexception ex) { 
      throw new multipartexception("could not parse multipart servlet request", ex); 
    } 
  } 
   
}

5、uploadcontroller.java

@requestmapping("usercontrollers/progress") 
public void uploadfile(httpservletrequest request,httpservletresponse response, 
            @requestparam("file") commonsmultipartfile file) throws ioexception { 
   response.setcontenttype("text/html"); 
   response.setcharacterencoding("gbk"); 
   printwriter out; 
   boolean flag = false; 
   if (file.getsize() > 0) { 
     //文件上传的位置可以自定义 
     flag = fileuploadutil.uploadfile(file, request); 
   } 
   out = response.getwriter(); 
   if (flag == true) { 
    out.print("1"); 
   } else { 
    out.print("2"); 
   } 
}

6、fileuploadutil.java

import java.io.file; 
 
import javax.servlet.http.httpservletrequest; 
 
import org.springframework.web.multipart.multipartfile; 
 
public class fileuploadutil { 
   
  public static boolean uploadfile(httpservletrequest request, multipartfile file) { 
     system.out.println("开始"); 
     string path = request.getsession().getservletcontext().getrealpath("upload"); 
     string filename = file.getoriginalfilename(); 
     system.out.println(path); 
     file targetfile = new file(path, filename); 
     if (!targetfile.exists()) { 
       targetfile.mkdirs(); 
     } 
     // 保存 
     try { 
       file.transferto(targetfile); 
       return true; 
     } catch (exception e) { 
       e.printstacktrace(); 
       return false; 
     } 
 
  } 
 
}

7、前台页面

<%@ page language="java" import="java.util.*" pageencoding="utf-8"%> 
<% 
  string path = request.getcontextpath(); 
  string basepath = request.getscheme() + "://" 
      + request.getservername() + ":" + request.getserverport() 
      + path + "/"; 
%> 
 
<!doctype html> 
<html> 
<head> 
<base href="<%=basepath%>"> 
 
 
<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="cache-control" content="no-cache"> 
<meta http-equiv="expires" content="0"> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<!-- 
 <link rel="stylesheet" type="text/css" href="styles.css"> 
--> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
 
<style type="text/css"> 
.file-box { 
  position: relative; 
  width: 340px 
} 
 
.txt { 
  height: 22px; 
  border: 1px solid #cdcdcd; 
  width: 180px; 
  vertical-align: middle; 
  margin: 0; 
  padding: 0 
} 
 
.btn { 
  border: 1px solid #cdcdcd; 
  height: 24px; 
  width: 70px; 
  vertical-align: middle; 
  margin: 0; 
  padding: 0 
} 
 
.file { 
  position: absolute; 
  top: 0; 
  right: 80px; 
  height: 24px; 
  filter: alpha(opacity :  0); 
  opacity: 0; 
  width: 260px; 
  vertical-align: middle; 
  margin: 0; 
  padding: 0 
} 
</style> 
<%--<script type="text/javascript"> 
    function myinterval() 
    { 
      $("#progress").html(""); 
      $.ajax({ 
        type: "post", 
        url: "<%=basepath%>usercontrollers/getsessions", 
      data : "1=1", 
      datatype : "text", 
      success : function(msg) { 
        var data = msg; 
        console.log(data); 
        $("#pdiv").css("width", data + "%"); 
        $("#progress").html(data + "%"); 
      } 
    }); 
  } 
  function auttime() { 
    setinterval("myinterval()", 200);//1000为1秒钟 
  } 
</script> 
 
 
--%> 
<script type="text/javascript"> 
  function upladfile() { 
    var fileobj = document.getelementbyid("file").files[0]; // js 获取文件对象 
    var filecontroller = "usercontrollers/progress"; // 接收上传文件的后台地址  
    // formdata 对象---进行无刷新上传 
    var form = new formdata(); 
    form.append("author", "hooyes"); // 可以增加表单数据 
    form.append("file", fileobj); // 文件对象 
    // xmlhttprequest 对象 
    var xhr = new xmlhttprequest(); 
    xhr.open("post", filecontroller, true); 
    xhr.onload = function() { 
      alert("上传完成!"); 
      //$('#mymodal').modal('hide'); 
    }; 
        //监听progress事件 
    xhr.upload.addeventlistener("progress", progressfunction, false); 
    xhr.send(form); 
  } 
  function progressfunction(evt) { 
 
    var progressbar = document.getelementbyid("progressbar"); 
 
    var percentagediv = document.getelementbyid("percentage"); 
 
    if (evt.lengthcomputable) { 
 
      progressbar.max = evt.total; 
 
      progressbar.value = evt.loaded; 
 
      percentagediv.innerhtml = math.round(evt.loaded / evt.total * 100) 
          + "%"; 
 
    } 
 
  } 
</script> 
 
</head> 
 
<body style="width: 80%;height: 80%;margin: 0px auto;"> 
  <div class="row bootstrap-admin-no-edges-padding"> 
    <div class="col-md-12"> 
      <div class="panel panel-default"> 
        <div class="panel-heading"> 
          <div class="text-muted bootstrap-admin-box-title">文件管理</div> 
        </div> 
        <div class="bootstrap-admin-panel-content"> 
          <button class="btn btn-primary btn-lg" data-toggle="modal" 
            data-target="#mymodal">上传</button> 
          <input type="text" id="test"> 
        </div> 
      </div> 
    </div> 
  </div> 
 
  <!-- 模态框（modal） --> 
  <div class="modal fade" id="mymodal" tabindex="-1" role="dialog" 
    aria-labelledby="mymodallabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
      <div class="modal-content"> 
        <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" 
            aria-hidden="true">×</button> 
          <h4 class="modal-title" id="mymodallabel">文件上传进度</h4> 
        </div> 
        <div class="modal-body"> 
          <progress id="progressbar" value="0" max="100" 
            style="width: 100%;height: 20px; "> </progress> 
          <span id="percentage" style="color:blue;"></span> <br> 
          <br> 
          <div class="file-box"> 
            <input type='text' name='textfield' id='textfield' class='txt' /> 
            <input type='button' class='btn' value='浏览...' /> <input 
              type="file" name="file" class="file" id="file" size="28" 
              onchange="document.getelementbyid('textfield').value=this.value" /> 
            <input type="submit" name="submit" class="btn" value="上传" 
              onclick="upladfile()" /> 
             
          </div> 
        </div> 
        <div class="modal-footer"> 
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭 
          </button> 
        </div> 
      </div> 
      <!-- /.modal-content --> 
    </div> 
    <!-- /.modal --> 
  </div> 
  <script type="text/javascript" 
    src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
  <script src="js/bootstrap.min.js"></script> 
</body> 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网