天天看點

java圖檔上傳并預覽,前台用jQuery插件AjaxFileUpload,背景用FileUtils.copyFile.

個人筆記,以備後用.

表體代碼:

<td colspan="3">
	<s:file label="上傳" name="uploadFile" id="uploadNumFile" οnchange="fileUpload('uploadNumFile','goodsRecordDtl_goodsPicture','goodsPicture_img')" />
	<a href="#" target="_blank" rel="external nofollow"  title="檢視" οnclick="viewPic('viewPicture1','goodsPicture','goodsRecordDtl_goodsPicture');">檢視圖檔</a>
	<div id="viewPicture1" title="圖檔預覽" style="display: none;" align="center">
		<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 uploadFile() {
        try {
            String UPLOAD_PATH= ServletActionContext.getServletContext().getRealPath("/upload/");
            String randomName= UUID.randomUUID().toString()+ ".jpg";
            if(uploadFile!=null){
                File storageFile = new File(UPLOAD_PATH +"/"+randomName);
                FileUtils.copyFile(uploadFile, storageFile);
            }
            dataMap.put("msg", 1);
            dataMap.put("path", randomName);//檔案id号
        } catch (Exception e) {
            logger.error("", e);
            dataMap.put("msg", 0);
        }
        
        return SUCCESS;
    }
           

以上代碼可能有些不全,但是大體思路就是這樣,僅僅隻是為了以後用的時候友善檢視。