注意:记得导入struts的jar包、json使用的jar包
1、网上下载ajaxfileupload.js,如果使用json,记得修改
将【eval( “data = ” + data );】
修改为:【data = jQuery.parseJSON(jQuery(data).text());】
2、jsp页面
引入js文件:
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
//自己建的
<script type="text/javascript" src="js/ajax_upload.js"></script>
内容:
<body>
<!--为了jquery获得basePath的值,必须写(如果没有更好的办法) -->
<input type="hidden" value = "<%=basePath%>" id = "basePath"/>
<!--id是给jquery使用的,name是给后台action使用的,必须和后台的名字相同!! -->
<input type="file" id="file1" name="upload"/><br/>
<!--上传成功后图片显示的位置 -->
<img id="img1" alt="上传成功" src="" />
<hr/>
<!--上传前在这个输入框中写入值,可以判断是否是异步上传 -->
<input type="text"/>
</body>
3、ajax_upload.js
$(document).ready(function(){
//解决file的change事件只能执行一次的问题
$(document).on('change','#file1',function(){
ajaxFileUpload();
});
});
//上传图片的方法,
function ajaxFileUpload(){
//获得basePath
basePath=$('#basePath').attr("value");
//调用ajaxfileupload.js中的方法
$.ajaxFileUpload({
url:'file_fileUpload.do',//上传图片要提交到的action
secureuri:false,//是否用安全提交,默认为false
fileElementId:'file1',//file选择文件的框的id
dataType:'json',//数据返回格式,如果用json,需要修改ajaxfileupload.js中的内容
success: function (data){
//获得json格式数据的值,并转换显示图片在页面上
$("#img1").attr("src",basePath+data.IDPicPath);
}
});
}
4、action
public class Ajax_FileUploadAction {
//1、使用common.io上传图片,下面的三个属性必须写
//2、并且upload这个名字必须和页面file中的name相同
//3、后两个属性名字不要改变
//4、使用struts,记得写get、set方法
private File upload;
private String uploadContentType;
private String uploadFileName;//上传图片的名字
public void fileUpload() throws IOException{
System.out.println("开始上传图片");
//设置上传的路径
String IDPicFile = ServletActionContext.getServletContext().getRealPath("/IDPicFile");
File targetFile=new File(IDPicFile);
//System.out.println("这是上传图片的路径:"+targetFile.getPath());
if(!targetFile.mkdirs()){
targetFile.mkdirs();
}
targetFile=new File(targetFile,getUploadFileName());
//将图片文件写入,必须有
FileUtils.copyFile(upload, targetFile);
String IDPicPath="IDPicFile/"+uploadFileName;
System.out.println(IDPicPath);//输出传入页面的值
//将,要传入页面的数据变成json格式
JSONObject jsonObject=new JSONObject();
jsonObject.put("IDPicPath", IDPicPath);
//控制台输出格式化的json数据
System.out.println(jsonObject);
ServletActionContext.getResponse().getWriter().print(jsonObject);
}
public File getUpload() {
return upload;
}
public void setUpload(File upload) {
this.upload = upload;
}
public String getUploadContentType() {
return uploadContentType;
}
public void setUploadContentType(String uploadContentType) {
this.uploadContentType = uploadContentType;
}
public String getUploadFileName() {
return uploadFileName;
}
public void setUploadFileName(String uploadFileName) {
this.uploadFileName = uploadFileName;
}
}
4、struts.xml配置
<struts>
<!-- 开发模式 -->
<constant name="struts.devMode" value="false" />
<!-- Action访问方式 -->
<constant name="struts.action.extension" value="do,phtml,action"></constant>
<package name="xdd" namespace="/" extends="struts-default">
<action name="file_*" class="action.Ajax_FileUploadAction" method="{1}">
</action>
</package>
</struts>
5、测试,必须成功!!!!!