前台:
1. 引入ajaxFileUpload.js文件
2. 前台通过input type=file文件的onchange方法去调用上传js代码
<input id="logoPicUrl" name="logoPicUrl" οnchange="uploadFile(this);" type="file">
如果想在执行ajax代码以后控制文件显示的信息,就需要做隐藏的type=file控件,因为不同浏览器对这个控件支持不一样,显示的信息也不同,我的做法如下:
<input id="logoPicUrl" name="logoPicUrl" οnchange="uploadFile(this);" type="file" >
<div >
<a href="javascript:void(0)" οnclick='document.getElementById("logoPicUrl").click();'>
<input id="logoFile" name="model.logoPicUrl" readonly="true" placeholder="点击选择上传的Logo"/>
</a>
</div>
3. js代码
这里面是用document去获取的控件里面的文件,jQuery有时会获取不到,原因不太清楚,如果想改用jQuery请注意一下这个问题。
uploadFile = function(x){
var logofile = document.getElementById("logoPicUrl").files[0];
if( logofile instanceof Object) {
if(x.name=="logoPicUrl"){
//判断上传文件的类型
var fileName=logofile.name;
var fileType=fileName.substring(fileName.lastIndexOf("."),fileName.length);
if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(fileType)){
layer.alert("只能上传图片类型");
$("#logoPicUrl").val("");
return;
}
var requestURL="${contextPath}/groupAction!uploadFile.${actionExtension}";
$.ajaxFileUpload({
url: requestURL,
secureuri: false, //一般设置为false
type:'post',
fileElementId: 'logoPicUrl', // 上传文件的id、name属性名
dataType:'text',
cache:false,
success: function(data, status){$("#logoFile").val(data);},
error: function(data, status, e){ }
});
}
}
}
在ajaxFileUpload方法里面,如果要返回数据,要把dataType设置为'text',否则获取的会是DOM或者其他的东西。有时浏览器会有严重的缓存现象,例如你第一次上传了一个图片,第二次重新上传一张,但后台获取的还是第一次上传的文件,这时要把cache设置成false。
后台:使用commons-io包和commons-fileupload包
1.之前查到很多资料说后台想获取要上传的文件,只需要在后台定义一个File类型的文件,名字与前台ajaxFileUpload中指定的fileElementId的type=file控件的name相同(如定义File logoPicUrl),以及两个String类型的用于存储文件名称和类型的字段(String logoPicUrlFileName,logoPicUrlContentType),struts2框架会将文件信息set到这些属性里,也可以直接从request里面取的(注意:从request中取可能会出现中文参数乱码现象,解决办法就是在前台将参数使用js的encodeURI做两次编码,后台用jdk的URLDecoder做一次解码即可解决乱码问题,这是因为struts2本身会做一次解码)。
2.MultiPartRequestWrapper req=(MultiPartRequestWrapper) getRequest();
logoPicUrl = req.getFiles("logoPicUrl")[0];
3.如果是SpringMVC框架直接定义一个MultipartFile 的实例就可以接收到
4.如果想往前台传数据,可以使用writeResponse("想要传送的数据");
public void upload(){
JSONObject jsonObject = new JSONObject();
MultiPartRequestWrapper req=(MultiPartRequestWrapper) getRequest();
File userFile = req.getFiles("logoPicUrl")[0];
String path = ServletActionContext.getServletContext().getRealPath("/temp");
FileInputStream fis;
FileOutputStream fos;
String savefileName = logoPicUrlFileName;//这个变量由struts2赋值,声明后要写get set
// 得到文件保存的位置(根据root来得到文件保存的路径在tomcat下的该工程里)
File destFile = new File(path, savefileName);
// is中保存了文件的内容
try {
fis = new FileInputStream(userFile);
fos = new FileOutputStream(destFile);
// 把文件写入到上面设置的路径里
byte[] buffer = new byte[512];
int length = 0;
while ((length = fis.read(buffer)) != -1) {
fos.write(buffer, 0, length);
}
fis.close();
fos.close();
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}