上传文件的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。在使用前需要配置一下数据库
控件源码下载：
asp.net源码下载，jsp-springboot源码下载，jsp-eclipse源码下载，jsp-myeclipse源码下载，php源码下载，csharp-winform源码下载，vue-cli源码下载，c++源码下载
欢迎入群一起讨论“374992201”
标签：文件,form,实例,控件,上传,详解,data,源码 From： https://www.cnblogs.com/zyzzz/p/17001020.html