ajaxFileUpload是一个异步上传文件的jQuery插件。
语法:$.ajaxFileUpload({options})
options参数说明:
1、url 上传处理程序服务器地址
2、fileElementId 需要上传的文件域的ID,即<input type="file">的ID
3、secureuri 是否启用安全提交,默认为false
4、dataType 服务器返回的数据类型,可以为xml,script,json,html。如果不填写,jQuery会自动判断
5、success 提交成功后自动执行的处理函数,参数data就是服务器返回的数据
6、error 提交失败自动执行的处理函数
7、data 自定义参数,当有数据是与上传的图片相关的时候,这个东西就要用到了
8、type 当要提交自定义参数时,这个参数要设置成post
以下测试ajaxFileUpload图片上传示例:
一、准备工作:① jquery-1.9.1.min.js(这里测试用的是jquery1.9,也可用其它版本 )
② ajaxfileupload.js (可在百度搜索下载)
③ 引入第三方的一个jar包:commons-fileupload-1.2.2.jar
二、前台页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片上传</title>
<script language="javascript" src="js/jquery-1.9.1.min.js" ></script>
<script language="javascript" src="js/ajaxfileupload.js" > </script>
<script type="text/javascript">
$(document).ready(function(){
$('#btnUpload').click(function(){
if($('#fileUpload').val().length > 0) {
$.ajaxFileUpload({
url:'/fileupload/upload', //服务器端请求地址
fileElementId:'fileUpload', //需要上传的文件域的ID
secureuri: false, //是否启用安全提交,默认为false
dataType:'json', //服务器返回的数据类型
success:function(data,status){ //服务器成功响应处理函数
$('#fileShow').append(data.srcHtml);
$('#msg').html(data.msg);
//清空上传控件值
var obj = document.getElementById('fileUpload') ;
obj.outerHTML = obj.outerHTML;
},
error:function(data,status,e){ //服务器响应失败处理函数
alert(e);
}
})
}else{
alert('请选择图片');
}
})
$('#fileUpload').empty();
})
</script>
</head>
<body>
<div>
<input type="file" id="fileUpload" multiple name="fileUpload"/>
<input type="button" id="btnUpload" value="上传图片"/>
<span id="msg" style="color:red"></span>
</div><br>
<div id="fileShow"></div>
</body>
</html>
public class FileUploadServlet extends HttpServlet {
public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String filePath = ""; //服务器存放文件路径
String fileName = ""; //文件名
String msg = ""; //错误提示
//获取服务器路径
String basePath = request.getSession().getServletContext().getRealPath("/") + "/upload/";
//判断文件夹是否存在,不存在则创建
File file = new File(basePath);
if(!file.exists()){
file.mkdir();
}
//创建文件上传对象
ServletFileUpload fileUpload = new ServletFileUpload();
fileUpload.setHeaderEncoding("UTF-8");
//判断是否上传了文件
if (fileUpload.isMultipartContent(request)) {
try {
//获取文件上传列表
FileItemIterator fileItems = fileUpload.getItemIterator(request);
//迭代数据
while (fileItems.hasNext()) {
FileItemStream fis = fileItems.next();
//判断是否为表单字段
if (!fis.isFormField() && fis.getName().length() > 0) {
//获取文件名
fileName = fis.getName();
System.out.println("上传的文件名:" + fileName);
//定义上传文件类型
Pattern pat = Pattern.compile("[.]jpg|png|jpeg|gif$");
//判断是否符合定义的类型
Matcher matcher = pat.matcher(fileName);
if(!matcher.find()) {
msg = "请上传图片类型文件";
break;
}
//新文件名
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
String newFileName = sdf.format(new Date()) + UUID.randomUUID().toString().replace("-", "") +
fileName.substring(fileName.indexOf("."));
filePath = basePath + newFileName;
//获取文件输入流
BufferedInputStream bis = new BufferedInputStream(fis.openStream());
//获取文件输出流
BufferedOutputStream bos = new BufferedOutputStream(new FileOutputStream(filePath));
//设置每次读取的字节数
byte b[] = new byte[1024];
//读写文件
int len = 0;
while ((len = bis.read(b)) != -1) {
bos.write(b, 0, len);
}
bis.close();
bos.close();
}
}
} catch (Exception e) {
e.printStackTrace();
}
//返回页面数据
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
if (filePath != "") {
String srcHtml = "<img src='http://localhost:80/fileupload/" +
filePath.substring(filePath.indexOf("/")) +"'/>";
out.print("{srcHtml:'"+srcHtml+"'}");
}else {
out.print("{msg:'"+msg+"'}");
}
out.close();
}
}
}
<servlet>
<servlet-name>FileUploadServlet</servlet-name>
<servlet-class>utils.FileUploadServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>FileUploadServlet</servlet-name>
<url-pattern>/upload</url-pattern>
</servlet-mapping>