<!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. android平台菜单返回键监听

    //声明 void onKeyReleased(EventKeyboard::KeyCode keyCode, Event* event); //实现 //按键控制(检测onKeyReleased有反 ...

  2. 线关节(Line Joint)

    package{ import Box2D.Common.Math.b2Vec2; import Box2D.Dynamics.b2Body; import Box2D.Dynamics.Joints ...

  3. 使用命令行编译as文件成swf

    设置环境变量到flex sdk的目录下.如:D:\Program Files\Adobe Flash Builder 4.5\sdks\flex_sdk_4.6\bin 找到flex-config.x ...

  4. 使用ADO对象添加、修改、删除数据

    使用ADO对象对数据库中的数据进行添加.修改和删除等操作.首先创建一个ADO类,通过ADO类连接数据库,并打开记录集.例如,使用ADO对象添加.修改.删除数据,程序设计步骤如下:(1)创建一个基于对话 ...

  5. boost之词法解析器spirit

    摘要:解析器就是编译原理中的语言的词法分析器,可以按照文法规则提取字符或者单词.功能:接受扫描器的输入,并根据语法规则对输入流进行匹配,匹配成功后执行语义动作,进行输入数据的处理. C++ 程序员需要 ...

  6. springmvc传递json数据到前台显示

    需要两个包 jackson-core-asl, jackson-mapper-asl controller @RequestMapping(value="/findEduList" ...

  7. 解读QML之二

    QML文档 QML文档是用QML语法组成的字符串.一个文档定义了一个QML对象类型.文档以”.qml”最为后缀,可以保存在本地和网络上,可以使用代码生成.一 个在文档中定义的对象类型的实例,也可以使用 ...

  8. RTC-高效率实现TimerTicker编解码

    源:RTC-高效率实现TimerTicker编解码 嵌入式系统中时间是很重要的,在以往的系统中设计者常常使用一种叫RTC的专用芯片来维持时间,这种芯片种类很多接口形式也很多,如常用的DS1302.PC ...

  9. Server对象

    Server是服务器对象,定义了一个与Web服务器相关的类,用于访问服务器上的资源. 属性 MachineName   获取服务器的计算机名.    返回本地计算机的名称 ScriptTimeout  ...

  10. check_partition_aft_merge.sql

    spool ./05_check_partition_aft_merge.log @/tmp/rda/chk_freets set echo on feedback on set pagesize 4 ...