java图片上传并预览,前台用jQuery插件AjaxFileUpload,后台用FileUtils.copyFile.
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
本文由我司收集整编,推荐下载,如有疑问,请与我司联系java 图片上传并预览,前台用jQuery 插件AjaxFileUpload,后台用
FileUtils.copyFile.
2015/01/05 0 个人笔记,以备后用.
表体代码:
td colspan= 3 s:file label= 上传name= uploadFile id= uploadNumFile onchange= fileUpload( uploadNumFile , goodsRecordDtl_goodsPicture , goodsPicture_img ) / a href= # title= 查看quot;viewPic( viewPicture1 , goodsPicture , goodsRecordDtl_goodsPicture 查看图片/a div id= viewPicture1 title= 图片预览> img id= goodsPicture src= /div /td
js 代码(记得要引入jquery 库和ajaxfileupload 库):
//上传文件id 号function fileUpload(uploadFileId,filePathId,imgId){ var imp= document.getElementById(uploadFileId); if(imp==null ||imp== ||imp== undefined){ alert( 请选择文件return; } $.ajaxFileUpload({ url:ct + uploadFile.do , secureuri:false, fileElementId:uploadFileId, dataType: multipart/form-data , success: function (data, status){ var json = eval( ( + data + ) if(json.msg== 1 ){ alert( 上传成功$( # +filePathId).val(json.path); $( # +imgId).attr( src ,eTrade.ctx+ /upload/ +json.path); }else{ alert( 文件上传失败} }, error: function (data, status, e){ alert(e); } }); } function viewPic(dialogId,imgId,fileId){ $( # +dialogId).dialog({ height: 350, width: 600, buttons: { 取消: function() { $( # +imgId).attr( src , $(this).dialog( close } }, close:function(){ $( # +imgId).attr( src , } }); if($( # +fileId).val()== ){ return; } $( # +imgId).attr(
src ,ct+ /toView.do?attachment= +$( # +fileId).val()); }
后台代码(uploadFile 命名必须与前台name= uploadFile 一致):
private File uploadFile; public File getUploadFile() { return uploadFile; } public void setUploadFile(File uploadFile) { this.uploadFile = uploadFile; } @Action(value = uploadFile , results = { @Result(name = success , type = json , params = { ignoreHierarchy , false , contentType , text/html , root , dataMap }) }) public String。