官方网站:http://www.ncmem.com/index.aspx

产品首页:http://www.ncmem.com/webapp/up6/index.aspx

开发文档:http://www.ncmem.com/doc/view.aspx?id=653253c5b16243f4835469e82c2c1146

控件下载:http://www.ncmem.com/webapp/up6/pack.aspx

示例下载:http://www.ncmem.com/webapp/up6/versions.aspx

联系信箱:1085617561@qq.com

联系QQ:1085617561
产品交流群:泽优Web大文件上传控件

扫码加群:
image

  asp.net:https://gitee.com/xproer/asp-net/tree/6.5.38/

 jsp-eclipse:https://gitee.com/xproer/jsp-eclipse/tree/6.5.38/

 jsp-myeclipse:https://gitee.com/xproer/jsp-myeclipse/tree/6.5.38/

 jsp-springboot:https://gitee.com/xproer/jsp-springboot/tree/6.5.38/

 php:https://gitee.com/xproer/php/tree/6.5.38/

 vue-cli:https://gitee.com/xproer/vue-cli

up6全面支持国产化平台,100G大文件,文件夹上传续传,支持windows,macOS,Linux下的所有主流浏览器,支持多种数据库,所有Web服务器,为企业提供数据安全传输,安全存储,分布式存储等核心功能。

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。在使用前需要配置一下数据库

示例下载地址:

jsp-eclipse:https://gitee.com/xproer/jsp-eclipse/tree/6.5.38/

jsp-myeclipse:https://gitee.com/xproer/jsp-myeclipse/tree/6.5.38/

jsp-springboot:https://gitee.com/xproer/jsp-springboot/tree/6.5.38/

详细配置信息及思路

欢迎入群一起讨论:374992201