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控件,这个控件: 第一,要自定义样式: 第二,要能直接在本地预览上传的图片: 第三,要能检测图片的尺寸是否符合要求. 故综合网上的资源写了下 ...
随机推荐
- 对实体类的CRUD操作
--------------------siwuxie095 对实体类的 CRUD 操作 1.创建数据库和表 (1)创建一个 MySQL 连接:mybatis_conn (2)创建一个数据库:myba ...
- ASP.NET中修改从数据库获取的datatable中的值
有些时候,我们从数据库表中获取一个实体的对象,但有些内容并不是最终显示的内容,格式也都是不一样.经过一番尝试,发现datatable中的数值如果跟想要改变的类型不一致,就无法更改,只有添加新列,然后把 ...
- 【校招面试 之 剑指offer】第10-3题 矩阵覆盖问题
题目:我们可以使用2✖️1的小矩形横着或者竖着去覆盖更大的矩形.请问用8个2✖️1的小矩形无重叠地覆盖一个2✖️8的大矩形,共有多少种方法? 分析:当放第一块时(假定从左边开始)可以横着放,也可以竖着 ...
- python之面向对象之封装
今天我们终于进入了面向对象,今天做一下面向的封装的总结 #面向对象的封装 #这里定义了一个类,名称为Role,object是所有类的父类 class Role(object): #这里是定义实例的属性 ...
- jsp清除缓存
好多代码都是: <% response.setHeader("Cache-Control", "no-store"); //HTTP 1.1 respon ...
- 删除排序数组中的重复数字 II · Remove Duplicates from Sorted Array II
重复一次 [抄题]: 给定一个排序数组,在原数组中删除重复出现的数字,使得每个元素只出现一次,并且返回新的数组的长度. 不要使用额外的数组空间,必须在原地没有额外空间的条件下完成. [思维问题]: [ ...
- 7-将本地的javaweb项目部署到Linux服务器的一般操作
一.基本流程介绍: 1.安装tomcat;2.安装mysql;3.将本地的javaweb导出成.war文件,传到服务器的tomcat/webapps/下面4.将数据库文件导出成.sql文件,传到服务器 ...
- Redis安装异常解决办法
官网地址:http://redis.io/ 官网下载地址:http://redis.io/download 1. 下载Redis源码(tar.gz),并上传到Linux 2. 解压缩包:tar zxv ...
- ajax.beginform控制器中实体为null的问题
控制器: 函数声明:public JsonResult ApplyFun(Test test) 原因:在视图中有一个表单的name属性为test,因为冲突所导致.
- apache的错误日志分析