页面发送二进制流文件到后台处理

最新推荐文章于 2025-04-27 16:29:19 发布

原创最新推荐文章于 2025-04-27 16:29:19 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #ViewUI

web 同时被 3 个专栏收录

16 篇文章

订阅专栏

javascript

12 篇文章

订阅专栏

java

7 篇文章

订阅专栏

本文介绍了一种在网页上实现从剪贴板粘贴图片的方法，并提供了详细的JavaScript代码示例，包括对不同浏览器的支持及图片数据的处理过程。

页面

//黏贴图片
function ImgClipBoardData(evt,row){
	var position = ($(evt).prev(".menuClass").size()<=0)?'up':'down';
	var current_main_body_id = ($(evt).prev(".menuClass").size()<=0)?$(evt).next().attr("mainBodyId"):$(evt).prev(".menuClass").attr("mainBodyId");
	var img_data = "";
	if(window.clipboardData){//判断浏览器是IE
		//判断剪切板中内容是图片还是文字，如果是图片则window.clipboardData.getData("Text")取出值为空；若为文字不为空
		if(window.clipboardData.getData("Text")!=null && window.clipboardData.getData("Text")!=""){
			//$('#imgClipBoard_'+row).html(window.clipboardData.getData("Text"));
			//initWordPase();
		}else{
			var x = document.getElementById("x");
			//$('#imgClipBoard_'+row).html('<img src="https://img-blog.csdnimg.cn/2022010612325733387.png'+x.Base64String+'">'); 
			//$("#img_data").val(x.Base64String);
			img_data = x.Base64String;
			//alert("1234"+img_data);
			formsumit(img_data,position,current_main_body_id,row);

		}
  	}else{
 		if(evt.clipboardData.getData("Text")==null || evt.clipboardData.getData("Text")==""){
 			var clipboardData = evt.clipboardData;  
		 	var sHtml = "";
		    for(var i=0; i<clipboardData.items.length; i++){  
		        var item = clipboardData.items[i];  
		        if(item.kind=='file'&&item.type.match(/^image\//i)){  
		            //blob就是剪贴板中的二进制图片数据  
		            var blob = item.getAsFile(),reader = new FileReader();  
		            //定义fileReader读取完数据后的回调  
		            reader.onload=function(){  
		            	img_data = event.target.result;//result是base64编码后的图片
		                //var sHtml='<img src="'+img_data+'">';  
		                //$('#imgClipBoard_'+row).html(sHtml);  
		            }  
		            reader.readAsDataURL(blob);//用fileReader读取二进制图片，完成后会调用上面定义的回调函数  

		        }  
		    }  
		    setTimeout(function(){
		    	formsumit(img_data,position,current_main_body_id,row);
		    },500);
 		}else{

	    }
    }
}
//保存图片信息
function formsumit(img_data,position,current_main_body_id,row){alert(img_data)
	console.log(img_data);
	img_data= img_data.replace("https://img-blog.csdnimg.cn/2022010612325733387.png","");
	var num = img_data / 600000;
	var str = "{}";
	for(var i=1;i<=num;i++){
		str["img_data"+i]=img_data.substring((i-1)*600000+1,i*600000);

		}
	//img_data = window.encodeURI(window.encodeURI(img_data));
	console.log(img_data);
	var frm = $('#statusForm');
	$("#txtArea").val(img_data);
    $.ajax({
        type: "POST",
        url: "SaveImageDataServlet",
        data: img_data,
        contentType :"multipart/form-data",
        processData :false,
        success: function (data) {
        //$('#new_tweet').html(data);
        // $('#txtArea').val('');
        },
        error: function(jqXHR, textStatus, errorThrown){
        // log the error to the console

        }

    });
}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("gbk");
		String datasource_main = ApplicationUtil.getDefaultDataSource(request
				.getSession().getServletContext());System.out.print("121");
		//String server_path = RequestUtil.getRealPath(request, "");
		//----获取参数
		FileOutputStream fos=new FileOutputStream("d:\\a.png");  

		BASE64Decoder base64=new BASE64Decoder(); 
		byte[] buffer=base64.decodeBuffer(request.getInputStream());  

		fos.write(buffer);
        fos.flush();  
        fos.close();      
        fos=null;
}

对于ie的话，不支持FileReader的，需要activex控件。