springmvc + h5(进度条)文件上传

版权声明:本文为博主原创文章,未经博主允许不得转载。

1.先上效果图

1.1弹出附件框

1.2选择文件,点击上传(这里做了一个简单的校验)

1.3点击上传

1.4上传成功 刷新列表

2. 知识点准备

2.1XMLHttpRequest

2.2H5 progress

2.3Springmvc 

2.4Maven项目下需要的Jar包

		<dependency>
			<groupId>commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
			<version>1.2.1</version>
		</dependency>
		<dependency>
		    <groupId>commons-io</groupId>
		    <artifactId>commons-io</artifactId>
		    <version>2.4</version>
		</dependency>

3. 项目实施

3.1前台代码(这里用到的是bootstrap的模态窗)

<div class="modal-body">
				<div>
					<p>已存在附件列表</p>
					<!-- 
					<div class="row" id="fuJiaList">
						
					</div>
					 -->
					 <table class="table table-bordered" >
					  <tbody id="fuJiaList">
					  
					  </tbody>
					 </table>
				</div>
				<hr/>
				<div style="margin-bottom: 5px;"><b>上传文件</b>(文件最大不能超过5M)</div>
				
					<div class="row">
						<label class="col-sm-4">请选择要上传的文件</label>
						<div class="col-sm-8">
							<input type="file" id="fileToUpload" name="fileToUpload" onchange="fileSelected();">
						</div>
						
						<div class="col-sm-12" id="fileName"></div>
						<div class="col-sm-12" id="fileSize"></div>
						<div class="col-sm-12" id="fileType" style="margin-bottom: 5px;"></div>
						<div class="col-sm-4">
							<input type="button" onclick="uploadFile()" id="uploadFileButton" value="上传"
								 disabled="false" class="btn btn-info btn-sm"/>
						</div>
						<div class="col-sm-12" id="progressNumber"></div>
						<div class="col-sm-12" id="divForProgress" style="display:none">
							<progress value="0" max="100" id="proDownFile" style="width: 567px;border-radius: 2px; border-left: 1px #ccc solid; border-right: 1px #ccc solid; border-top: 1px #aaa solid; background-color: #eee;">
							</progress>
						</div>
						
					</div>
					<input type="hidden" id="FuJia_courseId" name="courseId">
			</div>

3.2前台页js代码(XMLHttpRequest)

 function fileSelected() {
        var file = document.getElementById('fileToUpload').files[0];
        if (file) {
          var fileSize = 0;
          if (file.size > 1024 * 1024)
            fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
          else
            fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

          document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
          document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
          document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
          
          if(file.size > 1024 * 1024 * 5){
        	  alert("文件大小超过5M,不能上传!");
        	  $("#uploadFileButton").attr("disabled","false");//文件过大时上传按钮不可
          }else{
        	  $("#uploadFileButton").removeAttr("disabled");
          }
          
          
        }
      }

      function uploadFile() {
    	var id= $("#id").val();
        var fd = new FormData();
        fd.append("file", document.getElementById('fileToUpload').files[0]);
        fd.append("id",id);//添加参数 
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);//添加监听 更新进度条
        xhr.addEventListener("load", uploadComplete, false);//添加完成监听 
        xhr.addEventListener("error", uploadFailed, false);//添加错误监听 
	xhr.addEventListener("abort", uploadCanceled, false);
	xhr.open("POST", "URL");//URL改成你要上传的Action
        xhr.send(fd);//发送文件到后台
      }

      function uploadProgress(evt) {
    	var objPro=document.getElementById('proDownFile');
    	  //显示进度条
        $("#divForProgress").removeAttr("style");
        if (evt.lengthComputable) {
        
          var percentComplete = Math.round(evt.loaded * 100 / evt.total);
          document.getElementById('progressNumber').innerHTML = "已经上传"+percentComplete.toString() + '%';
          objPro.value=percentComplete.toString();
        }
        else {
          document.getElementById('progressNumber').innerHTML = 'unable to compute';
        }
      }
      //上传成功以后回调函数
      function uploadComplete(evt) {
        /* This event is raised when the server send back a response */
       	if( evt.target.responseText =="Y"){
       		alert("上传成功!");
       	}
      }

      function uploadFailed(evt) {
        alert("There was an error attempting to upload the file.");
      }

      function uploadCanceled(evt) {
        alert("The upload has been canceled by the user or the browser dropped the connection.");
      }

3.3后台代码(Springmvc)

		@RequestMapping("/fileupdate")
		@ResponseBody
		public String addFuJia(Integer id,HttpServletRequest request,@RequestParam("file") CommonsMultipartFile file){
			
			
			try {
				if(file.getSize()!=0){
					//文件上传
					
					String pathToBeSaved="/fileUpLoad"+file.getOriginalFilename();
					String path=request.getSession().getServletContext().getRealPath("/")+pathToBeSaved;
					
					File newFile=new File(path);
					//通过CommonsMultipartFile的方法直接写文件(注意这个时候)
					file.transferTo(newFile);
					
				}
				
			} catch (IllegalStateException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
			return "Y";
		}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏深度学习思考者

Python编辑器--Ulipad

windows下Python的IDE选择:http://blog.csdn.net/cserchen/article/details/7036435 本人结合使...

3505
来自专栏前端下午茶

一个骚气的文章目录自动生成器了解一下

这个插件根据选定的目录内容中的 h1, h2, h3, h4, h5, h6 标签来自动生成目录插入到选定的目录容器中,并且提供一个漂亮的样式效果

1772
来自专栏君赏技术博客

Jekyll-Admin-Mac-模板处理

制作导航条 使用网络框架Alamofire 使用 SwiftyJSON iOS10开启启用 HTTP 请求 使用 ObjectMapper ...

1133
来自专栏Ryan Miao

idea快捷键总结

使用好快捷键会快很多,这里我慢慢添加我用习惯的快捷键。参考 1.alt+enter 这个几乎万能,有错误提示的时候将光标移动到错误处,然后alt+enter,会...

28912
来自专栏向治洪

RecyclerView notifyItem闪烁的问题

之前我们做点赞,用listview做的话,就是在item实现点击后,写一个scal动画,不过现在都转到RecyclerView,那么要做这种效果于是做了一个no...

3495
来自专栏我和未来有约会

建立可扩展的silverlight 应用框架 step-6

整理导航模块“LeftNav” 首先说一下我想要实现的效果。 我希望在左侧的导航点击了以后右侧的主体部分发声变化。 之前我在LeftNav模块用的控件是Togg...

21610
来自专栏一个会写诗的程序员的博客

13.14 SpringBoot集成JSP模板引擎:JSP页面样式乱掉13.14 SpringBoot集成JSP模板引擎:JSP页面样式乱掉原因分析解决方案测试验证

在如下的HTML/JSP源代码中,有特殊字符(比如说,html标签,</textarea>)

1314
来自专栏葡萄城控件技术团队

三天学会HTML5 之第一天

引言 HTML5 一直是非常热门的话题,因此此系列文章主要从一些基本功能开始讲起,逐步深入了解HTML5的新概念。 首先了解一些基本的术语和概念。 SGML, ...

2247
来自专栏技术墨客

React Flow代码静态检查

Flow是Facebook开源的静态代码检查工具,他的作用是在运行代码之前对React组件以及Jsx语法进行静态代码的检查以发现一些可能存在的问题。Flow可以...

1184
来自专栏全栈

基于iView的列表组件封装

8602

扫码关注云+社区

领取腾讯云代金券