Java(Groovy)照片上传,支持页面立即浏览

最新推荐文章于 2024-06-03 23:10:45 发布

淡茶

最新推荐文章于 2024-06-03 23:10:45 发布

阅读量1.7k

点赞数

分类专栏： java 文章标签： java grails 图片

本文链接：https://blog.csdn.net/yss19900512/article/details/45503645

版权

java 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

页面:

<div id="show" class="fieldcontain ${hasErrors(bean: topicInstance, field: 'thumbnailImageId', 'error')} ">

   <label for="thumbnailImageId">
       <g:message code="answer.thumbnailImageId.label" default="缩略图浏览" />

   </label>
   <g:if test="${ topicParams?.thumbnailImageId }">
   <img src="${ topicParams.thumbnailImageId }" id="img0" />
   </g:if>
   <g:else>
   <img src="" id="img0" style="display:none">
   </g:else>
</div>
<div class="fieldcontain ${hasErrors(bean: topicInstance, field: 'thumbnailImageId', 'error')} ">
   <label for="thumbnailImageId">
       <g:if test="${ topicParams?.thumbnailImageId }">
           <g:message code="topic.thumbnailImageId.label" default="缩略图修改" />
       </g:if>
       <g:else>
           <g:message code="topic.thumbnailImageId.label" default="缩略图上传" />
       </g:else>
   </label>

   <g:textField name="ImageName" size="40px" value="${topicParams?.ImageName}"/>(PNG/JPEG)
   <input id="myImage" name ="myImage" type="file" multiple="multiple" style="display:none;" οnchange="ImageName.value=this.value"/>
    <input type="button" class="btn btn-info" value="请选择" οnclick="myImage.click()">
</div>
<script>
$("#myImage").change(function(){
   document.getElementById("img0").style.display="";
   var objUrl = getObjectURL(this.files[0]) ;
   console.log("objUrl = "+objUrl) ;
   if (objUrl) {
       $("#img0").attr("src", objUrl) ;
   }
}) ;

//建立一個可存取到該file的url
function getObjectURL(file) {
   var url = null ;
   if (window.createObjectURL!=undefined) { // basic
       url = window.createObjectURL(file) ;
   } else if (window.URL!=undefined) { // mozilla(firefox)
       url = window.URL.createObjectURL(file) ;
   } else if (window.webkitURL!=undefined) { // webkit or chrome
       url = window.webkitURL.createObjectURL(file) ;
   }
   return url ;
}

</script>

controller:

//start 上传图片至EFile表
       Setting set = Setting.get(1)
       def f = request.getFile('myImage')
       if(!f.empty){
           file = new EFile()
           switch(f.contentType){
               case "image/jpeg":
                   file.name=futil.getFormatFileName(FileType.JPG.value);
                   f.transferTo(new File(set.fileLocalPath+File.separator + "Files" + File.separator + "Image" + File.separator + file.name));
                   file.type=FileType.JPG.toString()
                   break;
               case "image/png":
                   file.name=futil.getFormatFileName(FileType.PNG.value);
                   f.transferTo(new File(set.fileLocalPath+File.separator + "Files" + File.separator + "Image" + File.separator + file.name));
                   file.type=FileType.PNG.toString()
                   break;
               default :
                   flash.message = "上传失败,文件类型错误"
           }

           file.smallName = futil.getSFileName()
           futil.decoderBase64File(futil.encodeBase64File(set.fileLocalPath +File.separator + "Files" + File.separator + "Image" + File.separator + file.name),set.fileLocalPath,file.name)
           file.localPath = File.separator + "Files" + File.separator + "Image";
           ImageUtil.transform(set.fileLocalPath+file.localPath+File.separator+file.name,
               set.fileLocalPath+file.localPath+File.separator+file.smallName,200,140)
           file.size = f.size
           file.serverPath = "/" + "Files" + "/" + "Image";

           if(!file.save(flush:true)){flash.message ="上传失败"}
           else{
               topicInstance.thumbnailImageId = file.id
           }
       }
       //end