JS——图片预览功能
<script type="text/javascript">
function DisplayImage(fileTag) {
document.getElementById('viewfile').value = fileTag.value;
fileTag.style.display = 'none';
var allowExtention = ".jpg.png.gif.JPG.PNG.GIF";
var extentionArr = fileTag.value.split('.');
var extention = extentionArr[extentionArr.length - 1];
if (!(allowExtention.indexOf(extention) > -1)) {
alert("请选择图片!");
} else {
//for adveced broswer(the newest ie,chrome,ff)
if (typeof (FileReader) !== "undefined") {
var reader = new FileReader();
reader.readAsDataURL(fileTag.files[0]);
reader.onload = function (e) {
document.getElementById("img_1").setAttribute("src", e.target.result);
}
} else {
//for(ie6)
document.getElementById("img_1").setAttribute("src", fileTag.value);
}
}
}
</script>
JS——图片预览功能的更多相关文章
- JS 图片预览功能
<script type="text/javascript"> function DisplayImage(fileTag) { document. ...
- 如何通过js实现图片预览功能
一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- H5图片预览功能
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 原生JS实现图片预览功能
html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...
- 原生js实现ajax的文件异步提交功能、图片预览功能.实例
采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...
- JS 上传图片 + 预览功能(一)
JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...
- HTML5实现图片预览功能
两种方式实现 URL FileReader Index.jsp文件 <%@page contentType="text/html" pageEncoding="UT ...
- vue.js 图片预览
Vue.js的图片预览的插件还是不少,但是找了半天还是没找到跟现在项目里能用得很顺手的,其实项目里图片预览功能很简单,点击放大,能双指缩放就可以了.部分vue.js的图片预览库都需要把图片资源单独拿出 ...
- 自定义type为file型input控件+该控件具有本地图片预览功能
最近的一个项目需求是写一个type为filex型的input控件,这个控件: 第一,要自定义样式: 第二,要能直接在本地预览上传的图片: 第三,要能检测图片的尺寸是否符合要求. 故综合网上的资源写了下 ...
随机推荐
- hdoj1260 Tickets (简单DP)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1260 思路: 很简单的DP题,状态方程也比较容易想到,用f[i]表示到第i个人所耗的最短时间,详见代码 ...
- 第七章 二叉搜索树(d4)AVL树:(3+4)-重构
- monkey初接触
第一次听说monkey,根本不知道是什么东西,脑海里就一个印象,很厉害的自动化测试工具,可是体验了一下,似乎不是那么回事... 一.Monkey 是什么? monkey就是SDK中附带的一个工具. 二 ...
- Java的三种多线程
项目结构 继承Thread类 /* * Thread类实现了Runnable接口 */ public class MyThread extends Thread { @Override public ...
- jquery 动态添加的代码不能触发绑定事件
今天发现jQuery对动态添加的元素不触发事件,比如blur.click事件等 参考文章证明了我的结论,并给出了原因及解决方案 原因:程序找不到动态添加的节点. 解决方案:在绑定父元素后的子元素 $( ...
- 各种replace待续
http://blog.163.com/chenjie_8392/blog/static/439339842010513128139/
- SQL2000清除SQL日志
1.打开查询分析器,输入命令DUMP TRANSACTION 数据库名 WITH NO_LOG2.再打开企业管理器--右键你要压缩的数据库--所有任务--收缩数据库--收缩文件--选择日志文件--在收 ...
- Hadoop新手学习指导
对于我们新手入门学习hadoop大数据存储的朋友来说,首先了解一下云计算和云计算技术是有必要的.下面先是介绍云计算和云计算技术的: 云计算,是一种基于互联网的计算方式,通过这 ...
- sqlserver 日期格式化
Sql Server 中一个非常强大的日期格式化函数Select CONVERT(varchar(100), GETDATE(), 0): 05 16 2006 10:57AMSelect CONVE ...
- Linux 添加硬盘
一.简介 本文介绍为Linux 添加硬盘的基本方法,同时适用于为虚拟机添加硬盘的情况. 二.添加小于2T的硬盘 1)分区 fdisk /dev/hda 2)建立文件系统 3)设置开机自动挂载磁盘 ...