jquery.fileupload使用例子java
1、需要的css样式和js文件
2、jsp页面信息如下，整个页面信息
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8" import="java.io.*"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta
content="initial-scale=1.0,user-scalable=no, minimum-scale=1,maximum-scale=1,width=device-width"
name="viewport">
<link rel="stylesheet" href="css/font-icons.css">
<link rel="stylesheet" href="css/global.css?t=10">
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/globe.js?t=10"></script>
<title>上传图片</title>
<link rel="stylesheet" href="css/order.css?t=1">
<link rel="stylesheet" href="css/list.css">
<script type="text/javascript" src="js/login.js"></script>
<link rel="stylesheet" href="uploadimg/css/bootstrap.min.css">
<link rel="stylesheet" href="uploadimg/css/jquery.fileupload.css">
</head>
<body>
<div id="wrapper5">
<div id="scroller">
<script type="text/javascript" src="js/header.js"></script>
<a name="top" id="top"></a>
<div>
</div>
</div>
</div>
<div id="uploadFileIOS">
<span class="btn btn-success fileinput-button"> <span>文件上传</span> <input
id="fileupload" type="file" name="file" multiple> </span>
<div style="height: 30px;"></div>
<div id="files"></div>
</div>
<script src="js/jquery-1.10.1.min.js">
</script>
<script src="uploadimg/js/jquery.ui.widget.js">
</script>
<script src="uploadimg/js/load-image.all.min.js">
</script>
<script src="uploadimg/js/bootstrap.min.js">
</script>
<script src="uploadimg/js/jquery.iframe-transport.js">
</script>
<script src="uploadimg/js/jquery.fileupload.js">
</script>
<script src="uploadimg/js/jquery.fileupload-process.js">
</script>
<script src="uploadimg/js/jquery.fileupload-image.js">
</script>
<script src="uploadimg/js/jquery.fileupload-audio.js">
</script>
<script src="uploadimg/js/jquery.fileupload-video.js">
</script>
<script src="uploadimg/js/jquery.fileupload-validate.js">
</script>
<script>
/*global window, $ */
$(function() {
'use strict';
var url = window.location.hostname == 'blueimp.github.io' ? '//jquery-file-upload.appspot.com/'
: 'user.action?methods=editimg', uploadButton = $('<button/>')
.addClass('btn btn-primary').prop('disabled', true).text(
'Processing...').on('click', function() {
var $this = $(this), data = $this.data();
$this.off('click').text('正在上传').on('click', function() {
$this.remove();
data.abort();
});
data.submit().always(function() {
$this.remove();
});
});
$('#fileupload').fileupload({
url : url,
dataType : 'json',
autoUpload : false,
acceptFileTypes : /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize : 5000000, // 5 MB
disableImageResize : /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent),
previewMaxWidth : 100,
previewMaxHeight : 100,
previewCrop : true
}).on(
'fileuploadadd',
function(e, data) {
data.context = $('<div/>').appendTo('#files');
$.each(data.files, function(index, file) {
var node = $('<p/>').append(
$('<span/>').text(file.name));
if (!index) {
node.append('<br>').append(
uploadButton.clone(true).data(data));
}
node.appendTo(data.context);
});
}).on('fileuploadprocessalways',function(e, data) {
var index = data.index, file = data.files[index], node = $(data.context.children()[index]);
if (file.preview) {
node.prepend('<br>').prepend(file.preview);
}
if (file.error) {
node.append('<br>').append(
$('<span/>').text(
file.error));
}
if (index + 1 === data.files.length) {
data.context.find('button').text('上传').prop(
'disabled', !!data.files.error);
}
}).on('fileuploadprogressall', function(e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css('width', progress + '%');
}).on('fileuploaddone',function(e, data) {
var result = data.result.code;
if(result=='1'){
globe.lvToast(false, "图像上传成功!", LT_LOADING_CLOSE);
setTimeout(function() {
//window.location.href = "index.action";
}, 2000);
}else{
globe.lvToast(false, data.msg, LT_LOADING_CLOSE);
}
}).on('fileuploadfail',
function(e, data) {
globe.lvToast(false, '头像上传失败', LT_LOADING_CLOSE);
}).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>
</body>
</html>
3、这里特别注意文件名称，容易出错的地方
4、后台处理上传图片的方法，使用的是struts2处理
5、对应前端的文件名name="file"
6、struts2已经处理了请求，我们之间用就可以了
public String saveattach() {
try {
BufferedImage bi = ImageIO.read(file);
if (bi == null) {
return "0";
}
} catch (IOException e) {
return "0";
}
String realpath = ServletActionContext.getServletContext().getRealPath("/images/");
if (!new File(realpath).exists()) {
new File(realpath).mkdir();
}
String[] typechoose = fileFileName.split("\\.");
int ichoose = typechoose.length;
String type = ichoose > 1 ? typechoose[ichoose - 1] : "";
if (type.toLowerCase().equals("jpg")
|| type.toLowerCase().equals("gif")
|| type.toLowerCase().equals("jpeg")
|| type.toLowerCase().equals("png")) {
SimpleDateFormat smat = new SimpleDateFormat("yyyyMMddHHmmss");
String newfilname = smat.format(new Date()) + "." + type;
String path = realpath + "/" + newfilname;
FileUtil.saveFile(path, file);
return "/images/touxiang/"+newfilname;
} else {
return "0";
}
}
7、其中saveFile方法代码如下
public static void saveFile(String savePath, File upload) {
try {
InputStream in = null;
OutputStream out = null;
in = new FileInputStream(upload);
out = new FileOutputStream(savePath);
int readed = 0;
byte[] buffer = new byte[1024];
while ((readed = in.read(buffer, 0, 1024)) != -1) {
out.write(buffer, 0, readed);
}
out.flush();
out.close();
in.close();
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
8、实现效果如下
