上传视频加进度条代码

上传视频加进度条代码
javaweb上传⽂件
上传⽂件的jsp中的部分
上传⽂件同样可以使⽤form表单向后端发请求，也可以使⽤ ajax向后端发请求
1. 通过form表单向后端发送请求
<form id="postForm" action="${pageContext.request.contextPath}/UploadServlet" method="post" enctype="multipart/form-data"> <div class="bbxx wrap">
<input type="text" id="side-profile-name" name="username" class="form-control">
<input type="file" id="example-file-input" name="avatar">
<button type="submit" class="btn btn-effect-ripple btn-primary">Save</button>
</div>
</form>
改进后的代码不需要form标签，直接由控件来实现。

开发⼈员只需要关注业务逻辑即可。

JS中已经帮我们封闭好了
通过监控⼯具可以看到控件提交的数据，⾮常的清晰，调试也⾮常的简单。

2. 通过ajax向后端发送请求
1.
$.ajax({
url : "${pageContext.request.contextPath}/UploadServlet",
type : "POST",
data : $( '#postForm').serialize(),
success : function(data) {
$( '#serverResponse').html(data);
},
error : function(data) {
$( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText);
}
});
ajax分为两部分，⼀部分是初始化，⽂件在上传前通过AJAX请求通知服务端进⾏初始化操作
在⽂件上传完后向服务器发送通知
这⾥需要处理⼀个MD5秒传的逻辑，当服务器存在相同⽂件时，不需要⽤户再上传，⽽是直接通知⽤户秒传
这⾥可以看到秒传的逻辑是⾮常简单的，并不是特别的复杂。

var form = new FormData();
form.append("username","zxj");
form.append("avatar",file);
//var form = new FormData($("#postForm")[0]);
$.ajax({
url:"${pageContext.request.contextPath}/UploadServlet", type:"post",
data:form,
processData:false,
contentType:false,
success:function(data){
console.log(data);
}
});
java部分
⽂件初始化的逻辑
接收⽂件块数据，在这个逻辑中我们接收⽂件块数据。

控件对数据进⾏了优化，可以⽅便调试。

如果⽤监控⼯具可以看到控件提交的数据。

注：
1. 上⾯的java部分的代码可以直接使⽤，只需要将上传的图⽚路径及收集数据并将数据写⼊到数据库即可
2. 上⾯上传⽂件使⽤到了字节流，其实还可以使⽤别的流，这个需要读者⾃⼰在下⾯完善测试
3. BeanUtils是⼀个⼯具便于将实体对应的属性赋给实体
4. 上传⽂件不能使⽤ request.getParameter("")获取参数了，⽽是直接将request解析，通过判断每⼀项是⽂件还是⾮⽂件，然后进⾏相应的操作（⽂件的话就是⽤流来读取，⾮⽂件的话，暂时保存到⼀个map中。

）
后端代码逻辑⼤部分是相同的，⽬前能够⽀持MySQL,Oracle,SQL。

在使⽤前需要配置⼀下数据库，可以参考我写的这篇⽂章：
欢迎⼊群⼀起讨论：374992201。