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>
JS input file 转base64 JS图片预览的更多相关文章
- input file样式修改，图片预览删除功能
本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这 ...
- 浅谈简单实现file控件的图片预览，裁剪和上传。
1.图片预览之FileReader对象 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用File或Blob对象指定要读取的文件或数据 ...
- 本地与在线图片转Base64及图片预览
查看效果:http://sandbox.runjs.cn/show/tgvbo9nq 本地图片转Base64(从而可以预览图片): function localImgLoad() { var src ...
- js获取base64格式图片预览上传并用php保存到本地服务器指定文件夹
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- JS实现的图片预览功能
之前的博文有实现过图片上传预览,但那种方法是预览时就将图片上传,会产生很大的浪费空间.找到了之前有人写的用JS实现的图片预览,就说用js将上传的图片显示,上传代码在之前的博文中有写到. 以下是实现的代 ...
- 【Js应用实例】图片预览
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 一段上传图片预览JS脚本,Input file图片预览的实现
在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意.要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预 ...
- JS魔法堂之实战：纯前端的图片预览
一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...
- 适用于各浏览器支持图片预览，无刷新异步上传js插件
文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...
随机推荐
- Discuz登录慢、退出也慢的原因？
Discuz登录慢.退出也慢的原因? 2009-02-21 12:50:11 分类: 转载自:http://www.aiseminar.cn/bbs/thread-201-1-1.html 由于服务 ...
- jq模拟操作
1.常用模拟 trigger() $('#btn').trigger('click'); 当页面加载完,点击事件就会完成 上面也可以简写成:$('#btn').click(); 2.触发自定义事件 t ...
- opencv-jni -调试出错taking address of temporary [-fpermissive]
今天在进行代码往安卓平台移植时,IplImage *qImg=&(IplImage)dst1;报错taking address of temporary [-fpermissive] 百度了一 ...
- App installation failed There was an internal API error.
工程名为汉字的时候,真机调试会出现这种问题.模拟器没有问题. 如图: 解决办法:
- Hadoop集群搭建的密钥配置SSH实现机制的配置（2）
[hadoop@weekend110 ~]$ ssh-keygen -t rsa 用来生产密钥对 Generating public/private rsa key pair. Enter file ...
- 修改Python文件日志输出位置
Python logging模块介绍:http://blog.chinaunix.net/uid-26000296-id-4372063.html [root@fuel ~]# vi /var/lib ...
- 数据结构录 之 单调队列&单调栈。
队列和栈是很常见的应用,大部分算法中都能见到他们的影子. 而单纯的队列和栈经常不能满足需求,所以需要一些很神奇的队列和栈的扩展. 其中最出名的应该是优先队列吧我觉得,然后还有两种比较小众的扩展就是单调 ...
- ASP.NET MVC---自定义HtmlHelper方法
HtmlHelper方法是ASP.NET MVC中非常强大的特性,有了这个特性,我们就能更加随心所欲的定制自己的页面. 自定义自己的HtmlHelper方法通常有三种, 像是: 一.Razor语法 采 ...
- linux commands ---2 ,学习vim编辑器如何使用的方法。
vim /data/yst.txt 打开一个文件之后,然后在命令行模式下,输入:help 可以调出 vim 的帮助文档. 然后会进入: 然后就可以查阅具体的帮助文档了,再也不用再网上找一些零散的v ...
- ural1553 Caves and Tunnels
Caves and Tunnels Time limit: 3.0 secondMemory limit: 64 MB After landing on Mars surface, scientist ...