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控件,这个控件: 第一,要自定义样式: 第二,要能直接在本地预览上传的图片: 第三,要能检测图片的尺寸是否符合要求. 故综合网上的资源写了下 ...
随机推荐
- shell获取文件行数
获取文件行数: echo `cat $file | wc -l` 获取文件中不重复的行数(去重后) echo `awk '{$1="";print $0;}' $file_tel ...
- jQuery1.9(辅助函数)学习之—— jQuery.param( obj ); 编辑
jQuery.param( obj ); 返回一个String 描述: 创建一个数组或对象序列化的的字符串,适用于一个URL 地址查询字符串或Ajax请求. jQuery.param( obj ); ...
- 子类重载父类的方法“parent:方法名”
在PHP中不能定义重名的函数,也包括不能再同一个类中定义重名的方法,所以也就没有方法重载.单在子类中可以定义和父类重名的方法,因为父类的方法已经在子类中存在,这样在子类中就可以把从父类中继承过来的方法 ...
- ThinkPHP内置函数详解D、F、S、C、L、A、I
单字母函数D.F.S.C.L.A.I 他们都在ThinkPHP核心的ThinkPHP/Mode/Api/functions.php这个文件中定义. 下面我分别说明一下他们的功能: D() 加载Mode ...
- python 微信推送模板消息
#!/usr/bin/env python #-*- coding: utf-8 -*- import httplib import json import MySQLdb #从数据库中获取acces ...
- django 模板视图,表单视图,各种视图
Generic editing views¶ The following views are described on this page and provide a foundation for e ...
- UCOS 信号量
uCOS-II信号量OSSemCreate(0)和OSSemCreate(1)详解 (2014-04-22 18:04:18) 转载▼ 标签: it 分类: 操作系统 在ucos-II中,为了实现任务 ...
- 《转》JAVA动态代理(JDK和CGLIB)
该文章转自:http://www.cnblogs.com/jqyp/archive/2010/08/20/1805041.html JAVA的动态代理 代理模式 代理模式是常用的java设计模式,他的 ...
- 一步步教你如何源码编译Recovery
*1 准备Ubuntu作为您的操作系统,笔者的版本是12.04_amd64. *2 准备 Android 源码的编译环境,主要是安装一些编译用到的lib库,以及同步源码的一些工具 ,如GIT,CURL ...
- 【Android】通过Java代码替换TabHost中的drawableTop资源
在博客 http://blog.csdn.net/jueblog/article/details/11837445 中的Tab选项卡中, 点击相应的Tab选项,图标没有发生改变. 这些资源图片也没有尽 ...