点击头像上传图片ajax

最新推荐文章于 2022-02-10 19:43:11 发布

原创最新推荐文章于 2022-02-10 19:43:11 发布 · 628 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#上传图片 #ajax

JavaScript 同时被 2 个专栏收录

10 篇文章

订阅专栏

前端

5 篇文章

订阅专栏

本文介绍了如何利用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;
    }