Java+html+js上传图片进行下载功能

首先写一个前端的上传代码 已经复制剪贴图片的前端代码

<form id="excelForm" action="http://gg116.daorc.com/douyinvideo_saveImportImg.action" method="post" enctype="multipart/form-data">
			<div style="width:90%;height:100%;margin-left:50px">
			<span style="float:left;margin-top:8px;">
				<lable>
					<font size="3px">选择文件</font>
				</lable>
			</span>
			<input style="width:40%;margin-left:5px;float:left;" name="uploadFile" class="btn btn-info" type='file' id='excelUpload' multiple="multiple">
			<br>
			<input type="text" id="parseImg" style="width:40%;margin-left: -425px;float:left;margin-top: 50px;height: 30px;background-color: #548cfd;border: 0px;border-radius: 6px;font-size: 15px;color: white;padding: 18px;" value="粘贴图片">			<br>
			
			<br/>
			<button class="btn btn-success" id="imgbutton" style="float: left;margin-top: -64px;margin-left: 470px;" type="button">提交</button>
			<button class="btn btn-success" id="buttontupian" style=" float: left; margin-top: 6px; margin-left: 470px; " type="button">提交</button>
			<img src="" id="imgView" style=" float: left; margin-top: 85px; margin-left: -455px; "/>
			
			</div>
		 </form> 

然后是js 作用是复制图片以及上传图片

<script type="text/javascript">
    //粘贴功能
    document.getElementById("parseImg").addEventListener("paste", function (event) {
        const clipboardData = event.clipboardData || event.originalEvent.clipboardData
        const items = clipboardData.items;
        console.log(items[0])
        if (items.length > 0 && items[0].kind === "file") {
            let blob = items[0].getAsFile()
            let reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onload = function (e) {
                console.log(e)
                document.getElementById("imgView").src = e.target.result
            };
        } else {
            alert("剪切板没图片内容")
        }
    })
    //上传图片然后传到后台 用from表单进行提交数据
	$("#imgbutton").click(function(){
		$.ajax({
			type: "post",
			url:contextPath+"/douyinvideo_saveImportImg.action",
			cache: false,
    		processData: false,
    		contentType: false,
    		dataType:'json',
			data: new FormData($("#excelForm")[0]),
			success:function(data){
				if(data.status=="1"){
					window.opener.postMessage(JSON.stringify({"data":data.data,"status":"1","method":"getImgView","type":"getImgView"}),'*');
					window.close();
					return;
				}
			}
		}) 
	}) 
    //复制图片完成后会变成一个base64的临时文件 付给img标签的src属性    
	$("#buttontupian").click(function(){
        //首先获取src属性的值
		var imgurl = document.getElementById("imgView").src;
		console.log(imgurl);
		$.ajax({
			type: "post",
			url:contextPath+"/douyinvideo_saveImportImgjt.action",
    		dataType:'json',
            //注意 这里一定要包装一下 直接传是穿不过去的 要转为字符串
    		data: {"imgurl": encodeURIComponent(JSON.stringify(imgurl))},
			success:function(data){
				if(data.status=="1"){
					//成功下载上传图片
					return;
				}
			}
		}) 
	}) 
	
		
	</script>

最后是后端接收加密过的字符串

        String imgBase64  = "接收的加密字符串";
        //首先进行解密
		try {
            imgBase64 =URLDecoder.decode(imgBase64 ,"UTF-8");
        } catch(UnsupportedEncodingException e) {
            Debug.error("",e);
           }
		System.out.println("imgBase64 ="+imgBase64 );
	    String base64Data = imgBase64.split(",")[1];  

		String covertUrl="d:/img/search/";
	    // 检查目标文件夹是否存在,如果不存在则创建它
	    File targetFolder = new File(covertUrl);
	    if (!targetFolder.exists()) {
	        targetFolder.mkdirs();
	    }
	    // 构建目标文件的路径
	    String targetFilePath = covertUrl+"tupian1.jpg";
		BASE64Decoder decoder = new BASE64Decoder();
		try {
			byte[] imgBytes = decoder.decodeBuffer(base64Data);
			FileOutputStream fos = new FileOutputStream(targetFilePath);
			fos.write(imgBytes);
			fos.close();
		} catch (IOException e) {
			Debug.error(e);
		} 

下面是我单独写的main方法可以执行一下

下面是一个图片用base64转换的网站:可以参考一下 很好用

Base64 在线编码解码 | Base64 加密解密 - Base64.us

package com.xyj.a;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;

import sun.misc.BASE64Decoder;

public class base64 {
		public static void main(String[] args) {
			String imgBase64="";
			String base64Data = imgBase64.split(",")[1];  

			String covertUrl="d:/img/search/";
		    // 检查目标文件夹是否存在,如果不存在则创建它
		    File targetFolder = new File(covertUrl);
		    if (!targetFolder.exists()) {
		        targetFolder.mkdirs();
		    }
		    // 构建目标文件的路径
		    String targetFilePath = covertUrl+"tupian1.jpg";
			BASE64Decoder decoder = new BASE64Decoder();
			try {
				byte[] imgBytes = decoder.decodeBuffer(base64Data);
				FileOutputStream fos = new FileOutputStream(targetFilePath);
				fos.write(imgBytes);
				fos.close();
			} catch (IOException e) {
				System.out.println(e);			} 
		}
}

  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值