通过base64字符串之间的编码解码实现图片上传

需要的jar包

BASE64Decoder.jar

html模块

选择文件:<input type="file" id="fileName" name="fileName">
<button onclick="uploadPic()">上传</button>       

js模块

function uploadPic() {
	//获取File文件
	var file = document.getElementById('fileName').files[0];
	
	//声明一个文件流
	var reader = new FileReader();
	
	//如果文件不为null则开始读取2进制数据到文件流(reader)里面
	if (file) {
		reader.readAsDataURL(file);
	}
	
	reader.onload = function() {
		//文件大小
		var fileSize = file.size
		//最大文件大小
		var maxSize = 10 * 1024 * 1024;
		
		//限制文件大小
		if (fileSize > maxSize) {
			mui.alert('上传文件大小超过限制(最大4M)')
		} else {
			//把二进制转成base64编码字符串
			var base64 = reader.result.split(',')[1];
			reader.fileSize
			//二进制提交到后台处理,并返回图片地址
			$.ajax({
						url : 'User/Info',
						type : 'POST',
						dataType : 'json',
						data : {
							'fileName' : base64
						},
						success : function(data) {
							alert("上传成功");
						},
						error : function() {
							alert('上传失败');
						}
					})

			//var dataUrl = 'data:image/png;base64,' + base64;
			//placeholder.style.backgroundImage = 'url(' + dataUrl + ')';
		}
		reader.onerror = function() {
			alert('图片加载出错');
		}
	}
}

java模块

public void saveImg(HttpServletRequest request, HttpServletResponse response) throws Exception{
        //设置编码格式
        response.setCharacterEncoding("utf-8");

        //获取前台传来的Base64解码字符串
        String fw=request.getParameter("fileName");
        //创建一个 BASE64Decoder对象(用来解码)
        BASE64Decoder decoder = new BASE64Decoder();
        //把字符串进行解码成二进制
        byte[] b = decoder.decodeBuffer(fw);
        //调整异常数据
        for(int i=0;i<b.length;++i)
        {
            if(b[i]<0)
            {
                b[i]+=256;
            }
        }
        //用时间来生成文件名
        String newFileName=new SimpleDateFormat("yyyyMMddHHmmssS").format(new Date())+".jpg";
        //获取根目录下pic文件夹路劲
        String uploadPath = request.getSession().getServletContext().getRealPath("/pic/");
        //创建一个文件夹
        File file=new File(uploadPath);
        //判断文件夹是否存在  不存在则创建
        if (file.exists()) {
            if (file.isDirectory()) {
                System.out.println("dir exists");
            } else {
                System.out.println("the same name file exists, can not create dir");
            }
        } else {
            System.out.println("dir not exists, create it ...");
            file.mkdir();
        }

        //生成一个jpg图片
        String imgFilePath = uploadPath+"/"+newFileName;
        //获取图片的输出流
        OutputStream out = new FileOutputStream(imgFilePath);
        //把二进制的数据写入图片中
        out.write(b);
        out.flush();
        out.close();

        //返回一个json字符串
        PrintWriter pw=response.getWriter();
        pw.write("{\"msg\":\"上传成功\"}");
        pw.flush();
        pw.close();
    }

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值