最近需要做个图片上传的问题，先开始想用一些上传控件来做，但在参考相关资料后，觉得控件大部分都是采用Flash方式实现，在结合自定义方式实现时有很多不便（对源码不熟，sorry）， 所以打算用开源的jquery ajaxsubmit插件来做。
先说说准备工作吧:jjquery-1.6.4.min.js这个当然是必须的，jquery.form.js 这个就是你Ajax提交表单需要的。先贴上代码：
其实代码很简单，配置东西也不多。
$("form").submit(function(){
$(this).ajaxSubmit({
type:'post',
dataType:'text',//返回数据类型
url:contextpath + '/catentry/picUpload.action',
success:function(data){ //上传回调函数 我刚开始用的jquery版本是1.4版 结果执行回调函数
window.returnValue = data;
window.close();
}
});
return false; //没设置这个 游览器会重新打开个窗口
});
下面看看后台action
/**
* 商品图片上传
*
*/
public String picUpload(){
try {
if(picFile != null){
InputStream isf = null;
String name = picFileFileName;
isf = new FileInputStream(picFile);
String ftpServers = getConfigValue("ftp.sever","config.properties");
// int ftpPort = Integer.parseInt(SupportGlobals.getProperty("ftp.port"));
// String ftpUser = SupportGlobals.getProperty("ftp.user");
// String ftpPassword = SupportGlobals.getProperty("ftp.password");
// String mode = SupportGlobals.getProperty("ftp.mode");
//ftp文件保存路径resource/emall/catentry + 月份
int month = Calendar.getInstance().get(Calendar.MONTH) + 1;
String monthStr = null;
if(month <10){
monthStr = "0" + String.valueOf(month);
}else{
monthStr = String.valueOf(month);
}
int year = Calendar.getInstance().get(Calendar.YEAR);
StringBuffer savePath = new StringBuffer("resource/emall/catentry/").append(year).append(monthStr).append("/");
//保存文件名 策略： 时间戳+8位随机数
Long i = System.currentTimeMillis();
Random random = new Random();
int j = random.nextInt(10000000);
String dot = name.substring(name.lastIndexOf(".")+1,name.length());
String fileName = String.valueOf(i) + String.valueOf(j) + "." + dot;
//保存ftp后获取ftp上面的路径
StringBuffer backPath = new StringBuffer("http://").append(ftpServers)
.append("/").append(savePath).append(fileName);
ftputil.ftpUploadFile(isf,savePath.toString(),null,fileName);
//this.writePlainText(true,backPath.toString());
response.setCharacterEncoding("UTF-8");
response.setContentType("text/plain");
response.getWriter().print(backPath.toString());
}
return NONE;
} catch (Exception e) {
logger.error(e.getMessage(),e);
return NONE;
}
}
这样就完成了一个图片Ajax上传功能。对于刚开始遇到的问题：suaccess不执行回调，个人觉得可能是jquery.form.js与jquery版本不一致导致。期间我也把jquery.form.js 版本换成了最新的。