用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 ...
随机推荐
- 在 CentOS 下手工安装 Docker v1.1x
Docker在 centos 6.x 下面默认最新的版本是1.7, 然而这个并不符合我的实际需求, 尤其我需要 docker-compose 来作为编配工具部署swarm, 所以我只有手工安装了. 首 ...
- Microservices with Spring Boot
找到一套比较不错的Spring Boot/Cloud入门教程,推荐一下. https://dzone.com/users/1041459/ranga_pec.html
- SPOJ 694 Distinct Substrings/SPOJ 705 New Distinct Substrings(后缀数组)
Given a string, we need to find the total number of its distinct substrings. Input T- number of test ...
- Python-期末练习
1.骑车与走路:我们的校园很大很大很大大大大大……,骑个自行车去办事会很快,比如取个快递了,到其他宿舍楼找个同(nv)学(you)了.但实际上,并非去办任何事情都是骑车快,因为骑车总要找车.开锁.停车 ...
- Thunder团队第一周 - Scrum会议5
本节内容: 工作照片 会议时间 会议地点 会议内容 Todo list 燃尽图 Scrum会议5 小组名称:Thunder 项目名称:爱阅app Scrum Master:邹双黛 工作照片: 参会成员 ...
- unordered_map(hash_map)和map的比较
测试代码: #include <iostream> using namespace std; #include <string> #include <windows.h& ...
- 《学习OpenCV》课后习题解答2
题目:(P104) 创建一个拥有三个通道的二维字节类型矩阵,大小为100*100,并将所有值赋为0.通过函数cvPtr2D将指针指向中间的通道("绿色").以(20,5)与(40, ...
- jconsole工具监控java运行情况
jconsole是jdk自带的工具.所以要先安装jdk 1.jconsole工具的路径: 通过which jconsole来查看 /usr/local/jdk1.7.0_79/bin/jconsol ...
- 分享几个.Net计划任务组件
Quartz http://www.quartz-scheduler.net/ Hangfire http://hangfire.io/ Install-Package Hangfire 使用OWIN ...
- 设置启动窗体Program.cs文件
using System; using System.Collections.Generic; using System.Linq; using System.Windows.Forms; names ...