点击头像上传图片ajax

本文介绍了如何利用Ajax技术实现实时上传头像的功能,通过示例代码展示了一个简洁高效的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

话不多说,直接上代码

		<div id="head">
			<img style="width: 80px;height: 80px" src="images/ckin.jpg" id="choice">
			<input style="display: none" type="file" name="file" accept="image/*" value="0" id="changehead" onchange="read(this)">
		</div>

 

//注意:由于在我的项目中,$符号与jQuery冲突了,所以这里我把$符号换成了jq	
		var jq = $.noConflict();
			jq(function() {
				// 点击修改头像
				jq("#choice").click(function() {
					// 点击input
					jq("#changehead").click();
				})
			})

			// 预览图片
			function read(a) {
				console.log(a.files);
				var file = a.files[0];
				//创建读取文件的对象
				var reader = new FileReader();
				//创建文件读取相关的变量
				var imgFile;
				//为文件读取成功设置事件
				reader.onload = function(e) {
					// alert('文件读取完成');
					imgFile = e.target.result;
					console.log(imgFile);
					jq("#choice").attr('src', imgFile);
				};
				//正式读取文件
				reader.readAsDataURL(file);

// FormData 是 Html5 新加进来的一个类,可以模拟表单数据
                // 可以使用 JQuery 的 $.Ajax 结合 FormData 异步上传二进制文件
                var formdata=new FormData();
                formdata.append("headimg",$("#changehead").get(0).files[0]);
                formdata.append("nickname",name);
                $.ajax({
                    url:"/upinfo",//后台路径
                    type:"POST",
                    data:formdata,
                    // 下面三个属性一定要加
                    processData:false,//对data参数进行序列化处理
                    contentType:false,//内容编码类型
                    cache:false,//不使用缓存
                    dataType:"json",
                    success:function(result){
                        if (result==1){
                            
                        }
                    }
                })
			}

 

//    修改信息
    @RequestMapping("/upinfo")
    @ResponseBody
    public int upinfo(HttpServletRequest request,
                      @RequestParam(value = "headimg", required = false) MultipartFile file,HttpSession session){

        //路径
        String path="";
        try {
            File path22 = new File(ResourceUtils.getURL("classpath:").getPath());
            File upload = new File(path22.getAbsolutePath(),"static/header");
            //header是上传文件夹
            path=upload.getAbsolutePath();
        }catch (FileNotFoundException e){

        }
        //获取文件名称
        String filename=file.getOriginalFilename();
        String geshi=filename.substring(filename.length()-4, filename.length());
        System.out.println(filename);
        //修改文件名称(当前时间,精确到毫秒),防止文件名重复
        SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddHHmmssSSS");
        String formatStr =formatter.format(new Date());
        filename=formatStr+"."+geshi;
        File f=new File(path,filename);
        if (!f.exists()) {
            try {
                f.createNewFile();
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
        try {
            file.transferTo(f);
        } catch (IllegalStateException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        //把信息存储到数据库,请换成自己的方法
        int i=ls.upnick(nickname,"/header/"+filename,login.getUid());
        if (i==1){
            return 1;
        }
        return 0;
    }

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值