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控件,这个控件: 第一,要自定义样式: 第二,要能直接在本地预览上传的图片: 第三,要能检测图片的尺寸是否符合要求. 故综合网上的资源写了下 ...
随机推荐
- iOS开发中的MVC设计模式
我们今天谈谈cocoa程序设计中的 模型-视图-控制器(MVC)范型.我们将从两大方面来讨论MVC: 什么是MVC? M.V.C之间的交流方式是什么样子的? 理解了MVC的概念,对cocoa程序开发是 ...
- (原)anaconda 的安装与在pycharm中的版本切换
参考网页: http://continuum.io/blog/anaconda-python-3 http://conda.pydata.org/docs/intro.html#creating-py ...
- uva 10609 - Fractal
题目大意:给出A,B两个点的坐标,以及T,每次找到A.B的四等分点C,D,然后以AB/2为边长,C,D为顶点,构建一个等边三角形,E为另外一个顶点,然后再对C,E:E,D做同样的操作,直到构建的等边三 ...
- 《javascript设计模式》--接口
关于javascript设计模式书中的接口,记录如下 //TODO 增加了一个判断条件,可以只在生产环境中调用 接口var Interface = function(name,methods){ i ...
- asp.net运行机制图
(郑重提示:此图版权归广州传智播客老邹所有啊!!!!) 详细版
- PHP限制网页只能在微信内置浏览器中查看并显示
微信现在算是火了,围绕微信开发的应用也越来越多了,前段时间,自己公司需要,用PHP写了一个微信应用,为了防止自己辛苦写成的PHP应用被盗用,于是 通过PHP做了限制,只能在微信自带的浏览器中才能打开本 ...
- 获取当前页面的完整URL
PHP实现 #测试网址: http://localhost/blog/testurl.php?id=5 //获取域名或主机地址 echo $_SERVER['HTTP_HOST']."< ...
- C语言初学 测定各数据类型的长度
#include<stdio.h> #include<stdlib.h> int main() { int a,b; int i=0; printf("char:%d ...
- JS中的phototype是JS中比较难理解的一个部分
本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展.我们称B的原 ...
- 使用jquery 操作checkbox
checkbox 的全选与全不选以及获取选择的值. 效果: <!DOCTYPE html> <html lang="en"> <head> &l ...