string boot ajax文件上传

文件上传

我们的文件上传需要一个映射来方便多人同时访问这个网页,所以我们需要在启动类里面加上映射

@Override
	public void addResourceHandlers(ResourceHandlerRegistry registry) {
	     registry.addResourceHandler("/imctemp-rainy/**").addResourceLocations("file:D:/img/");
	 }

里面的addResourceLocations(“file:D:/img/”)这个里面的路径你可以随便更改。

HTML

<div id="app">
	<input type="file" name="file" id="file"/>
	<p id="url"><img src="" width="200px"/></p>
	<input type="button" id="button" v-on:click="check()" value="上传"/>
</div>

jQuery

<script type="text/javascript">
var vm=new Vue({
	el:"#app",
	data:{
		ours:{},
	},
	methods:{
	check:function(){
		var form=new FormData();
		form.append("file",document.getElementById("file").files[0]);
		$.ajax({
			url:"/our/upload",//前往控制器的路径
			data:form,
			cache:false,
			async:false,//同步异步,为false为同步
			type:"post",//用什么方式传图片
			dataType:"json",
			processData:false,
			contentType:false,
			success:function(data){
				//alert(JSON.stringify(data));
				if(data.success==1){
					alert("保存成功");
					var pic="/imctemp-rainy/"+data.filename;
					$("#url img").attr("src",pic);//给img
				}else{
					alert("失败");
				}
			},
			error:function(er){
				alert(JSON.stringify(data));
			}
		});
	}
}
});
</script>

controller

//文件上传
@RequestMapping(value = "upload",method = RequestMethod.POST)
@ResponseBody
public JSONObject upload(@RequestParam("file") MultipartFile file,HttpServletRequest request) {
		String contenttype=file.getContentType();
		String filename=System.currentTimeMillis()+file.getOriginalFilename();//这是给你的图片改名字
		String filePath="D:/img";//这个要设计成你的电脑路径
		JSONObject jo=new JSONObject();
		if (file.isEmpty()) {//判断文件夹是否存在
			jo.put("success", 0);
			jo.put("filename","");
		}
		try { 
			uploadfile(file.getBytes(),filePath,filename);//调用方法
			jo.put("success", 1);
			jo.put("filename",filename);
			//如果你想往数据库中添加照片路径,就添加以下代码
			Our our=new Our();
			our.setOname(filename);
			ourService.save(our);
		} catch (Exception e) {
			// TODO: handle exception
		}
		return jo;
	}
	//这是往电脑文件夹里面添加图片
	public static void uploadfile(byte[] file,String filePath,String filename)throws Exception {
		File targetFile=new File(filePath);
		if (!targetFile.exists()) {
			targetFile.mkdir();
		}
		FileOutputStream out=new FileOutputStream(filePath+"/"+filename);
		out.write(file);
		out.flush();
		out.close();
	}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值