Javaweb关于图片上传问题

最新推荐文章于 2023-11-20 15:58:05 发布

早起和早睡

最新推荐文章于 2023-11-20 15:58:05 发布

阅读量342

点赞数 1

分类专栏：项目文章标签： javaweb 图片

本文链接：https://blog.csdn.net/qq_41767640/article/details/91540268

版权

项目专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在ssm项目中要实现文件上传功能首先要导入俩个jar包

commons-fileupload.jar和commons-io.jar

然后需要在前端页面上使用<input type="file">

并且需要用表单，表单的enctype设为multipart/form-data

例如

<form enctype="multipart/form-data" id="ff">
<label for="fileup"  class="aa" >修改头像</label>
<input type="file" id="fileup"  name="file" style="display:none" >
</form>

然后需要在js中获得表单对象

同时需要使用FormData对象序列化

<script>
$('#upload').change(function(){  //当upload对象改变时执行函数
var form=document.getElementById('ff');
var f=new FormData(form)//创建FormDate对象 FormDate对象会直接将(upload对象)name作为key,文件作为value
})
</script>


<script>
$('#upload').change(function(){  //当upload对象改变时执行函数
var file=document.getElementById('upload').files[0];
var f=new FormData()//创建FormDate对象
f.append("name",file)
})
</script>
以上俩种方式都是在f中放入文件

然后使用ajax访问controller处理

ajax.js代码

var oAjax;
function ajax (url,data,success){
	console.log(data);
		oAjax=new XMLHttpRequest();
		oAjax.onreadystatechange=function(){
			if (oAjax.readyState==4){
				if(oAjax.status==200){
					success(oAjax.responseText);
			    }
			  else{
				alert("请求出错请刷新后再试");
			    }
			}		
		}		
		if(data==""){
			oAjax.open('GET',url,true);
		   oAjax.send();
		}
		else{
			oAjax.open('POST',url,false);
			if(typeof(data)=='string'){
				oAjax.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
			}
			oAjax.send(data);
		}				
}

下面直接使用ajax函数访问

<script>
$('#upload').change(function(){  //当upload对象改变时执行函数
var url="../user/upload";
var form=document.getElementById('ff');
var f=new FormData(form)//创建FormDate对象 FormDate对象会直接将(upload对象)name作为key,文件作为value
ajax(url,f,function(date){
		var img=JSON.parse(date);
		var i=document.getElementById("tim");
		i.src="../images/"+img.image	
	})
})
</script>

ajax会将前台的请求转到controller定位到url

后台使用MultipartFile 接收前面传过来的文件

在使用时需要在application-contenxt.xml中配置如果没有配置会报错

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> 
         <property name="maxUploadSize" value="20000000"/>
         <property name="defaultEncoding" value="utf-8"></property>
</bean>

@RequestMapping("upload")
	@ResponseBody
	public Map<String,Object> upload(@RequestParam(value = "file") MultipartFile  file,HttpServletRequest request,String im) throws IOException{
		String b=request.getSession().getServletContext().getRealPath("/");
		String username=(String) request.getSession().getAttribute("username");
		b=b.replaceAll("\\\\","/");
		byte[] a=file.getBytes();
		String name1=file.getOriginalFilename();
		String ims[]=name1.split("\\.");
		ims[0]=im;
		String name=ims[0]+"."+ims[1];	
		String image=user.savefile(b,a,name);
		   user u=user.query(username);
		   String path=u.getImage();
		   user.deletefile(path);
		   u.setImage(image);
		   user.update(u);
		   Map<String,Object> m=new HashMap<String,Object>();
		   m.put("image",name);
		   return m;   	   
	    }