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控件,这个控件: 第一,要自定义样式: 第二,要能直接在本地预览上传的图片: 第三,要能检测图片的尺寸是否符合要求. 故综合网上的资源写了下 ...
随机推荐
- hdoj1257(DP-LIS/贪心)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1257 方法1--贪心: 定义一个数组f[30005],由于题目没给数据量大小,故为了保险,开到最大(高 ...
- Android网络类型判断(2g、3g、wifi)
判断网络类型是wifi,还是3G,还是2G网络,对不同 的网络进行不同的处理,现将判断方法整理给大家,以供参考 说明:下面用到的数据移动2G,联通2G,联通3G,wifi我都已经测试过,暂时手上 ...
- Maven项目标准目录结构
-----------------------siwuxie095 Maven 项目标准目录结构 1.Maven 项目分为两种 (1)Java 项目 (2)Web 项目 2.对于 Java 项目 其中 ...
- 鼠标经过的图片高亮显示,其余变暗效果[xyytit]
初始代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- python学习——urlparse模块
urlparse模块: 1.urlparse() 具体程序及结果如下: >>> url = 'http://i.cnblogs.com/EditPosts.aspx?opt=1'&g ...
- vmware搭建vSAN提示磁盘不合格或者看不到磁盘的解决办法
1.如果磁盘不合格,或者在创建磁盘组的时候看不到该磁盘,一般的原因都是该磁盘有其他分区,可以使用下面的方法来解决 a.首先开启esxi主机的ssh功能 b.登陆到esxi的后台 c. ls /dev/ ...
- 把html标签转换为实体 dhtmlspecialchars
把html标签转换为实体/*可以处理数组中的代码,他们的作用是可以把一个数组或字符串中的字符转化为html实体,可以防止页面的跨站问题,那么我们看到他的转换就是将'&','"','& ...
- 演示Spring框架的JDBC模板的简单操作
1. 步骤一:创建数据库的表结构 create database spring_day03; use spring_day03; create table t_account( id int prim ...
- JTemplate学习(一)
使用模板绑定数据,可以嵌套循环 参考:http://www.doc88.com/p-6621237324128.html <!DOCTYPE html PUBLIC "-//W3C// ...
- 开发中经典sql总结
1.说明:显示文章.提交人和最后回复时间 select a.title,a.username,b.adddate ,(select max(adddate) from table where tabl ...