上传base64图片到七牛云存储

发布时间：2017-06-08, 19:43:31 分类：HTML | 编辑 off 网址 | 辅助

图集1/9

正文 2454字数 1,190,473阅读

/*picBase是base64图片带头部的完整编码*/
    function putb64(picBase){

            /*picUrl用来存储返回来的url*/
            var picUrl;

            /*把头部的data:image/png;base64,去掉。（注意：base64后面的逗号也去掉）*/
            picBase=picBase.substring(22);

            /*通过base64编码字符流计算文件流大小函数*/
            function fileSize(str)
            {
                var fileSize;
                if(str.indexOf('=')>0)
                {
                    var indexOf=str.indexOf('=');
                    str=str.substring(0,indexOf);//把末尾的’=‘号去掉
                }

                fileSize=parseInt(str.length-(str.length/8)*2);
                return fileSize;
            }

            /*把字符串转换成json*/
            function strToJson(str)
            { 
                var json = eval('(' + str + ')'); 
                return json; 
            } 


            var url = "http://up.qiniu.com/putb64/"+fileSize(picBase); 
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange=function()
            {
                if (xhr.readyState==4){
                    var keyText=xhr.responseText;

                    /*返回的key是字符串，需要装换成json*/
                    keyText=strToJson(keyText);

                    /* http://ojvh6i96g.bkt.clouddn.com/是我的七牛云空间网址，keyText.key 是返回的图片文件名*/
                    picUrl="http://ojvh6i96g.bkt.clouddn.com/"+keyText.key;
                    alert(picUrl);

                }
            }
            xhr.open("POST", url, true); 
            xhr.setRequestHeader("Content-Type", "application/octet-stream"); 
            xhr.setRequestHeader("Authorization", "UpToken 这里填写你的token（注意前面的UpToken后面有空格）"); 
            xhr.send(picBase);

         }

Run code

Cut to clipboard

function putb64(){
  var pic = "填写你的base64后的字符串";
  var url = "http://upload.qiniu.com/putb64/20264"; //非华东空间需要根据注意事项 1 修改上传域名
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange=function(){
    if (xhr.readyState==4){
      document.getElementById("myDiv").innerHTML=xhr.responseText;
    }
  }
  xhr.open("POST", url, true);
  xhr.setRequestHeader("Content-Type", "application/octet-stream");
  xhr.setRequestHeader("Authorization", "UpToken  填写你从服务端获取的上传token");
  xhr.send(pic);
}

Run code

Cut to clipboard

上传base64编码图片到七牛云开发文档

（支付宝）给作者钱财以资鼓励（微信）→

标签: 云存储2 七牛7 图片48 base646 上传28

有过 15 条评论 »

北京市 2017-06-08, 21:01:42

reply | quote | #¹⁰

北京市 2017-06-08, 21:02:34

reply | quote | #¹¹

广西南宁市 2017-06-12, 11:05:06

// box为被拖放的区域
$('body').on('dragover','#contentadddd' , function(event){
	var e=event.originalEvent;
	//box.addEventListener('dragover', function (e) {
  e.preventDefault(); // 必须阻止默认事件
});//, false

Run code

Cut to clipboard

reply | quote | #¹²

广西南宁市 2017-06-12, 11:33:11

javascript在网页中实现读取剪贴板粘贴截图功能

这篇文章主要介绍了在网页中实现读取剪贴板粘贴截图功能,即可以把剪贴板的截图Ctrl+V粘贴到网页的一个输入框中,例如QQ截图、旺旺截图或者其它截图软件,需要的朋友可以参考下
见某网站的输入框支持截屏粘贴的功能，觉得有点意思，于是将代码扒出来分享下。
可惜，目前仅有高版本的 Chrome 浏览器支持这样直接粘贴，其他浏览器目前为止还无法粘贴( IE11没测试过 )，当然这种增强型的用户体验功能有总比没有好。
输入框的结构代码：

<input type="text" id="testInput" />

Run code

Cut to clipboard

为输入框绑定粘贴事件：

var input = document.getElementById( 'testInput' );
input.addEventListener( 'paste', function( event ){
    // dosomething...
});

Run code

Cut to clipboard

粘贴事件的 Event 接口对象提供了一个 clipboardData 接口，该接口就保存了系统剪贴板中的数据，如上面所说，目前只有高版本的 Chrome 浏览器能直接访问系统剪贴板的数据。这就给截屏后保存到剪贴板中的图片于网页直接进行交互提供了一个入口。
这里所说的截屏，就是 QQ 提供的截屏或者系统自带的 PrtScn 键的截屏功能，或者其他第三方软件提供的截屏功能。

input.addEventListener( 'paste', function( event ){
    // 添加到事件对象中的访问系统剪贴板的接口
    var clipboardData = event.clipboardData,
        i = 0,
        items, item, types;

    if( clipboardData ){
        items = clipboardData.items;

        if( !items ){
            return;
        }

        item = items[0];
        // 保存在剪贴板中的数据类型
        types = clipboardData.types || [];

        for( ; i < types.length; i++ ){
            if( types[i] === 'Files' ){
                item = items[i];
                break;
            }
        }

        // 判断是否为图片数据
        if( item && item.kind === 'file' && item.type.match(/^image\//i) ){
            // 读取该图片            
            imgReader( item );
        }
    }
});

Run code

Cut to clipboard

从剪贴板中取到了图片数据，就可以用 FileReader 对其进行读取了。

var imgReader = function( item ){
    var file = item.getAsFile(),
        reader = new FileReader();

    // 读取文件后将其显示在网页中
    reader.onload = function( e ){
        var img = new Image();

        img.src = e.target.result;
        document.body.appendChild( img );
    };
    // 读取文件
    reader.readAsDataURL( file );
};

Run code

Cut to clipboard

很短的代码就实现了，可以使用以下源码演示。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>利用 clipboardData 在网页中实现截屏粘贴的功能</title>
<style type="text/css">
#box{ width:200px; height:200px; border:1px solid #ddd; }
</style>
</head>
<body>

<h1>利用 clipboardData 在网页中实现截屏粘贴的功能</h1>   
<hr />
<div><input type="text" id="testInput" placeholder="截屏后粘贴到输入框中" size="30" /></div>
<script type="text/javascript">
(function(){
    var imgReader = function( item ){
        var blob = item.getAsFile(),
            reader = new FileReader();

        reader.onload = function( e ){
            var img = new Image();

            img.src = e.target.result;
            document.body.appendChild( img );
        };

        reader.readAsDataURL( blob );
    };
    document.getElementById( 'testInput' ).addEventListener( 'paste', function( e ){
    var clipboardData = e.clipboardData,
        i = 0,
        items, item, types;

    if( clipboardData ){
        items = clipboardData.items;

        if( !items ){
            return;
        }

        item = items[0];
        types = clipboardData.types || [];

        for( ; i < types.length; i++ ){
            if( types[i] === 'Files' ){
                item = items[i];
                break;
            }
        }

        if( item && item.kind === 'file' && item.type.match(/^image\//i) ){
            imgReader( item );
        }
    }
    });
})();  
</script>

</body>
</html>

Run code

Cut to clipboard

reply | quote | #¹³

广西南宁市 2017-06-13, 10:06:23


<script>
var box=document.getElementById('contentadddd');
function putb64(picurl,pickey,token){
  var pic = picurl.substring(22);

            /*通过base64编码字符流计算文件流大小函数*/
            function fileSize(str){
                var fileSize;
                if(str.indexOf('=')>0)
                {
                    var indexOf=str.indexOf('=');
                    str=str.substring(0,indexOf);//把末尾的’=‘号去掉
                }

                fileSize=parseInt(str.length-(str.length/8)*2);
                return fileSize;
            }
            /*把字符串转换成json*/
            function strToJson(str){ 
                var json = eval('(' + str + ')'); 
                return json; 
            }
  
  
  
  var url = "https://upload.qbox.me/putb64/-1";
  //"+fileSize(pic)+"/key/"+pickey; //非华东空间需要根据注意事项 1 修改上传域名 "+fileSize(pic)+"/key/"+pickey
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange=function(){
    if (xhr.readyState==4){
		var data=xhr.responseText;
		//console.log(data);
		data=strToJson(data);
		//console.log(data);
		//data=strToJson(data.key);
		$('.watermark').hide();
		codeanddd('contentadddd','');
		$('#myCanvasimgpuppmain').hide();
		submitinputtvllsscccc("上传成功！");

		//data=JSON.parse(data);
		
    }
  }
  xhr.open('POST', url, true);
  xhr.setRequestHeader("Content-Type", "application/octet-stream");
  xhr.setRequestHeader("Authorization", "UpToken "+token);
  xhr.send(pic);
}
$('body').on('paste','#contentadddd' , function(event){
	//alert(event.originalEvent);
	//console.log(event.originalEvent);
	var e=event.originalEvent;
	//box.addEventListener("paste", function(e) {alert(event);
	if (e && e.clipboardData && e.clipboardData.types && e.clipboardData.items.length) {
		var clipboardData = e.clipboardData,
			type = clipboardData.types;
		if (type.indexOf('Files') !== -1) {
			var item = clipboardData.items[0],
				reader = new FileReader();
			reader.onload = function(event) {
				var img = document.createElement('img');
				img.src = event.target.result;
					img.onload = function () {
						var canvas = document.getElementById("myCanvasimgpupp");
						var ctx = canvas.getContext('2d');
						ctx.drawImage(img, 0, 0, 55, 55);
					}
				$('#myCanvasimgpuppmain').show();
				$('#submitinputtvllss').text("正在上传..");
				//console.log(img.src);
				


						$.ajax( {
							url: '/outblog.php?pastimgvassss=base64', //这里是静态页的地址
							type: "GET", //静态页用get方法，否则服务器会抛出405错误
							dataType: "json",
							//cache: false,
							//async: false,
							beforeSend: function(){
							 // Handle the beforeSend event
							},
							success: function(data){
								//data=JSON.parse(data);
								//alert(file);
								var upToken=data.upToken;
								var nnaame=data.nnaame;

									putb64(img.src,data.cccodejj,upToken)
					
							}
						});




				
				//document.body.appendChild(img);
			}
			if (item.kind === 'string' && clipboardData.items[1]) {
				item = clipboardData.items[1];
			}
			reader.readAsDataURL(item.getAsFile());
		}
	}
	//return false;
})






// box为被拖放的区域
$('body').on('dragover','#contentadddd' , function(event){
	var e=event.originalEvent;
	//box.addEventListener('dragover', function (e) {
  e.preventDefault(); // 必须阻止默认事件
});//, false

$('body').on('drop','#contentadddd' , function(event){
	var e=event.originalEvent;
	//box.addEventListener('drop', function (e) {
  e.preventDefault(); // 阻止默认事件
  var file = e.dataTransfer.files[0]; //获取文件
  // code
  
			upperCase(file);
			$('#myCanvasimgpuppmain').show();
			$('#submitinputtvllss').text("正在上传..");

		$.ajax( {
			url: '/outblog.php', //这里是静态页的地址
			type: "GET", //静态页用get方法，否则服务器会抛出405错误
			dataType: "json",
			//cache: false,
			//async: false,
			beforeSend: function(){
			 // Handle the beforeSend event
			},
			success: function(data){
				//data=JSON.parse(data);
				//alert(file);
				var upToken=data.upToken;
				var nnaame=data.nnaame;

					var xhr = new XMLHttpRequest,
					fd = new FormData;

					xhr.open('POST', 'https://up.qbox.me', true);  // 'url'
					//可以通过progress事件监听上传进度
					xhr.onload = function() {
					  // 上传完成
					  //alert(nnaame);
					  $('.watermark').hide();
						codeanddd('contentadddd','');
						$('#myCanvasimgpuppmain').hide();
						submitinputtvllsscccc("上传成功！");
					}
					// 
					fd.append('file', file); // 'file'
					fd.append('key', nnaame);
					fd.append('token', upToken);
					xhr.send(fd);
	
			}
		});
			
			

			return false;
			
			
			
	// file为前面获得的
	var url = window.URL.createObjectURL(file);
	var img = new Image;
	img.src = url;
	// 加到dom
	console.log(url);
  
		upperCase(file);
		$('#myCanvasimgpuppmain').show();
		
  
});//, false

</script>

Run code

Cut to clipboard

#,广西南宁市,2017-06-13,10:07:40,


<script>
var box=document.getElementById('contentadddd');
function putb64(picurl,pickey,token){
  var pic = picurl.substring(22);

            /*通过base64编码字符流计算文件流大小函数*/
            function fileSize(str){
                var fileSize;
                if(str.indexOf('=')>0)
                {
                    var indexOf=str.indexOf('=');
                    str=str.substring(0,indexOf);//把末尾的’=‘号去掉
                }

                fileSize=parseInt(str.length-(str.length/8)*2);
                return fileSize;
            }
            /*把字符串转换成json*/
            function strToJson(str){ 
                var json = eval('(' + str + ')'); 
                return json; 
            }
  
  
  
  var url = "https://upload.qbox.me/putb64/-1";
  //"+fileSize(pic)+"/key/"+pickey; //非华东空间需要根据注意事项 1 修改上传域名 "+fileSize(pic)+"/key/"+pickey
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange=function(){
    if (xhr.readyState==4){
		var data=xhr.responseText;
		//console.log(data);
		data=strToJson(data);
		//console.log(data);
		//data=strToJson(data.key);
		$('.watermark').hide();
		codeanddd('contentadddd','[imgs]http://out.img.pan.lizhenqiu.com/'+data.key+'[/imgs]');
		$('#myCanvasimgpuppmain').hide();
		submitinputtvllsscccc("上传成功！");

		//data=JSON.parse(data);
		
    }
  }
  xhr.open('POST', url, true);
  xhr.setRequestHeader("Content-Type", "application/octet-stream");
  xhr.setRequestHeader("Authorization", "UpToken "+token);
  xhr.send(pic);
}
$('body').on('paste','#contentadddd' , function(event){
	//alert(event.originalEvent);
	//console.log(event.originalEvent);
	var e=event.originalEvent;
	//box.addEventListener("paste", function(e) {alert(event);
	if (e && e.clipboardData && e.clipboardData.types && e.clipboardData.items.length) {
		var clipboardData = e.clipboardData,
			type = clipboardData.types;
		if (type.indexOf('Files') !== -1) {
			var item = clipboardData.items[0],
				reader = new FileReader();
			reader.onload = function(event) {
				var img = document.createElement('img');
				img.src = event.target.result;
					img.onload = function () {
						var canvas = document.getElementById("myCanvasimgpupp");
						var ctx = canvas.getContext('2d');
						ctx.drawImage(img, 0, 0, 55, 55);
					}
				$('#myCanvasimgpuppmain').show();
				$('#submitinputtvllss').text("正在上传..");
				//console.log(img.src);
				


						$.ajax( {
							url: '/outblog.php?pastimgvassss=base64', //这里是静态页的地址
							type: "GET", //静态页用get方法，否则服务器会抛出405错误
							dataType: "json",
							//cache: false,
							//async: false,
							beforeSend: function(){
							 // Handle the beforeSend event
							},
							success: function(data){
								//data=JSON.parse(data);
								//alert(file);
								var upToken=data.upToken;
								var nnaame=data.nnaame;

									putb64(img.src,data.cccodejj,upToken)
					
							}
						});




				
				//document.body.appendChild(img);
			}
			if (item.kind === 'string' && clipboardData.items[1]) {
				item = clipboardData.items[1];
			}
			reader.readAsDataURL(item.getAsFile());
		}
	}
	//return false;
})






// box为被拖放的区域
$('body').on('dragover','#contentadddd' , function(event){
	var e=event.originalEvent;
	//box.addEventListener('dragover', function (e) {
  e.preventDefault(); // 必须阻止默认事件
});//, false

$('body').on('drop','#contentadddd' , function(event){
	var e=event.originalEvent;
	//box.addEventListener('drop', function (e) {
  e.preventDefault(); // 阻止默认事件
  var file = e.dataTransfer.files[0]; //获取文件
  // code
  
			upperCase(file);
			$('#myCanvasimgpuppmain').show();
			$('#submitinputtvllss').text("正在上传..");

		$.ajax( {
			url: '/outblog.php', //这里是静态页的地址
			type: "GET", //静态页用get方法，否则服务器会抛出405错误
			dataType: "json",
			//cache: false,
			//async: false,
			beforeSend: function(){
			 // Handle the beforeSend event
			},
			success: function(data){
				//data=JSON.parse(data);
				//alert(file);
				var upToken=data.upToken;
				var nnaame=data.nnaame;

					var xhr = new XMLHttpRequest,
					fd = new FormData;

					xhr.open('POST', 'https://up.qbox.me', true);  // 'url'
					//可以通过progress事件监听上传进度
					xhr.onload = function() {
					  // 上传完成
					  //alert(nnaame);
					  $('.watermark').hide();
						codeanddd('contentadddd','[imgs]http://out.img.pan.lizhenqiu.com/'+nnaame+'[/imgs]');
						$('#myCanvasimgpuppmain').hide();
						submitinputtvllsscccc("上传成功！");
					}
					// 
					fd.append('file', file); // 'file'
					fd.append('key', nnaame);
					fd.append('token', upToken);
					xhr.send(fd);
	
			}
		});
			
			

			return false;
			
			
			
	// file为前面获得的
	var url = window.URL.createObjectURL(file);
	var img = new Image;
	img.src = url;
	// 加到dom
	console.log(url);
  
		upperCase(file);
		$('#myCanvasimgpuppmain').show();
		
  
});//, false

</script>

Run code

Cut to clipboard

reply | quote | #¹⁴

广西南宁市 2017-11-11, 17:05:43

七牛上传同名文件错误？提示防范处理机制？

reply | quote | #¹⁵

Records:15 2/2 «‹1 2 ›»

lizhenqiu blog

上传base64图片到七牛云存储

相关日志

有过 15 条评论 »

留下評論