实现:前端AngularJs+后端servelt
依赖包:commons-fileupload.x.x.jar commons-io-x.x.jar
下载: http://commons.apache.org/proper/commons-fileupload/
http://commons.apache.org/proper/commons-io/ 文件上传前端利用AngularJs封好的http发起异步请求传递二进制文件。
代码:
第一步:
<div class="row " ng-show="up_doc">
<div class="col-md-12 col-sm-12">
<div class="z_up_common">
<div class="z_up_common_inner">
<div class="z_up_image">
<input id="file"
onchange="angular.element(this).scope().file_up_onclick(this)"
type="file"> </input>
</div>
</div>
<p class="up-tips">从我的电脑选择要上传的文档:按住CTRL可以上传多份文档</p>
</div>
</div>
</div>
第二步:点击上传文档按钮确认选中文档开始上传
触发 file_up_onclick事件调用js方法
$scope.file_up_onclick=function(){
//1.获取文件对象
var _file=document.getElementById("file");
//2.实例化FormData对象
var $$fd=new FormData();
//3.添加文件对象到FormData中
$$fd.append("file",_file.files[0]);
//4.开始异步上传
$http({
method:'post',
data: $$fd,
url:'//servlet/FileCommand',
headers: {'Content-Type':undefined},
/*序列化 formdata object*/
transformRequest: angular.identity
}).success(function(data){
});
};
第四步:servelt接收二进制文件
public class FileCommand extends HttpServlet{
// 1.文件上传路径
private static final String UPLOAD_DIRECTORY = "D:/文件上传";
// 2.设置临时存储文件大小,当超过大小时,将先存储超出大小文件在临时目录
private static final int MEMORY_THRESHOLD = 1024 * 1024 * 30;
// 3.设置最大文件上传值
private static final int MAX_FILE_SIZE = 1024 * 1024 * 2000;
// 4.最大请求值
private static final int MAX_REQUEST_SIZE = 1024 * 1024 * 2048;
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
doPost(request, response);
}
/**
* @摘要 提供文件上传的方法
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
//1.设置字符编码为utf-8
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
// 2.检测是否为多媒体上传
if (!ServletFileUpload.isMultipartContent(request)) {
// 2.1如果不是则停止
PrintWriter writer = response.getWriter();
writer.println("Error: 表单必须包含 enctype=multipart/form-data");
writer.flush();
return ;
}
// 3.配置上传参数
DiskFileItemFactory factory = new DiskFileItemFactory();
//4. 设置内存临界值 - 超过后将产生临时文件并存储于临时目录中
factory.setSizeThreshold(MEMORY_THRESHOLD);
// 5.设置临时存储目录 java.io.tmpdir默认的临时文件路径为服务器的temp目录
factory.setRepository(new File(System.getProperty("java.io.tmpdir")));
ServletFileUpload upload = new ServletFileUpload(factory);
// 6.设置最大文件上传值
upload.setFileSizeMax(MAX_FILE_SIZE);
// 7.设置最大请求值 (包含文件和表单数据)
upload.setSizeMax(MAX_REQUEST_SIZE);
//8. 如果目录不存在则创建
File uploadDir = new File(UPLOAD_DIRECTORY);
if (!uploadDir.exists()) {
uploadDir.mkdir();
}
try {
// 10.解析请求的内容提取文件数据
List<FileItem> formItems = upload.parseRequest(request);
System.out.println("name="+request.getSession().getAttribute("name"));
// 10.1迭代表单数据
if (formItems != null && formItems.size() > 0) {
for (FileItem item : formItems) {
if (!item.isFormField()){
String nFileName = new File(item.getName()).getName();
String nPrefix=nFileName.substring(nFileName.lastIndexOf(".")+1);
nFileName=nFileName.substring(0,nFileName.lastIndexOf(".")) ;
item.write(new File(UPLOAD_DIRECTORY+"/"+nFileName));
item.delete();
PrintWriter nWriter=response.getWriter();
nWriter.print("{\"prefix\":\""+nPrefix+"\",\"filename\":\""+nFileName+"\",\"filesize\":\""+item.getSize()+"\"}");
}
}
}
} catch (Exception ex) {
PrintWriter writer=response.getWriter();
writer.print("error");
}
}
第五步:查看文件是否在指定目录即可
分享到:
相关推荐
java实现多文件异步上传
java文件异步上传
uploadify 文件异步上传 实现qq邮箱异步上传 0积分
AjaxFileUpload实现文件异步上传(功能实现代码).rar AjaxFileUpload实现文件异步上传, 文件域添加change事件,改变文件域时执行上传文件功能 $("#upload-excel-file").bind("change", function() { $....
SpringMvc+SWFUpload实现文件异步上传,前台用纯html后台返回json类型
Ajax+HTML+ASHX实现文件异步上传 参考使用,可直接复制使用
主要介绍了ajax实现文件异步上传并回显文件相关信息功能,结合实例形式分析了基于jQuery $.ajax方法的文件异步上传以及后台java程序对文件信息的读取与显示相关操作技巧,需要的朋友可以参考下
ajaxfileupload.js实现文件异步上传
iframe实现图片异步上传.dociframe实现图片异步上传.dociframe实现图片异步上传.dociframe实现图片异步上传.doc
实现页面无刷新文件上传,利用ajax技术实现
异步的文件上传是在现代的AJAX实现的Web应用里面经常要遇到,必须解决的问题。但是标准的AJAX类(XmlHttpRequest)无法实现传输 文件的功能。因此,这里讨论的内容就是如何在AJAX的技术的基础之上构建异步的文件上传...
多文件异步上传,前端后端、以及前端压缩都包含了,若有问题可私聊本人
jquery C# 异步上传 jquery C# 异步上传 jquery C# 异步上传
ajax 异步上传 需要的js文件 ajax 异步上传
后端:springbbot 前端:vue+elementUI+axios 前后端分离方式 分别尝试同步异步两种方法进行文件上传 1
网上有些这样的例子,但是下了几个都没有跑起来,哎,希望那些发文章的人要发就发全的,别发个半生不熟的。... 现在自己整理了一个Struts2+ExtJS2实现文异步文件上传,没法上传图片无法看到效果,直接上源码吧。
SpringMVC+Ajax异步文件上传+短视频背景+a标签绑定文件域
Visual Studio 实现TCp 异步通信,客户端和服务器端都为异步资源,实现文件的上传和下载
ajax异步上传文件实现,主要是使用h5的技术,大家可以试试看