使用ajax上传图片到服务器及回显

html界面
需要导入:<script src="/js/common/jquery-form.js" type="text/javascript"></script>

<div class="updateTouXiang">
				<form id="jvForm" action="o_save.shtml" method="post"
					enctype="multipart/form-data">
					<table>
						<tbody>
							<tr>
								<td width="20%"><span>用户头像:</span></td>
								<td width="80%"><img width="100" height="100" id="allUrl" />
									<!-- 在选择图片的时候添加事件,触发Ajax异步上传 --> <input name="pic" type="file"
									onchange="uploadPic()" /></td>
							</tr>
						</tbody>
					</table>
				</form>
			</div>
js代码
function uploadPic() {
		// 上传设置
		var options = {
				// 规定把请求发送到那个URL
				url: "/upload",
				// 请求方式
				type: "post",
				// 服务器响应的数据类型
				dataType: "json",
				// 请求成功时执行的回调函数
				success: function(data) {
					// 图片显示地址
					$("#allUrl").attr("src", data.url);
				}
		};
		
		$("#jvForm").ajaxSubmit(options);
	}

springboot接受代码

	Controller类
@RequestMapping("/upload")    
	public PicUploadResult uploadPics(MultipartFile pic,HttpServletRequest request){
		//PicUploadResult
		String path=request.getSession().getServletContext().getRealPath("/");
		System.out.println(path);
		//构造一个返回的空对象
		PicUploadResult result = new PicUploadResult();
		//判断后缀,获取原名称,1.jpg
		String oldFileName = pic.getOriginalFilename();
		//截取后缀
		String extFileName = oldFileName
				.substring(oldFileName.lastIndexOf("."));
		//正则判断合法性
		if(extFileName.matches(".^(jpg|png|gif)$")){
			result.setError(1);
			//return result;
		}
		try {
			//判断木马,BufferedImage判断是否有宽高
			BufferedImage bi = ImageIO.read
					(pic.getInputStream());
			//getHeight没有抛异常说明数据流中有宽高的属性,不是木马
			result.setHeight(bi.getHeight()+"");
			result.setWidth(bi.getWidth()+"");
			//以上内容为判断木马过程;
			//生成路径 images\2018\07\27
			String dir = "/images/"+new SimpleDateFormat("yyyy-MM-dd").
					format(new Date())+"/";
			//拼接磁盘路径,拼接url路径
			path=path+dir;
			System.err.println(path);
			String urlPath="http://localhost:8080"+dir;
			System.out.println("urlPath:"+urlPath);
			//			String urlPath = contexPath+dir;
			//创建磁盘目录,等待输出文件
			File _dir = new File(path);
			if(!_dir.exists()){
				_dir.mkdirs();//tomcat下的webapp/ROOT/images/***/
			}
			//计算文件重命名
			String fileName = System.currentTimeMillis()
					+""+RandomUtils.nextInt(100,999)+extFileName;
			System.out.println("验证:"+dir+fileName);
			System.out.println("url:"+urlPath+fileName);
			result.setUrl(urlPath+fileName);
			//写出磁盘
			pic.transferTo(new File(path+fileName));
			//error为0
			result.setError(0);
			// return urlPath+fileName;
			
			return result;
		} catch (Exception e) {
			e.printStackTrace();
			result.setError(1);
			return result;
		}
	}

工具类:
	public class PicUploadResult {
    private Integer error=0;		//图片上传错误不能抛出,抛出就无法进行jsp页面回调,所以设置这个标识,0表示无异常,1代表异常
    private String url;             //应该是浏览器能够解析的具体页面路径  相对路径http://image.jt/1212.jpg 
    								//本地路径:存放图片路径     D:\jt-upload\images\2017\06\03
    private String width;
    private String height;          //如果认为的不指定,则使用的是图片自己的尺寸

    public Integer getError() {
        return error;
    }

    public void setError(Integer error) {
        this.error = error;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
    	System.err.println("url:"+url);
    	this.url = url;
    }

    public String getWidth() {
        return width;
    }

    public void setWidth(String width) {
        this.width = width;
    }

    public String getHeight() {
        return height;
    }

    public void setHeight(String height) {
        this.height = height;
    }
    
    

}

第一次访问
选择图片中
选择图片完成后
后台中输出的信息,图片在服务器中的地址

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值