<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','
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;
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);
#1331
#1332
#1333
function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } }#1334
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);注: 字段"userfile"和"webmasterfile"的值都包含了一个文件.通过 FormData.append()方法赋给字段"accountnum"的数字被自动转换为字符(字段的值可以是一个Blob对象,一个File对象,或者一个字符串,剩下其他类型的值都会被自动转换成字符串).
在该例子中,我们创建了一个名为oMyForm的FormData对象,该对象中包含了名为"username", "accountnum", "userfile" 以及 "webmasterfile"的字段名,然后使用XMLHttpRequest的send()方法把这些数据发送了出去."webmasterfile"字段的值不是一个字符串,还是一个Blob对象.
#1335
拖拽主要用到两个事件 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);预览，主要是文件转换为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);file -> blob
// file为前面获得的 var url = window.URL.createObjectURL(file); var img = new Image; img.src = url; // 加到dom上传 需要用到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);如果图片上传前要修改，如对图片进行裁剪，旋转等操作（前端），一般是转化为canvas处理。
随后根据后台可能把canvas转成base64字符串上传或转成blob对象上传，
#1336
<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','
#1337
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');#1338
canvas转换为dataURL (从canvas获取dataURL)
var dataurl = canvas.toDataURL('image/png'); var dataurl2 = canvas.toDataURL('image/jpeg', 0.8);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); });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==');dataURL图片数据绘制到canvas
先构造Image对象，src为dataURL，图片onload之后绘制到canvas
var img = new Image(); img.onload = function(){ canvas.drawImage(img); }; img.src = dataurl;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; });不同的方法用于构造不同类型的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);#1339
<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>#1340
<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>#1341
我所需要的效果是 —— 下拉刷新时的旋转图标，旋转一周由无到有，再继续无限旋转。
也就是给它绑定两个动画，一是 图标旋转，透明度由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>#1342
<!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>#1343
<!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>#1344
#1345
#1346
#1347
#1348
首先来看一下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'); })html
<img id="ImgPr" src=""/> <input type="file" class="" id="inputFile" >#1349
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; } }