使用XMLHTTPRequest实现上传文件进度条

最新推荐文章于 2023-06-08 14:58:41 发布

xiaoshuo566

最新推荐文章于 2023-06-08 14:58:41 发布

阅读量2.2k

点赞数

分类专栏： ❀前端

本文链接：https://blog.csdn.net/xiaoshuo566/article/details/81702690

版权

❀前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前台：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>XMLHttpRequest上传文件进度实现</title>
    <script type="text/javascript">
        function uploadFile(){
		var ot;
		var oloaded;
		var fileobj1 = document.getElementById("video").files[0];//获取要上传的文件
		var fileobj2 = document.getElementById("pic").files[0];
		var videotitle = document.getElementById("videotitle").value;//获取输入的视频标题
		alert(videotitle);
		var url = "videoUpload";
		var form = new FormData();//创建一个formdata（表单数据）
		form.append("videoname",fileobj1);
		form.append("picname",fileobj2);
		form.append("videotitle",videotitle);
		var xhr = new XMLHttpRequest();// XMLHttpRequest 对象
		xhr.open("post", url, true);//post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
		//xhr.onload = uploadComplete;
		//xhr.onerror = uploadError;
		xhr.upload.onprogress = progressFunction;//文件上传过程中不断调用的一个方法
		xhr.upload.onloadstart = function (){//上传开始执行方法
			ot = new Date().getTime();//设置上传开始时间
			oloaded = 0;//设置上传开始时，以上传的文件大小为0
		};
		xhr.send(form);
	}
	function uploadComplete(){
		alert("上传成功");
	}
	function uploadError(){
		alert("上传失败");
	}
	function progressFunction(event){
		var progressBar = document.getElementById("progressBar");
		if(event.lengthComputable){
			progressBar.max = event.total;
			progressBar.value = event.loaded;
                        if(progressBar.max == progressBar.value){
				alert("上传完成！")
			    }
		}
	}
</script>
</head>
<body>
    <div id="formwrapper">
		<h3>上传视频</h3>
		<form action="#" method="post" enctype="multipart/form-data">
			<fieldset>
				<legend>视频的基本信息</legend>
				<div>
					<label for="title">视频标题</label> <input type="text" name="videotitle"
						id="videotitle" value="" size="60" maxlength="200" /> *(最多200个字符)<br />
				</div>
				<div>
					<label for="source">选择视频文件（仅限MP4格式）</label> <input type="file"
						name="videoname" id="video" onchange="verificationVideoFile(this)">  <br />
				</div>
				<div>
					<label for="source">选择视频封面</label> <input type="file"
						name="picname" id="pic" onchange="verificationPicFile(this)"> <br />
				</div>
				<progress id="progressBar" value="0" max="100" style="width: 300px;"></progress>
				<div class="enter">
					<input type="button" onclick="uploadFile()" value="上传">
					<input	name="reset" type="reset" class="buttom" value="重置" /> 
					<input	name="return" type="button" class="buttom" value="返回列表页面"
						onclick="window.location = 'SearchArticlesServlet'" />
				</div>
			</fieldset>
		</form>
	</div>
</body>
</html>

后台：

// 文件上传
	@RequestMapping(value="/videoUpload", method = RequestMethod.POST)
	public String videoUpload(@RequestParam("videotitle")String videotitle
			,@RequestParam(value = "videoname", required = false) MultipartFile videoname,
			@RequestParam(value = "picname", required = false) MultipartFile picname
			,HttpServletRequest request, HttpServletResponse response) throws Exception {
		
		if (videoname == null||picname==null) return "addVideo.jsp";

		String videoName = videoname.getOriginalFilename();
		String picName = picname.getOriginalFilename();
		System.out.println(videoName);
		String path = "E:\\file";
		//创建一个新文件夹保存新上传的视频和封面图片
		Date date = new Date();
		SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddHHmmss");
		String time = formatter.format(date);
		String newPath = path+"\\"+time;
		File newfile = new File(newPath);
		System.out.println(newPath);
		newfile.mkdir();
		//获取指定文件或文件夹在工程中真实路径，getRequest()这个方法是返回一个HttpServletRequest，封装这个方法为了处理编码问题

		FileOutputStream fosVideo = FileUtils.openOutputStream(new File(newPath+"\\" +videoName));//打开FileOutStrean流
		IOUtils.copy(videoname.getInputStream(),fosVideo);//将MultipartFile file转成二进制流并输入到FileOutStrean		
		fosVideo.close();//
		FileOutputStream fosPic = FileUtils.openOutputStream(new File(newPath+"\\" +picName));//打开FileOutStrean流
		IOUtils.copy(picname.getInputStream(),fosPic);//将MultipartFile file转成二进制流并输入到FileOutStrean		
		fosPic.close();//
		Video newVideo = new Video();
		newVideo.setPicpath("E:/file"+"/"+time+"/" +picName);
		newVideo.setVideopath("E:/file"+"/"+time+"/" +videoName);
		newVideo.setVideoname(videotitle);
		this.videoService.save(newVideo);
		return "video/video_add_success.jsp";

	}

xiaoshuo566

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用XMLHTTPRequest实现上传文件进度条

前台：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt; &lt;title&gt;XMLHttpRequest上传文件进度实现&lt;/title&gt; &lt;script type="text/javascript"&gt;
复制链接

扫一扫