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控件,这个控件: 第一,要自定义样式: 第二,要能直接在本地预览上传的图片: 第三,要能检测图片的尺寸是否符合要求. 故综合网上的资源写了下 ...
随机推荐
- VMware安装Windows注意
安装Windows通用步骤,分区,重建分区表,重写MBR引导.安装即可. VMware安装Windows 如果进不了CM/ROM,在.vmx文件里: 加入一行:bios.forceSetupOnce ...
- python之文件操作read
#open函数,该函数用于文件处理,文件操作一共就有三种方法,打开文件#关闭文件, #先来说下打开文件,打开文件的模式有下面几种# 1.r,只读模式 f = open('test.log','r',e ...
- [leetcode]689. Maximum Sum of 3 Non-Overlapping Subarrays三个非重叠子数组的最大和
In a given array nums of positive integers, find three non-overlapping subarrays with maximum sum. E ...
- linux用户和组
1.用户隶属于用户组的. 2.用户与用户组配置文件 1)用户组配置文件 /etc/group 第一列:用户组的组名 第二列:组密码(真正的密码存储在了gshadow中) 第三列:用户组组ID,用户组唯 ...
- ServiceStack支持跨域提交
//ServiceStack对浏览器有一定的限制 //修改AppHost.cs文件 using Funq;using ServiceStack;using ServiceStackTest.Servi ...
- 将Win7笔记本设置成WiFi热点(无线路由器)
查看是否能启动WiFi网卡: S1:运行cmd命令,打开命令提示符窗口(以管理员身份运行). S2:在命令行输入:netsh wlan show drivers. 若“支持的承载网络”后为“是”,则可 ...
- workerman使用
1.start_timer.php(boc) <?php use \Workerman\Worker; use \Workerman\Lib\Timer; require_once '/var/ ...
- Laravel 5.4+Vue.js 初体验:Laravel下配置运行Vue.js
生产材料PHP:PHP 5.6+Laravel 5.4:https://github.com/laravel/laravel/releases/Composer:http://getcomposer. ...
- 如何删除win8自带输入法
如何删除 win8 自带输入法 win8 自带的那个中文输入法太坑了,想删又删不了.试了半个小时才试出一个方法.方法如下: 第一步:在更改语言道选项下面点击[添加语言] [控制面板] -> [时 ...
- Base64中文乱码的问题
web端和app端base64解码时中文乱码的问题. web端: String data = new BASE64Encoder().encode(data.getBytes("UTF-8& ...