评论 - lizhenqiu blog

#¹³⁵⁰

作者：广西南宁市

关于一个事件触发多个响应函数：

function addLoadEvent(func) {

   var oldonload = window.onload;

   if (typeof window.onload != 'function') {

　　　　window.onload = func;

   } else {

     window.onload = function() {

       if (oldonload) {

         oldonload();

       }

       func();

     }

   }

}

Run code

Cut to clipboard

这个函数写得很巧妙。利用匿名函数

文章：上传base64图片到七牛云存储发表时间：2017-06-08, 20:00:18

展开↯

#¹³⁵¹

作者：广西南宁市

先创建一个空的FormData对象,然后使用append()方法向该对象里添加字段,如下:

var oMyForm = new FormData();

oMyForm.append("username", "Groucho");
oMyForm.append("accountnum", 123456); // 数字123456被立即转换成字符串"123456"

// fileInputElement中已经包含了用户所选择的文件
oMyForm.append("userfile", fileInputElement.files[0]);

var oFileBody = "<a id="a"><b id="b">hey!</b></a>"; // Blob对象包含的文件内容
var oBlob = new Blob([oFileBody], { type: "text/xml"});

oMyForm.append("webmasterfile", oBlob);

var oReq = new XMLHttpRequest();
oReq.open("POST", "http://foo.com/submitform.php");
oReq.send(oMyForm);

Run code

Cut to clipboard

注: 字段"userfile"和"webmasterfile"的值都包含了一个文件.通过 FormData.append()方法赋给字段"accountnum"的数字被自动转换为字符(字段的值可以是一个Blob对象,一个File对象,或者一个字符串,剩下其他类型的值都会被自动转换成字符串).
在该例子中,我们创建了一个名为oMyForm的FormData对象,该对象中包含了名为"username", "accountnum", "userfile" 以及 "webmasterfile"的字段名,然后使用XMLHttpRequest的send()方法把这些数据发送了出去."webmasterfile"字段的值不是一个字符串,还是一个Blob对象.

文章：上传base64图片到七牛云存储发表时间：2017-06-08, 19:59:22

展开↯

#¹³⁵²

作者：广西南宁市

js实现拖拽上传图片的实现思路

拖拽主要用到两个事件 dragover drop

// box为被拖放的区域
box.addEventListener('dragover', function (e) {
  e.preventDefault(); // 必须阻止默认事件
}, flase);

box.addEventListener('drop', function (e) {
  e.preventDefault(); // 阻止默认事件
  var file = e.dataTransfer.files[0]; //获取文件
  // code
}, false);

Run code

Cut to clipboard

预览，主要是文件转换为base64，或者blob，或者canvas
file -> base64

// file为前面获得的
var reader = new FileReader();
reader.onload = function(e) {
  var img = new Image;
  img.src = this.result;  // this.result 为base64
  // 加到dom
};
reader.readAsDataURL(file);

Run code

Cut to clipboard

file -> blob

// file为前面获得的
var url = window.URL.createObjectURL(file);
var img = new Image;
img.src = url;
// 加到dom

Run code

Cut to clipboard

上传需要用到FormData模拟表单数据或直接form上传
不做处理直接ajax上传

var xhr = new XMLHttpRequest,
    fd = new FormData;

xhr.open('POST', 'url', true);  // 'url'
//可以通过progress事件监听上传进度
xhr.onload = function() {
  // 上传完成
}
// 
fd.append('file', file); // 'file'
xhr.send(fd);

Run code

Cut to clipboard

如果图片上传前要修改，如对图片进行裁剪，旋转等操作（前端），一般是转化为canvas处理。
随后根据后台可能把canvas转成base64字符串上传或转成blob对象上传，

#,广西南宁市,2017-06-08,19:53:53, https://segmentfault.com/q/1010000002885157

#,广西南宁市,2017-06-08,19:55:30, HTML5 本地裁剪图片并上传至服务器

#,广西南宁市,2017-06-08,19:57:11, 你真的会使用XMLHttpRequest吗？

文章：上传base64图片到七牛云存储发表时间：2017-06-08, 19:53:22

展开↯

#¹³⁵³

作者：广西南宁市


<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);
}

box.addEventListener("paste", function(e) {
	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为被拖放的区域
box.addEventListener('dragover', function (e) {
  e.preventDefault(); // 必须阻止默认事件
}, false);

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);
						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

文章：上传base64图片到七牛云存储发表时间：2017-06-08, 19:49:47

展开↯

#¹³⁵⁴

作者：广西南宁市

PHP后端跨域HEADER头


header("Access-Control-Allow-Origin: http://a.com"); // 允许a.com发起的跨域请求
//如果需要设置允许所有域名发起的跨域请求，可以使用通配符 *
header("Access-Control-Allow-Origin: *"); // 允许任意域名发起的跨域请求
header('Access-Control-Allow-Headers: X-Requested-With,X_Requested_With');

Run code

Cut to clipboard

文章：上传base64图片到七牛云存储发表时间：2017-06-08, 19:47:58

展开↯

#¹³⁵⁵

作者：广西南宁市

DataURL与File,Blob,canvas对象之间的互相转换的Javascript

canvas转换为dataURL (从canvas获取dataURL)

var dataurl = canvas.toDataURL('image/png');
var dataurl2 = canvas.toDataURL('image/jpeg', 0.8);

Run code

Cut to clipboard

File对象转换为dataURL、Blob对象转换为dataURL

File对象也是一个Blob对象，二者的处理相同。

function readBlobAsDataURL(blob, callback) {
    var a = new FileReader();
    a.onload = function(e) {callback(e.target.result);};
    a.readAsDataURL(blob);
}
//example:
readBlobAsDataURL(blob, function (dataurl){
    console.log(dataurl);
});
readBlobAsDataURL(file, function (dataurl){
    console.log(dataurl);
});

Run code

Cut to clipboard

dataURL转换为Blob对象

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}
//test:
var blob = dataURLtoBlob('data:text/plain;base64,YWFhYWFhYQ==');

Run code

Cut to clipboard

dataURL图片数据绘制到canvas

先构造Image对象，src为dataURL，图片onload之后绘制到canvas

var img = new Image();
img.onload = function(){
    canvas.drawImage(img);
};
img.src = dataurl;

Run code

Cut to clipboard

File,Blob的图片文件数据绘制到canvas

还是先转换成一个url，然后构造Image对象，src为dataURL，图片onload之后绘制到canvas

利用上面的 readBlobAsDataURL 函数，由File,Blob对象得到dataURL格式的url，再参考 dataURL图片数据绘制到canvas

readBlobAsDataURL(file, function (dataurl){
    var img = new Image();
    img.onload = function(){
        canvas.drawImage(img);
    };
    img.src = dataurl;
});

Run code

Cut to clipboard

不同的方法用于构造不同类型的url (分别是 dataURL, objectURL(blobURL), filesystemURL)。这里不一一介绍，仅以dataURL为例。

filesystemURL不是指本地文件URL的形式(file:///….), 而是格式类似于 filesystem:http://... 的一种URL，支持沙盒文件系统的浏览器支持(目前仅Chrome)支持。

Canvas转换为Blob对象并使用Ajax发送

转换为Blob对象后，可以使用Ajax上传图像文件。

先从canvas获取dataurl, 再将dataurl转换为Blob对象

var dataurl = canvas.toDataURL('image/png');
var blob = dataURLtoBlob(dataurl);
//使用ajax发送
var fd = new FormData();
fd.append("image", blob, "image.png");
var xhr = new XMLHttpRequest();
xhr.open('POST', '/server', true);
xhr.send(fd);

Run code

Cut to clipboard

文章：上传base64图片到七牛云存储发表时间：2017-06-08, 19:47:04

展开↯

#¹³⁵⁶

作者：广西南宁市

HTML5学习之FileReader接口

<script type="text/javascript">
var result=document.getElementById("result");
var file=document.getElementById("file");

//判断浏览器是否支持FileReader接口
if(typeof FileReader == 'undefined'){
    result.InnerHTML="<p>你的浏览器不支持FileReader接口！</p>";
    //使选择控件不可操作
    file.setAttribute("disabled","disabled");
}

function readAsDataURL(){
    //检验是否为图像文件
    var file = document.getElementById("file").files[0];
    if(!/image\/\w+/.test(file.type)){
        alert("看清楚，这个需要图片！");
        return false;
    }
    var reader = new FileReader();
    //将文件以Data URL形式读入页面
    reader.readAsDataURL(file);
    reader.onload=function(e){
        var result=document.getElementById("result");
        //显示文件
        result.innerHTML='<img src="' + this.result +'" alt="" />';
    }
}

function readAsBinaryString(){
    var file = document.getElementById("file").files[0];
    var reader = new FileReader();
    //将文件以二进制形式读入页面
    reader.readAsBinaryString(file);
    reader.onload=function(f){
        var result=document.getElementById("result");
        //显示文件
        result.innerHTML=this.result;
    }
}

function readAsText(){
    var file = document.getElementById("file").files[0];
    var reader = new FileReader();
    //将文件以文本形式读入页面
    reader.readAsText(file);
    reader.onload=function(f){
        var result=document.getElementById("result");
        //显示文件
        result.innerHTML=this.result;
    }
}
</script>
<p>
    <label>请选择一个文件：</label>
    <input type="file" id="file" />
    <input type="button" value="读取图像" onclick="readAsDataURL()" />
    <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />
    <input type="button" value="读取文本文件" onclick="readAsText()" />
</p>
<div id="result" name="result"></div>

Run code

Cut to clipboard

文章：上传base64图片到七牛云存储发表时间：2017-06-08, 19:45:25

展开↯

#¹³⁵⁷

作者：广西南宁市

拖曳图片

<div id="box" style="background:red;width:300px;height:300px;"></div>
<script>
var box=document.getElementById('box');
// box为被拖放的区域
box.addEventListener('dragover', function (e) {
  e.preventDefault(); // 必须阻止默认事件
}, false);

box.addEventListener('drop', function (e) {
  e.preventDefault(); // 阻止默认事件
  var file = e.dataTransfer.files[0]; //获取文件
  // code
	// file为前面获得的
	var url = window.URL.createObjectURL(file);
	var img = new Image;
	img.src = url;
	// 加到dom
	console.log(url);
  
}, false);

</script>

Run code

Cut to clipboard

文章：上传base64图片到七牛云存储发表时间：2017-06-08, 19:44:02

展开↯

#¹³⁵⁸

作者：广西南宁市

给一个div绑定两个动画效果
我所需要的效果是 —— 下拉刷新时的旋转图标，旋转一周由无到有，再继续无限旋转。
也就是给它绑定两个动画，一是图标旋转，透明度由0变为1，二是图标无限旋转。

下面是代码（为了避免图片引入，旋转图标用了其他代替）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>
    <span>></span>
  </div>
</body>
<style>
  /*这些是基础样式*/
div span {
  display: block;
  width: 30px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  margin: 10% auto;
  border-radius: 50%;
  font-size: 20px;
  color: #ffffff;
  background: #8CCC66;
}
  /*下面是动画样式*/
div span {
  animation-name:animation1, animation2;    /*绑定到选择器的动画名称*/
  animation-duration:1s, 1s;                /*完成动画所花费的时间*/
  animation-timing-function:linear, linear; /*动画的速度曲线*/
  animation-delay:0, 1s;                    /*动画开始之前的延迟*/
  animation-iteration-count:1, infinite;    /*动画应该播放的次数 infinite是无限循环*/
}
@-webkit-keyframes animation1 {
  0%{-webkit-transform:rotate(0);opacity: 0;}
  50%{-webkit-transform:rotate(180deg);opacity: .3;}
  100%{-webkit-transform:rotate(360deg);opacity: 1;}
}
@keyframes animation1 {
  0%{transform:rotate(0);opacity: 0;}
  50%{transform:rotate(180deg);opacity: .3;}
  100%{transform:rotate(360deg);opacity: 1;}
}
@-webkit-keyframes animation2 {
  0%{-webkit-transform:rotate(0)}
  50%{-webkit-transform:rotate(180deg)}
  100%{-webkit-transform:rotate(360deg)}
}
@keyframes animation2 {
  0%{transform:rotate(0)}
  50%{transform:rotate(180deg)}
  100%{transform:rotate(360deg)}
}
</style>
</html>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2017-06-08, 11:42:33

展开↯

#¹³⁵⁹

作者：广西南宁市

伪元素几种用法

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>伪元素</title>
</head>
<body>
<style>
	.trangle {
		content: " ";
		width: 0;
		height: 0;
		border: 10px solid transparent;
		border-top-color: #333;
	}
</style>
<h3>三角形下拉箭头</h3>
<div class="trangle"></div>
<style>
	.dialog {
		position: relative;
		width: 150px;
		height: 36px;
		border: black 1px solid;
		border-radius: 5px;
		background: rgba(245, 245, 245, 1)
	}
	
	.dialog:before, .dialog:after {
		content: "";
		position: absolute;
		top: 8px;
		width: 0;
		height: 0;
		border: 6px transparent solid;
	}
	
	.dialog:before {
		left: -12px;
		border-right-color: rgba(0, 0, 0, 1);
	}
	
	.dialog:after {
		left: -11px;
		border-right-color: rgba(245, 245, 245, 1);
	}
</style>
<h3>对话框的三角形</h3>
<div class="dialog"></div>
<style>
	.mask-box {
		width: 300px;
		height: 200px;
		margin-top: 20px;
		padding: 20px;
		background: url(http://sjbz.fd.zol-img.com.cn/t_s320x510c/g5/M00/00/04/ChMkJ1fJWJyIQQ3LAAZwxw7cwswAAU-KQJ6sCQABnDf642.jpg) #FB5E23;
	}
	
	.mask-box .mask {
		position: relative;
		width: 100%;
		height: 100%;
	}
	
	.mask-box .mask:before {
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, .5);
	}
	
	.mask-box .mask span {
		display: block;
		position: inherit;
		z-index: 1;
		padding-top: 90px;
		text-align: center;
		font-weight: 900;
	}
</style>
<h3>遮罩层</h3>
<div class="mask-box">
	<div class="mask">
		<span>遮罩层效果</span>
	</div>
</div>
<style>
	.effect {
		position: relative;
		display: inline-block;
		margin-left: 30px;
		padding: 10px;
		font-size: 30px;
	}
	
	.effect:hover::before, .effect:hover::after {
		position: absolute;
	}
	
	.effect:hover::before {
		content: "\5B";
		left: -20px;
	}
	
	.effect:hover::after {
		content: "\5D";
		right: -20px;
	}
</style>
<h3>符号-动态效果</h3>
<div class="effect">鼠标悬停看效果</div>
</body>
</html>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2017-06-08, 11:38:48

展开↯

#¹³⁶⁰

作者：广西南宁市

图片替换onerror

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>onerror</title>
</head>
<body>
<p>这是没写图片路径的</p>
<img src=""  alt="加载失败">
<p>这是替代处理的</p>
<img src="" onerror="nofind()" alt="加载失败">
<script type="text/javascript">
	function nofind(){

var img=event.srcElement;

img.src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1496852181750&di=eb61cfabeed9ba05aa50803fa8d6bc3c&imgtype=0&src=http%3A%2F%2Fmvimg1.meitudata.com%2F56251eda8fc951992.jpg";

img.onerror=null; //控制不要一直跳动，如果不置空则在替代图片不存在时会一直执行，最后报错，死循环

}
</script>
</body>
</html>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2017-06-08, 11:36:35

展开↯

#¹³⁶¹

作者：广西南宁市

在乌镇世界互联网大会上，在谈到商业模式，马云说，阿里巴巴不是电商公司，是帮助电商公司，阿里要做的是两件事，一是培养更多的京东，二是让京东挣钱。

文章：马云、马化腾、李彦宏、张朝阳、雷军们的高考往事发表时间：2017-06-08, 10:43:44

展开↯

#¹³⁶²

作者：广西南宁市

“互联网大佬的高考往事”，每年都特么看一遍，真是日了狗。

文章：马云、马化腾、李彦宏、张朝阳、雷军们的高考往事发表时间：2017-06-08, 10:36:41

展开↯

#¹³⁶³

作者：广西南宁市

也就是说冒泡当且仅当存元素之间存在包含关系时才会发生。那么，如果用z-index使元素重叠，这种情况下click、mouseover等事件会不会发生冒泡？

#,广西南宁市,2017-06-08,09:34:50, 肯定不会发生了~　z-index 也只是让你看起来像是重叠。。代码里面还不是一堆div，看代码你能看出重叠么。。

#,广西南宁市,2017-06-08,09:36:51, 而且，阻止事件冒泡使用js 自带的event.stopPropagation() 就好了。没有必要自己写函数

#,广西南宁市,2017-06-08,09:37:03, DOM事件流会不会对后来加入的事件起作用，就像jquery里面的delegate()

文章：JavaScript事件冒泡简介及应用发表时间：2017-06-08, 09:34:39

展开↯

#¹³⁶⁴

作者：广西南宁市

事件委托其实就是利用了事件捕获原理。

文章：JavaScript事件冒泡简介及应用发表时间：2017-06-08, 09:35:06

展开↯

#¹³⁶⁵

作者：广西南宁市

base64图片上传

首先来看一下HTML5的FileReader对象

方法

方法名参数描述
readAsBinaryString file 将文件读取为二进制编码
readAsText file,[encoding] 将文件读取为文本
readAsDataURL file 将文件读取为DataURL
abort (none) 终端读取操作
接口事件

事件描述
onabort 中断
onerror 出错
onloadstart 开始
onprogress 正在读取
onload 成功读取
onloadend 读取完成，无论成功失败
下面是实现

javascript

function readAsDataURL(m_this,id){
      if (typeof m_this.files == 'undefined' || typeof FileReader == 'undefined') {
            alert('当前浏览器不支持图片上传，请改用IE10以上或chrome等最新浏览器。');
            return false;
      }

      if(!/image\/\w+/.test(m_this.files[0].type)){  
          alert("请上传图片！");  
          return false;  
      } 

      var reader = new FileReader();
      reader.onload = function(e) {
            //this.result 返回结果
            $(id).attr('src',this.result);
            //把结果放在img对象中，以备他用    
            var img = new Image();
            img.src = result;
      }
      reader.readAsDataURL(m_this.files[0]); 
}

//调用
$('#inputFile').on('change',function(){
    var m_this = this;
    readAsDataURL(m_this,'#ImgPr');                       
})

Run code

Cut to clipboard

html

<img id="ImgPr" src=""/>        
<input type="file" class="" id="inputFile" >

Run code

Cut to clipboard

文章：谷歌浏览器输入框文本框粘贴图片网络图片和截图发表时间：2017-06-08, 09:24:39

展开↯

#¹³⁶⁶

作者：广西南宁市

base64编码的图片上传到服务器

function base64_upload($base64) {
    $base64_image = str_replace(' ', '+', $base64);
    //post的数据里面，加号会被替换为空格，需要重新替换回来，如果不是post的数据，则注释掉这一行
    if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image, $result)){
        //匹配成功
        if($result[2] == 'jpeg'){
            $image_name = uniqid().'.jpg';
            //纯粹是看jpeg不爽才替换的
        }else{
            $image_name = uniqid().'.'.$result[2];
        }
        $image_file = "./upload/test/{$image_name}";
        //服务器文件存储路径
        if (file_put_contents($image_file, base64_decode(str_replace($result[1], '', $base64_image)))){
            return $image_name;
        }else{
            return false;
        }
    }else{
        return false;
    }
}

Run code

Cut to clipboard

文章：谷歌浏览器输入框文本框粘贴图片网络图片和截图发表时间：2017-06-08, 09:19:45

展开↯

#¹³⁶⁷

作者：广西南宁市

简单的html5 File base64 图片上传

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>简单的html5 File测试 for pic2base64</title> 
<style> 
</style> 
<script> 
window.onload = function(){ 
    var input = document.getElementById("demo_input"); 
    var result= document.getElementById("result"); 
    var img_area = document.getElementById("img_area"); 
    if ( typeof(FileReader) === 'undefined' ){
        result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！"; 
        input.setAttribute('disabled','disabled'); 
    }else{
        input.addEventListener('change',readFile,false);
    } 
}
function readFile(){
    var file = this.files[0]; 
    //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件   
    if(!/image\/\w+/.test(file.type)){
        alert("请确保文件为图像类型"); 
        return false; 
    }
    var reader = new FileReader(); 
    reader.readAsDataURL(file); 
    console.log();
    reader.onload = function(e){ 
            result.innerHTML = this.result; 
            img_area.innerHTML = '<div class="sitetip">图片img标签展示：</div><img src="'+this.result+'" alt=""/>'; 
    }
} 
</script> 
</head>  
<body> 
    <form action="file.php" method="post">
<input type="file" value="sdgsdg" id="demo_input" /> 
<textarea name="img" id="result" rows=30 cols=300></textarea> 
<p id="img_area"></p> 
<input type="submit" value="提交">
</form>
</body> 
</html>

Run code

Cut to clipboard

服务器代码：

<?php
$base64_url=$_POST['img'];
$base64_body = substr(strstr($base64_url,','),1);
$data= base64_decode($base64_body );
file_put_contents('1.jpg',$data);
//或$image = imagecreatefromstring($data);
 ?>

Run code

Cut to clipboard

文章：谷歌浏览器输入框文本框粘贴图片网络图片和截图发表时间：2017-06-08, 09:15:34

展开↯

#¹³⁶⁸

作者：广西南宁市

html5将图片转换base64进行上传、应该能解决微信内置浏览器上传图片

function readFile(obj){ 
        var file = obj.files[0]; 	
        //判断类型是不是图片
        if(!/image\/\w+/.test(file.type)){   
                alert("请确保文件为图像类型"); 
                return false; 
        } 
        var reader = new FileReader(); 
        reader.readAsDataURL(file); 
        reader.onload = function(e){ 
                alert(this.result); //就是base64
 
        } 
} 

<input type="file"  id="picFile" onchange="readFile(this)" />

Run code

Cut to clipboard

文章：谷歌浏览器输入框文本框粘贴图片网络图片和截图发表时间：2017-06-08, 09:14:04

展开↯

Records:2805 72/148 «‹68 69 70 71 72 73 74 75 76 ›»