java图片上传并预览,前台用jQuery插件AjaxFileUpload,后台用FileUtils.copyFile.

本文由我司收集整编，推荐下载，如有疑问，请与我司联系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