jquery.fileupload使用例子java
的有关信息介绍如下:
开发的时候需要使用jquery.fileupload插件,那么如何在struts中使用呢
需要的css样式和js文件
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 + "/";
%>
content="initial-scale=1.0,user-scalable=no, minimum-scale=1,maximum-scale=1,width=device-width"
name="viewport">
/*global window, $ */
$(function() {
'use strict';
var url = window.location.hostname == 'blueimp.github.io' ? '//jquery-file-upload.appspot.com/'
: 'user.action?methods=editimg', uploadButton = $('')
.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 = $('
').appendTo('#files');$.each(data.files, function(index, file) {
var node = $('
').append($('').text(file.name));
if (!index) {
node.append('
').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('
').prepend(file.preview);
}
if (file.error) {
node.append('
').append(
$('').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');
});
这里特别注意文件名称,容易出错的地方
后台处理上传图片的方法,使用的是struts2处理
对应前端的文件名name="file"
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";
}
}
其中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;
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();
}
}
实现效果如下



