<!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("fielinput");
        var txshow = document.getElementById("txshow");
        if (typeof (FileReader) === 'undefined') {
            result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！";
            input.setAttribute('disabled', 'disabled');
        } else {
            input.addEventListener('change', readFile, false);
            txshow.onclick = function () { input.click(); }
        }

}
    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) { txshow.src = this.result; alert(this.result); }

}

</script>
</head>
<body>

<input type="file" id="fielinput" >
<img id="txshow" style="width:100px;height:100px;"/>
</body>
</html>

JS input file 转base64 JS图片预览的更多相关文章

  1. input file样式修改，图片预览删除功能

    本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这 ...

  2. 浅谈简单实现file控件的图片预览，裁剪和上传。

    1.图片预览之FileReader对象    FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用File或Blob对象指定要读取的文件或数据 ...

  3. 本地与在线图片转Base64及图片预览

    查看效果:http://sandbox.runjs.cn/show/tgvbo9nq 本地图片转Base64(从而可以预览图片): function localImgLoad() { var src ...

  4. js获取base64格式图片预览上传并用php保存到本地服务器指定文件夹

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  5. JS实现的图片预览功能

    之前的博文有实现过图片上传预览,但那种方法是预览时就将图片上传,会产生很大的浪费空间.找到了之前有人写的用JS实现的图片预览,就说用js将上传的图片显示,上传代码在之前的博文中有写到. 以下是实现的代 ...

  6. 【Js应用实例】图片预览

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 一段上传图片预览JS脚本,Input file图片预览的实现

    在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意.要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预 ...

  8. JS魔法堂之实战：纯前端的图片预览

    一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...

  9. 适用于各浏览器支持图片预览，无刷新异步上传js插件

    文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...

随机推荐

  1. Linux学习 -- 软件包管理

    1 软件包类型 源码包 脚本安装包  install.sh  不常用 二进制包(rpm包.系统默认包) RedHat -- rpm包 Debian,Ubuntu -- beb包 2 RPM包命令管理 ...

  2. CSS3线性渐变

    万恶的IE!!! <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  3. 3个普通IO识别22个按键试验（转）

    源:http://www.amobbs.com/forum.php?mod=viewthread&tid=2243715 吸取各位前辈的经验,将之前二极管用量多的问题优化一下,目前不用二极管能 ...

  4. myeclipse连接hadoop集群编程及问题解决

    原以为搭建一个本地编程测试hadoop程序的环境很简单,没想到还是做得焦头烂额,在此分享步骤和遇到的问题,希望大家顺利. 一.要实现连接hadoop集群并能够编码的目的需要做如下准备: 1.远程had ...

  5. MJRefresh

    automaticallyChangeAlpha 下拉或上拉时,文字颜色逐渐加深

  6. 小红的难题<递推>

    题意:五个数:N,x,y,A,B;N是台阶总数,x,y是每步可以走x或者y步,但是一定要走到A,B台阶上. 思路:学长给的题解,递推,稍微优化一点. >重点在递推 #include<cst ...

  7. FOJ 2206 函数求解

    水题 /* *********************************************** Author :Zhou Zhentao Email :774388357@qq.com C ...

  8. php的autoload机制

    php5版本中,当你尝试使用一个未定义的类或者接口时,会自动调用__autoload()函数 例如1 <?php function __autoload($class_name){ includ ...

  9. hibernate---一对一单向外键关联--XML

    Student.java: package com.bjsxt.hibernate; public class Student { private int id; private String nam ...

  10. Android 4.0 ICS SystemUI浅析——StatusBar结构分析

    Android 4.0 ICS SystemUI浅析——StatusBar结构分析 分类: Android2012-06-30 14:45 23687人阅读 评论(8) 收藏 举报 androidsi ...