通过Canvas及File API缩放并上传图片完整示例

<!DOCTYPE html> <html> <head> <title>通过Canvas及File API缩放并上传图片</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <…

通过Canvas及File API缩放并上传图片完整演示样例

创建一个只管的用户界面,并同意你控制图片的大小.上传到server端的数据,并不须要处理enctype为 multi-part/form-data 的情况.只一个简单的POST表单处理程序就能够了. 好了,以下附上完整的代码演示样例 Canvas简单介绍 canvas 是一个HTML5新增的DOM元素.同意用户在页面上直接地绘制图形,一般是使用JavaScript.而不同的格式标准也是不同的,比方SVG是光栅API(raster API) 而VML却是向量API(vector API).能够考…

通过Canvas及File API缩放并上传图片

原文地址:Resize an Image Using Canvas, Drag and Drop and the File API 示例地址:Canvas Resize Demo 原文作者:Dr. Tom Trenka 原文日期: 2013年8月6日翻译日期: 2013年8月8日 Tom Trenka 能为"我"的博客写一篇文章,对我来说是一个巨大的荣誉.Tom是Dojo框架的最初贡献者之一,也是我在SitePen公司的良师益友.我见证了他最顶级的天才能力,并且他总是第一个以前瞻性的…

[FILE API]利用Javascript上传图片

1.HTML结构 <label for="file-input">File:</label> <input type="file" id="file-input" /> /*<img src="" alt="" accept="image/*" style="max-width: 250px">*/ <img sr…

HTML5 file API加canvas实现图片前端JS压缩并上传

一.图片上传前端压缩的现实意义对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致上传失败风险. 最最重要的体验改进点:省略了图片的再加工成本.很多网站的图片上传功能都会对图片的大小进行限制,尤其是头像上传,限制5M或者2M以内是非常常见的.然后现在的数码设备拍摄功能都非常出众,一张原始图片超过2M几乎是标配,此时如果用户想把手机或相机中的某个得意图片…

【小月博客】用HTML5的File API做上传图片预览功能

前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(PS : 不得不承认我这个人有多懒,没有需求的时候我向来不主动去学习).移动端完全支持哦!已测试. 下面给大家看看代码吧怎么实现的第一:HTLM部分(这里不去做漂亮的样式了我们注重学习功能) <input type="file" id="fileElem" mul…

HTML5 File API — 让前端操作文件变的可能

前言在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成一些类似图片预览的功能.但是 File API 的出现,让这一切变成了可能. 跟着楼主由浅入深,了解下强大的 File API 吧. FileList FileList 对象针对表单的 file 控件.当用户通过 file 控件选取文件后,这个控件的 files 属性值就是 FileList 对象.…

HTML5 File API 全介绍

在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成一些类似图片预览的功能.但是 File API 的出现,让这一切变成了可能. 1.FileList 对象 FileList 对象针对表单的 file 控件.当用户通过 file 控件选取文件后,这个控件的 files 属性值就是 FileList 对象.它在结构上类似于数组,包含用户选取的多个文件.如果…

canvas学习之API整理笔记（二）

前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知识点的同时还会有一些酷炫的demo,保证看官们全程在线,毫无尿点,看完不会后悔,哈哈,一个耿直的笑^_^. 除此之外,关于canvas的一系列实例即将来袭!欢迎关注! 开始之前 var can = document.getElementById('canvas'); //创建一个画布 var ctx…

html5 文件系统File API

前言: 在做浏览器上传图片的时候,一般采用form表单上传,这种上传无法预览图片,无法查看图片大小,无法知道图片的类型等等!那么在html5 File API提供了这些表单无法实现的功能,而且还支持拖拽上传!现在我们开始学习.. 一.File Api 浏览器支持检测 File Api给js提供了以下几个接口来访问本地文件系统: 1.File - 单个文件:提供了诸如name.file size.mimetype(媒体类型)等只读文件属性.2.FileList - 一个类数组File对象集合:3.…

File API文件操作之FileReader二

上一篇说了FileAPI中FileReader的readAsText,这里继续上文,说说另外一个API readAsDataURL. 这个接口是将File或者Blob读成base64格式的字符串,然后直接挂在HTML5的元素上,例如img就可以直接使用. 实际用途可以是图片预览和图片剪裁,这里我将用来实现图片剪裁. 思路: 1. file api的FileReader实现本地图片预览 2. 用web api的拖拽功能来实现剪裁效果: 那么话不多说: html代码: <html> <he…

HTML5的File API读取文件信息

html结构: <div id="fileImage"></div> <input type="file" value="upload" id="fileInput"> <p id="fileInfo"></p> css样式: #fileImage{width: 300px;height: 300px; margin: 20px auto;back…

图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传

一 . 背景及效果当前互联网上传文件最多的就是图片文件了,但是传统web图片的截图上传需要:截图保存->选择路径->保存后再点击上传->选择路径->上传->插入. 图片文件上传也需要:选择路径再->上传->插入,步骤繁杂,互联网体验为王,如果支持截图粘贴上传.拖拽上传将大大提升体验. 当前知乎和github对现代浏览器均支持这两种特性,闲来无事就学习实现了一下,今天就说一说这个1kb插件实现什么功能,怎么使用和原理. 首先看一下插效果: 截图后直接粘贴上传. 拖…

File API 读取文件小结

简单地说,File API只规定怎样从硬盘上提取文件,然后交给在网页中运行的JavaScript代码. 与以往文件上传不一样,File API不是为了向服务器提交文件设计的. 关于File API不能做什么也非常值得注意.它不能修改文件,也不能创建新文件. 想保存任何数据,你可以通过Ajax把数据发送到服务器,或者把它保存在本地存储空间中. 取得文件使用input元素.将其type属性设置为file,这样是最常见的标准上传文本框隐藏的input元素.为了保证风格一致,可以把input元素隐藏…

File API 读取上传的文件

1, 在html 文档中,<input type="file"> 我们可以选择文件进行上传,但这时只能上传一个文件.如果加上multiple 属性,可以上传多个文件,上传多个文件时要按shift 或 ctrl进行选择. <input type="file" multiple id="file"> 2, file API 就是提供了一些接口来读取我们上传的文件.input 元素在js 就是一个对象,它有一个files属性…

Resumable.js – 基于 HTML5 File API 的文件上传

Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断重试直到程序完成.这允许上传到本地或服务器的网络连接丢失后能够自动恢复上传. 此外,它允许用户暂停,恢复,甚至恢复上传不失状态,因为只有目前上传块将被中止,而不是整个上传.Resumable.js 除了 HTML5 文件 API 意外,没有任何外部依赖.目前,这意味着支持仅限于 Firefox 4+…

使用 JavaScript File API 实现文件上传

概述以往对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情.虽然伴随着 Web 2.0 应用技术的不断发展,JavaScript 正在扮演越来越重要的角色,但是出于安全性的考虑,JavaScript 一直是无法访问本地文件的.于是,为了在浏览器中能够实现诸如拖拽并上传本地文件这样的功能,我们就不得不求助于特定浏览器所提供的各种技术了.比如对于 IE,我们需要通过 ActiveX 控件来获取对本地文件的访问能力,而对于 Firefox,同样也要借助插件开发.由于不同浏览器的技术实现不尽相同…

[Node.js] 使用File API 异步上传文件

原文地址:http://www.moye.me/2014/11/05/html5-filereader/ 最近在做一个网盘的项目,不出意外的涉及到大文件的上传,那么问题来了:如何实时的显示文件上传的进度? 问题分解似乎是老生常谈,几年前我做过类似的功能模块(基于.NET平台),方案思路: 基于表单提交 Server端根据上传文件分配标识符(GUID)并进行流式读取 Browser端发起Ajax拉取文件上传状态这种方案的问题是受制于文件大小(最大2G).所谓文件上传进度的实时显示,个人觉得比较…

HTML5 File API

1.File API 一直以来,不能直接访问用户计算机中的文件都是web应用开发当中的一大障碍.File API的宗旨是为web开发人员提供一种安全的方式,以便在客户端访问用户计算机中的文件,并更好的对这些文件进行操作. HTML5在DOM中为文件输入元素添加了一个files的集合,在通过文件输入字段选择了一个或多个文件时,files集合中将包含一组File对象 ,每个File对象对应着一个文件,每个File对象都有下列只读对象. name:本地文件系统中的文件名. size:文件的字节大小 t…

HTML5 File api 实现断点续传

目前市场上大多数的网站的断点上传都是需要安装浏览器插件的,本文就针对高级浏览器的环境下,通过HTML5 File api实现断点上传进行说明一.实现文件多选 HTML5的<input>新增了"multiple"属性,该属性可接受多个值的文件上传字段 <input type="file" multiple="multiple" name="file" id="file"> 添加了该属…

HTML5 file api读取文件的MD5码工具

1.工具的用途:用HTML5 file api读取文件的MD5码.MD5码在文件的唯一性识别上有很重要的应用,业内常用MD5进行文件识别.文件秒传.文件安全性检查等: 2.适用性:IE.Chrome皆兼容: 3.缺陷:当上传大文件时,需要较长的时间才能扫描出MD5码: 4.关于引用:其中引用了js文件(spark-md5.js) <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo…

通过 File API 使用 JavaScript 读取文件

原文地址:http://www.html5rocks.com/zh/tutorials/file/dndfiles/ 简介 HTML5 终于为我们提供了一种通过 File API 规范与本地文件交互的标准方式.为了举例说明其功能,可使用 File API 在向服务器发送图片的过程中创建图片的缩略图预览,或者允许应用程序在用户离线时保存文件引用.另外,您可以使用客户端逻辑来验证上传内容的 mimetype 与其文件扩展名是否匹配,或者限制上传内容的大小. 该规范通过“本地”文件系统提供了多种文件访…

File API简介

File API让我们可以创建文件,存储在本地文件系统的一个安全沙箱里,亦可以从其他来源读取文件,并对其进行操作 Web应用通过requestFileSystem方法来访问本地文件系统,该方法是全局的: requestFileSystem(type, size, successCallback, opt_errorCallback); 第一个参数表示存储的类型,有两个值可以选择,TEMPORARY或 PERSISTENT.使用TEMPORARY的话,存储的数据会由浏览器自行决定何时清除.…

File API文件操作之FileReader

近来研究点对点的文件传输,想到一种方案FileReader+WebRtc. 当我看到FileReader的时候,哎呀,不错的东西啊,仔细一看属于File API,或者叫做Web API. File API 官方的文档 File API MDN的Web APIs|MDN MDN的 web引用中使用文件其主要由,FileList,Blob,File,FileReader等组成. 这里我们主要探讨一下FileReader,先看看官方网站的接口定义 [Constructor, Exposed=Win…

C# File API

[C# File API] 1.System.IO.File Provides static methods for the creation, copying, deletion, moving, and opening of a single file, and aids in the creation of FileStream objects. 1)File.CreateText Creates or opens a file for writing UTF-8 encoded text…

DevExpress v18.1新版亮点——Office File API篇

用户界面套包DevExpress v18.1日前正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了DevExpress Office File API v18.1 的新功能,快来下载试用新版本!点击下载>> PDF Document API DirectX Rendering (Beta) 在新版本中,PDF Viewer for WinForms和PDF Document API都支持DirectX渲染: 常见使用场景的性能提升. 高质量的文本渲染(GDI使用整数坐标进行字形…

php 下 html5 XHR2 + FormData + File API 上传文件

FormData的作用: FormData对象可以帮助我们自动的打包表单数据,通过XMLHttpRequest的send()方法来提交表单.当然FormData也可以动态的append数据.FormData的最大优点就是我们可以异步上传一个二进制文件. 例1如下: <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>…

HTML5 File API解读

1,概述 Web应用应该具备处理广泛用户输入问题的能力,例如在Web富应用中,用户希望上传文件到服务器.File API定义了访问文件的基本操作途径,包括文件.文件列表集.错误处理等,同时,File API还定义了描述文件异步处理进程中的一些元数据.接下来,我们一起看看File的应用. 2,FileList接口接口描述: interface FileList { getter File? item(unsigned long index); readonly attribute unsigne…

Java NIO2 File API介绍

Introduction to the Java NIO2 File API GitHub NIO2中的文件API是Java 7附带的Java平台的主要新功能之一,特别是新的文件系统API的一个子集以及Path APIs. 在用户的主目录(home directory)下操作,使得对于所有的操作系统都是有效的.[内部是如何实现的呢???] private static String HOME = System.getProperty("user.home"); Files类是Java.…

phonegap file api

https://github.com/chrisben/imgcache.js/tree/master/examples 1.FILE API file api最大的两个功能是download和upload,download最常用的需求是把服务器的图片本地化到手机上,实现离线web app也可以浏览图片的功能.upload可以实现把本地图片上传到服务器的需求,如果项目涉及到发布图片,修改头像等需求,这个API就必须用到了 FileTransfer.download 经验: download服务器…

【通过Canvas及File API缩放并上传图片完整示例】的更多相关文章