javaWeb中使用ajax上传文件
javaWeb上传图片
上传文件所必要的两个jar包:commons-fileupload.jar、commons-io.jar。
jar包下载:github路径
核心代码:
String withPath = req.getServletContext().getRealPath("/");//获取网站的URI根路径(网站资源路径,存内容到这里可以通过浏览器访问)
String webPath = req.getContextPath();//获取网站的URL根路径(访问网站跟路径)
DiskFileItemFactory factory = new DiskFileItemFactory();
factory.setSizeThreshold(2048 * 500);
File file = new File(withPath + "\\temp");// 临时存储文件位置
String path = withPath + "\\upload";// 文件保存位置
factory.setRepository(file);
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setSizeMax(1024 * 1024);// 最大的文件文1M(1024KB)
List<FileItem> items = upload.parseRequest(req);
for (FileItem item : items) {
// 如果只上传一个文件那么可以不用循环
System.out.println("for---");
if (item.isFormField()) {
// 上传的不是文件域
jo.put("status", "error");
jo.put("msg", "上传图片失败");
System.out.println(
item.getFieldName() + ":" + item.getString());
}
else {
String fileName = item.getName();// 文件名(包括扩展名)
System.out.println("文件名为:" + fileName);
jo.put("status", "true");
InputStream in = item.getInputStream();
byte[] buffer = new byte[1024];
int len = 0;
String allFileName = path + "\\" + fileName;
OutputStream os = new FileOutputStream(allFileName);
while ((len = in.read(buffer)) != -1) {
os.write(buffer, 0, len);
}
os.close();
in.close();
jo.put("status", "true");
jo.put("msg", "上传图片成功");
jo.put("imgUrl", webPath + "/upload/" + fileName);
}
}
2.html
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>上传文件</title>
<script type="text/javascript" src="<%=path%>/static/lib/myUtils.js"></script>
<script type="text/javascript" src="<%=path%>/static/js/jquery-1.11.1.js"></script>
</head>
<body>
<input type="file"/>
<div class="msg"></div>
<script type="text/javascript">
$(document).ready(function(){
var img_formats = "jpeg,jpg,bmp,png,gif,ico,tiff,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw,wmf";
var file = $("input[type='file']");
file.change(function(){
var files=this.files;
var formData=new FormData();
formData.append('files',files[0]);
var img_format = myUtils.file_format(files[0].name);
console.log(files[0].name);
if(img_format.length > 0){
if(img_formats.indexOf(img_format) >= 0){
var img = myUtils.getFileUrl(files[0]);
$.ajax({
url: "<%=path%>/uploadServlet",
type: "POST",
data: formData,
dataType:"json",
/**
*必须false才会自动加上正确的Content-Type
*/
contentType: false,
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
processData: false,
success: function (data) {
console.log(data);
if (data.status == "true") {
alert(data.msg);
$(".msg").html("<img src='"+data.imgUrl+"'/>");
}
if (data.status == "error") {
alert(data.msg);
}
$("#imgWait").hide();
},
error: function () {
alert("上传失败!");
$("#imgWait").hide();
}
});
}else{
$(".msg").text("请上传图片文件");//不是图片文件
}
}else{
$(".msg").text("上传的不是一个有效的文件");//文件没有后缀名
}
});
});
</script>
</body>
</html>
注意:上传图片的位置要放在->网站资源路径;而不是本地的资源路径,否则上传之后无法在浏览器中预览图片切记!!!
本人小白,各位大神有好的建议多多提点,一起学习共同进步
javaWeb中使用ajax上传文件的更多相关文章
- JavaWeb项目中使用ajax上传文件
1.jsp $("#cxsc").click(function(){ var bankId = $("#bankId").val(); var formdata ...
- IE8/9 JQuery.Ajax 上传文件无效
IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...
- springMVC+jsp+ajax上传文件
工作中遇到的小问题,做个笔记 实现springMVC + jsp + ajax 上传文件 HTML <body> <form id="myform" method ...
- Ajax上传文件进度条显示
要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...
- 伪ajax上传文件
伪ajax上传文件 最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...
- flask jQuery ajax 上传文件
1.html 代码 <div> <form id="uploadForm" enctype="multipart/form-data" > ...
- ajax上传文件显示进度
下面要做一个ajax上传文件显示进度的操作,文末有演示地址 这里先上代码: 1.前端代码 upload.html <!DOCTYPE html> <html lang="e ...
- 闲话ajax,例ajax轮询,ajax上传文件[开发篇]
引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话.供不是特别了解的朋友参考参考! 本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放 ...
- models渲染字典&form表单上传文件&ajax上传文件
{# {% for u in teacher_d.keys %}#} {# {% for u in teacher_d.values %}#} {% for k,u in teacher_d.item ...
随机推荐
- 6.docker的私用镜像仓库registry
docker方式启动镜像仓库 / # cat /etc/docker/registry/config.yml version: 0.1 log: fields: service: registry s ...
- Opencv画图操作
1. 画矩形 MyRect rect;rect.left = 5;rect.top = 5;rect.right = 100;rect.bottom = 100;IplImage * pColorIm ...
- 离线安装Python包hickle,easydict
安装hickle source: https://github.com/telegraphic/hickle 1. cd to your downloaded hickle directory 2. ...
- MongoDB数据模型设计
MongoDB的数据模式是一种灵活模式,其集合并不限制文档结构.这种灵活性让对象和数据库文档之间的映射变得很容易,即使数据记录之间有很大的变化,每个文档也可以很好的映射到各条不同的记录.但在实际使用中 ...
- nginx压测工具--wrk
基本使用 命令行敲下wrk,可以看到使用帮助 Usage: wrk <options> <url> Options: -c, --connections <N> C ...
- BZOJ4356Ceoi2014 Wall——堆优化dijkstra+最短路树
题目描述 给出一个N*M的网格图,有一些方格里面存在城市,其中首都位于网格图的左上角.你可以沿着网络的边界走,要求你走的路线是一个环并且所有城市都要被你走出来的环圈起来,即想从方格图的外面走到任意一个 ...
- Codeforces1037G A Game on Strings 【SG函数】【区间DP】
题目分析: 一开始没想到SG函数,其它想到了就开始敲,后来发现不对才发现了需要SG函数. 把每个字母单独提出来,可以发现有用的区间只有两个字母之间的区间和一个位置到另一个字母的不跨越另一个相同字母的位 ...
- 实验九 在JSP中使用数据库
实验性质:验证性 实验学时: 1学时 实验地点: 一 .实验目的与要求 1. 掌握在JSP中使用数据库的方法. 2. 掌握JSP对数据库的基本操作:增.删.改.查. 二. 实验内容 1.JSP访问数据 ...
- POJ 2245 Addition Chains(算竞进阶习题)
迭代加深dfs 每次控制序列的长度,依次加深搜索 有几个剪枝: 优化搜索顺序,从大往下枚举i, j这样能够让序列中的数尽快逼近n 对于不同i,j和可能是相等的,在枚举的时候用过的数肯定不会再被填上所以 ...
- [ZJOI2007] 仓库建设
传送门:>HERE< 题意:有n个地点,每个地点有货物P[i]个,距离起点(地点0)的距离为x[i].在每个地点建立仓库需要费用c[i],现在需要在某些地点建设仓库,从而将货物转移到仓库里 ...