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

个人笔记,以备后用.

表体代码:

<td colspan="3">
	<s:file label="上传" name="uploadFile" id="uploadNumFile" onchange="fileUpload('uploadNumFile','goodsRecordDtl_goodsPicture','goodsPicture_img')" />
	<a href="#" title="查看" onclick="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;
    }

以上代码可能有些不全,但是大体思路就是这样,仅仅只是为了以后用的时候方便查看。

时间: 2024-09-30 19:23:23

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

html之file标签 --- 图片上传前预览 -- FileReader

记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了其他方式来实现了这个功能. 今天无意发现了一个知识点,用html的file标签就能实现图片上传前预览,感觉很棒,记录一下!就是通过file标签和js的FileReader接口,把选择的图片文件调用readAsDataURL方法,把图片数据转成base64字符串形式显示在页面上. 1.闲话少说,测试一下,图片上

[转]html之file标签 --- 图片上传前预览 -- FileReader

记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了其他方式来实现了这个功能. 今天无意发现了一个知识点,用html的file标签就能实现图片上传前预览,感觉很棒,记录一下!就是通过file标签和js的FileReader接口,把选择的图片文件调用readAsDataURL方法,把图片数据转成base64字符串形式显示在页面上. 1.闲话少说,测试一下,图片上

图片上传时预览插件

html代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="uploadView.js" type="text/javascript"></script> <script> window.

js实现图片上传及预览----------------------&gt;&gt;兼容ie6-8 火狐以及谷歌

<head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> <script src="../Scripts/jquery-1.4.2.min.js" type="text/javascript"></script> </head> <body> <form id="f

js实现图片上传本地预览

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content

JQuery插件:图片上传本地预览插件,改进案例一则。

/* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插件网站:http://keleyi.com/keleyi/phtml/image/16.htm *参数说明: Img:图片ID;Width:预览宽度;Height:预览高度;ImgType:支持文件类型;Callback:选择文件显示图片后回调方法; *使用方法: <div> <img id

js 图片上传本地预览

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片上传本地预览</title> <style type="text/css"> #preview{width:260px;height:190px;border:1px solid #000;overflow:hidden;

jQuery:[1]实现图片上传并预览

jQuery:[1]实现图片上传并预览 原理 预览思路 1.当上传对象的input被触发并选择本地图片之后获取要上传的图片对象的URL: 2.把对象URL赋值给实现写好的img标签的src属性 File对象 File对象可以用来获取文件的信息,还可以用来读取这个文件的内容,通常情况下,File对象是来自用户在一个input元素上选择文件后返回的FileList对象,也可以是来自由拖放操作生成的DataTransfer对象. Blob对象 Blob对象是一个包含由只读原始数据的类文件对象,Blob

input file实现多选,限制文件上传类型,图片上传前预览功能

限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② multiple 属性规定输入字段可选择多个值. 示例: <!-- image/* 所有图片 image/png png图片 image/jpg jpg图片 image/gif gir动图 application/msword Word文档(.doc) application/vnd.openxmlform