对于异步上传图片的感悟
2014-07-31 13:02
253 查看
<span style="font-size:18px;">1.头像异步上传:本质是把upload的值传给后台。 (1)新增模块: <label class="required" for="upload">图片:</label> <input type="file" name="<span style="color:#ff0000;">upload</span>" id="upload" style="width: 120px;"/> <span style="color:#33cc00;">//与id无关</span> <input type="hidden" name="imgpath" id="imgpath" value=""/> <span style="color:#33cc00;">//存放img的值</span> <img src="<%=request.getContextPath()%>/administrator/image/img/nopicture.jpg" id="showimg" width="60px" height="50px"/> <span style="color:#33cc00;"> //显示图片</span> --------------------------------------------------------------------------------------------------------- $("#addKtype input[type='file']").live('change',function(){ $.ajaxFileUpload( { url:currentPath+"/knowledge/ajaxFileUpload.action", secureuri:false, fileElementId:'<span style="color:#ff0000;">upload</span>', dataType: 'json', success: function (data, status) { $("#imgpath").val(data); $("#showimg").attr("src",currentPath+"/upload_imgs/knowledge/"+data); }, error: function (data, status, e) { alert(e); } }); }); (2)修改模块: <label class="required" for="upload">图片:</label><br/> <input type="file" id="upload1" class="full" value="" name="<span style="color:#ff0000;">upload</span>" style="width: 45%;"/> <input type="hidden" name="imgpath" id="imgpath1" value=""/> <input type="hidden" name="oldimg" id="oldimg" value=""/> <img alt="" width="120px;" height="60px;" src="" id="img1"> ——————————————————————————————————————————————————————————————— $("#modKtype input[type='file']").live('change',function(){ var options2 = { url : currentPath+"/knowledge/ajaxFileUpload",<span style="color:#33cc00;">//跳转到相应的Action //form中已有upload的值</span> type : "POST",//提交方式 dataType : "json",//数据类型 success : function(msg) {//调用Action后返回过来的数据 if(msg!="fail"){ $("#floatBox #modKtype #imgpath1").val(msg); $("#floatBox #modKtype #img1").attr("src",currentPath+"/upload_imgs/knowledge/"+msg); }else{ alert("图片上传失败"); } } }; $("#floatBox #modKtype").ajaxSubmit(options2);//绑定页面中form表单的id }); (3)后台: @Action("ajaxFileUpload") public String ajaxFileUpload() throws Exception{ if(upload!=null){ //图片上传 //基于myFile创建一个文件输入流 InputStream is = new FileInputStream(upload); // 设置上传文件目录 String uploadPath = ServletActionContext.getServletContext() .getRealPath("/upload_imgs/knowledge"); String fileType = uploadFileName.substring(uploadFileName.lastIndexOf(".")+1,uploadFileName.length()); String newFileName = "knowledge"+StringUtil.getCurrentDateAndTime()+"."+fileType; // 设置目标文件 File toFile = new File(uploadPath, newFileName); // 创建一个输出流 OutputStream os = new FileOutputStream(toFile); //设置缓存 byte[] buffer = new byte[1024]; int length = 0; //读取myFile文件输出到toFile文件中 while ((length = is.read(buffer)) > 0) { os.write(buffer, 0, length); } //关闭输入流 is.close(); //关闭输出流 os.close(); this.result = newFileName; }else{ this.result = "fail"; } return "json"; } (4)删除图片: String uploadPath = ServletActionContext.getServletContext().getRealPath("/upload_imgs/knowledge"); if(!oldimg.equals(imgpath)){ FileUtil.delFile(new StringBuffer().append(uploadPath).append("/").append(oldimg).toString()); }</span>
相关文章推荐
- [原]Jquery插件之多图片异步上传
- iframe批量异步上传图片
- 利用uploadify实现图片上传(重命名、图片异步显示)
- springMVC + ajaxfileupload异步上传图片预览,裁剪并保存图片
- 关于异步上传图片以及上传完成后显示缩略图的问题
- ASP.NET MVC异步上传图片和富文本编辑器的使用详解
- ASP.NET MVC异步上传图片和富文本编辑器的使用详解
- js 异步表单提交,图片上传,兼容异步模拟ajax技术
- Jquery插件之多图片异步上传
- 通过Struts2、Ajax异步上传图片
- jQuery实现异步上传图片(二)
- jquery 异步提交表单 上传图片小例子
- Jquery实现异步上传图片
- structs1.2 对于图片上传的处理
- 异步上传图片—struts2+jQuery
- Jquery实现异步上传图片
- struts2+jquery之form插件实现异步上传图片并显示
- 适用于各浏览器支持图片预览,无刷新异步上传js插件