<!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);
reader.onload = function(e){
result.innerHTML = '<img src="'+this.result+'" alt=""/>';
img_area.innerHTML = '<div class="sitetip">图片img标签展示：</div><img src="'+this.result+'" alt=""/>';
}
}
</script>
</head>
<body>
<input type="file" value="sdgsdg" id="demo_input" />
<textarea id="result" rows=30 cols=300></textarea>
<p id="img_area"></p>
</body>
</html>

使用HTML5的File实现base64和图片的互转的更多相关文章

  1. base64和图片的互转（HTML5的File实现)

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  2. JS input file 转base64 JS图片预览

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. File控件选择图片的时候在Html5下马上预览

    页面HTML <div> <img src="@pic.Path" id="img" style="width:200px;heig ...

  4. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  5. 页面以base64输出图片

    <% //读取文件路径,输出base64 编码 System.IO.FileStream stream = System.IO.File.OpenRead(ViewBag.FilePath); ...

  6. 【HTML5+MVC4】xhEditor网页编辑器图片上传

    准备工作: 创建一个MVC项目中,添加好xhEditor插件 相关用法:http://www.cnblogs.com/xcsn/p/4701497.html 注意事项:xhEditor分为v1.1.1 ...

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

    前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(P ...

  8. 基于HTML5的可预览多图片Ajax上传

    一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...

  9. html5 文件系统File API

    前言: 在做浏览器上传图片的时候,一般采用form表单上传,这种上传无法预览图片,无法查看图片大小,无法知道图片的类型等等!那么在html5 File API提供了这些表单无法实现的功能,而且还支持拖 ...

随机推荐

  1. php变量判断为空的几种方法

    1.isset  主要用来判断变量是否被初始化过 注意:当使用isset来判断数组元素是否被初始化过时,它的效率比array_key_exists高4倍左右 2.empty  可以将值为 " ...

  2. Spring 4 官方文档学习（十二）View技术

    关键词:view technology.template.template engine.markup.内容较多,按需查用即可. 介绍 Thymeleaf Groovy Markup Template ...

  3. redis队列的实现

    redis中文官网:http://www.redis.cn/ 关于redis队列的实现方式有两种: 1.生产者消费者模式. 2.发布者订阅者模式. 详解: 1.生产者消费者模式. 普通版本: 比如一个 ...

  4. 关于 webapi ajax进度条信息设置

    1.Web.config 设置跨域 <httpProtocol> <customHeaders> <add name="Access-Control-Allow ...

  5. win7电脑共享VPN连接教程

    互通网络VPN服务器不限制连接数,如果仅仅是电脑连接的话有点浪费,如何只在笔记本电脑上设置一次VPN,然后手机.平板等都可以直接共享使用呢?为什么需要笔记本电脑,因为笔记本电脑内置的无线网卡可以设置w ...

  6. 组合（composition）与继承（inheritance）

    c++中一个重要的特点就是代码的重用,为了代码重用,有两个非常重要的手段,一个是继承,一个是组合 上面两种类的关系就分别是继承和组合.下面我们看一下代码示例: #ifndef USEFUL_H #de ...

  7. P2320 [HNOI2006]鬼谷子的钱袋

    洛谷2320 06湖南 鬼谷子的钱袋 来源 题目描述 鬼谷子非常聪明,正因为这样,他非常繁忙,经常有各诸侯车的特派员前来向他咨询时政.有一天,他在咸阳游历的时候,朋友告诉他在咸阳最大的拍卖行(聚宝商行 ...

  8. Android Studio项目结构

    我们创建了一个Android Project,打开就如下图所示:  我们选择Project视图,就会有以下的项目文档结构:  上面笔者标注的数字是接下来要讲解的内容. 我们先来看1: 我们创建Appl ...

  9. Magicodes.WeiChat——后台JS框架封装

    Magicodes.WeiChat同时也致力于提高后台开发效率,因此对在后台前端这块也做了一定的封装.我们先来说说主要的框架JS——mwc.js和mwc_elements.js.这两个JS文件位于Sc ...

  10. 你的联动够快够小吗——基于Telerik（ASP.NET平台）

    一.目的 这篇文章主要是以如何实现联动下拉为核心,其要原理是利用两个下拉控件.默认两个下拉均为未选择状态,并且 父下拉中存在数据,子下来中没有数据.只有当用户选择某一个父下拉中的某条数据后,子下拉中才 ...