您的位置：首页 > 编程语言 > Java开发

ajaxfileupload.js、struts2、ajax、json异步上传图片

2015-10-27 12:21 821 查看

注意：记得导入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、测试，必须成功！！！！！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航