用HTML5 File API 实现截图粘贴上传、拖拽上传
<!DOCTYPE html>
<html>
<head>
<title>test chrome paste image</title>
<style>
DIV#editable {
width: 400px;
height: 300px;
border: 1px dashed blue;
}
</style>
<script type="text/javascript">
window.onload = function () {
function paste_img(e) {
if (e.clipboardData.items) {
ele = e.clipboardData.items
for (var i = 0; i < ele.length; ++i) {
if (ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1) {
var blob = ele[i].getAsFile();
window.URL = window.URL || window.webkitURL;
var blobUrl = window.URL.createObjectURL(blob);
console.log(blobUrl);
var new_img = document.createElement('img');
new_img.setAttribute('src', blobUrl); document.getElementById('editable').appendChild(new_img);
convertImgToBase64(blobUrl, function (base64Img) {
// console.log(base64Img);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/ajax', true);
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.onreadystatechange = function () {
if (xhr.readyState == xhr.DONE && /^2\d{2}$/.test(xhr.status)) {
}
}
xhr.send(base64Img);//把body字符串作为请求体发送到服务器端
});
} }
} else {
alert('non-chrome');
}
}
document.getElementById('editable').onpaste = function () {
paste_img(event);
return false;
};
} function convertImgToBase64(url, callback, outputFormat) {
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'),
img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function () {
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL(outputFormat || 'image/png');
callback.call(this, dataURL);
canvas = null;
};
img.src = url;
}
</script>
</head>
<body>
<div id="non-editable">
<!--<img src="./1.jpg"/>-->
</div>
<div id="editable" contenteditable="true">
</div>
</body>
</html>
用HTML5 File API 实现截图粘贴上传、拖拽上传的更多相关文章
- 图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
一 . 背景及效果 当前互联网上传文件最多的就是图片文件了,但是传统web图片的截图上传需要:截图保存->选择路径->保存后再点击上传->选择路径->上传->插入. 图片 ...
- Resumable.js – 基于 HTML5 File API 的文件上传
Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...
- HTML5 file API加canvas实现图片前端JS压缩并上传
一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...
- HTML5 File API — 让前端操作文件变的可能
前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...
- [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)
人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...
- HTML5 File api 实现断点续传
目前市场上大多数的网站的断点上传都是需要安装浏览器插件的,本文就针对高级浏览器的环境下,通过HTML5 File api实现断点上传进行说明 一.实现文件多选 HTML5的<input>新 ...
- HTML5 file api读取文件的MD5码工具
1.工具的用途:用HTML5 file api读取文件的MD5码.MD5码在文件的唯一性识别上有很重要的应用,业内常用MD5进行文件识别.文件秒传.文件安全性检查等: 2.适用性:IE.Chrome皆 ...
- HTML5 File API 全介绍
在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成一些类 ...
- HTML5 File API的应用
HTML5 File API简介 HTML5File API协议族 Directories and System 文件系统和目录读取 FileWriter 写入文件 FileReader ...
随机推荐
- 浅谈JS-cookie,你是香甜可口的小点心吗?
引言: 想必大家一定听过或看过浏览器cookie,早在nokia雄霸天下.我们还不太明白浏览器的时候,cookie就已经悄悄地存在于浏览器的“设置选项”中了.当时它的用途仅仅是让你选择是否“清除”.年 ...
- 《javascript模式--by Stoyan Stefanov》书摘--字面量和构造函数
二.字面量和构造函数 1,能够使用对象字面量时,就没理由使用new Object构造函数 // 一个空对象var 0 = new Object();console.log( o.constructor ...
- 路由器如何设置上网(TP-LINK)
最近宿舍公用的网络一直不太稳定,正赶上毕业季,本来就打算自己买一台自用的路由器,于是我从一个毕业的师姐手里15RMB收了一台路由器,师姐还给了我一根5m的网线和两根全新15m的,感觉光网线就赚翻了. ...
- C语言 指针数组 多维数组
. 作者 : 万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/21402047 . 1. 地址算数运算示例 指针算数运算 ...
- alpha-4
前言 失心疯病源4 团队代码管理github 站立会议 队名:PMS 530雨勤(组长) 今天完成了那些任务 19:00~21:50 利用背景相减法完成背景构建与更新模块,查找关于blob更多的论文资 ...
- Alpha-1
前言 失心疯病源1 团队代码管理github 站立会议 队名:PMS 530雨勤(组长) 今天完成了那些任务 10:00~13:00 OpenCV环境配置,Matlab工具包下载 15:40~17:1 ...
- Firefox火狐浏览器 修改默认搜索引擎
如图:
- C#窗口文件双击打开时出错
出错原因: 1. 修改了该窗口文件的.Designer.cs文件中:#region Windows 窗体设计器生成的代码这里面的代码,导致运行不正常. 为了传递数据,我在构造函数中增加了传递的值. 需 ...
- 不清楚System.Diagnostics.Process.Start(e.LinkText); 的含义
using System; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms ...
- /proc/meminfo中meminfo的计算方法
/proc/meminfo里的可使用内存的计算没有那么简单,并不是简单的free和page cache的加和 free + pagecache 以此为基准 但是需要减去一些内存:首先要减去系统预留的内 ...