最近需要做个图片上传的问题,先开始想用一些上传控件来做,但在参考相关资料后,觉得控件大部分都是采用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 版本换成了最新的。 (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|