JS input file 转base64 JS图片预览

<!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>

时间: 2024-10-07 15:11:25

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

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

查看效果:http://sandbox.runjs.cn/show/tgvbo9nq 本地图片转Base64(从而可以预览图片): function localImgLoad() { var src = this.files[0]; var self = $(this); var read = new FileReader(); read.onload = function(e) { var html = "<img src=" + e.target.result + "

JS实现的图片预览功能

之前的博文有实现过图片上传预览,但那种方法是预览时就将图片上传,会产生很大的浪费空间.找到了之前有人写的用JS实现的图片预览,就说用js将上传的图片显示,上传代码在之前的博文中有写到. 以下是实现的代码: body: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td heig

JS魔法堂之实战:纯前端的图片预览

一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服务器,接着就获取图片路径并赋值到img元素上.先不管文件异步提交的解决方案,就是服务端清理那些临时的预览图片已经增加不少工作量了. 偶然从MDN上找到纯前端图片预览的相关资料,经过整理后记录下来以便日后查阅. 二.准备功夫1──FileReader FileReader是HTML5的新特性,用于读取

常用js,解决 textarea换行,图片预览,等待加载

/** 解决在textarea中输入的数据存入数据库后读到页面没有换行效果* textarea_info是显示在页面内容区域的class* 使用方法:直接在相应的区域加上class="textarea_info"* 在js中调用textarea_br()即可* */    function textarea_br(){        var element = $(".textarea_info");        element.each(function(){ 

利用js加载本地图片预览功能

直接上代码: 经测试,除safari6包括6以下不支持,其他均可正常显示. 原因:safari6不支持filereader,同时不能使用IE滤镜导致失效. fix: 可以利用canvas,解决safari6的问题 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> </head> <body> <div id="divPrevie

js本地图片预览代码兼容所有浏览器

html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id="imgHeadPhoto" src="www.niyuewo.com" style="width: 160px; height: 170px;border: solid 1px #d2e2e2;" /> </div> <a

兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/Headphoto/noperson.jpg" style="width: 160px; height: 170px;border: solid 1px #d2e2e2;" alt="" /> </div> <asp:FileUpload

js本地图片预览

<!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" > <meta http-equiv="Content-Type" c