<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——图片预览功能的更多相关文章

  1. JS 图片预览功能

    <script type="text/javascript">    function DisplayImage(fileTag) {        document. ...

  2. 如何通过js实现图片预览功能

    一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  3. H5图片预览功能

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  4. 原生JS实现图片预览功能

    html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...

  5. 原生js实现ajax的文件异步提交功能、图片预览功能.实例

    采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...

  6. JS 上传图片 + 预览功能(一)

    JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...

  7. HTML5实现图片预览功能

    两种方式实现 URL FileReader Index.jsp文件 <%@page contentType="text/html" pageEncoding="UT ...

  8. vue.js 图片预览

    Vue.js的图片预览的插件还是不少,但是找了半天还是没找到跟现在项目里能用得很顺手的,其实项目里图片预览功能很简单,点击放大,能双指缩放就可以了.部分vue.js的图片预览库都需要把图片资源单独拿出 ...

  9. 自定义type为file型input控件+该控件具有本地图片预览功能

    最近的一个项目需求是写一个type为filex型的input控件,这个控件: 第一,要自定义样式: 第二,要能直接在本地预览上传的图片: 第三,要能检测图片的尺寸是否符合要求. 故综合网上的资源写了下 ...

随机推荐

  1. dede DedeTag Engine Create File False

    1.在织梦后台更新文档操作时出现DedeTag Engine Create File False   解决方案: 在织梦目录include/dedetag.class.php下搜索DedeTag En ...

  2. SNP问题大集锦

    SNP问题大集锦 [2017-01-19]       最近小编对基因检测很感兴趣,也跟风去测了一下,这一测不要紧,吓得小编几天没睡着觉,这不,检测报告上称小编的减肥能力弱,虽然小编一家都是胖子,唯有 ...

  3. 品味性能之道<五>:SQL分析工具

    一.SQL语句到底是怎么执行的? 想了解SQL语句到底是怎么执行的,那就需要进行SQL语句执行计划分析. 那什么是SQL语句执行计划呢? 就是Oracle服务器执行SQL语句的过程.例如确定是否使用索 ...

  4. SECURITY_ATTRIBUTES 实现最低权限总结

    SetSecurityDescriptorDacl函数可以用来设置DACL中的信息.如果一个DACL已经在security descriptor中存在,那么此DACL将被替换.值得注意的是MSDN中的 ...

  5. To set Nginx Upload Size For “413–Request Entity Too Large” Error

    Modify NGINX Configuration File sudo nano /etc/nginx/nginx.conf Search for this variable: client_max ...

  6. tomcat 启动报 找不到 StrutsPrepareAndExecuteFilter。。

    <?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://w ...

  7. linux下第一个C程序

    首先,用vi编辑器新建一个文件 $vi hi.c 输入以下的程序(怎么用vi不说了) #include <stdio.h> int main() { printf("hello. ...

  8. azman使用笔记

    azman.msc 打开 容易冲突,要用lock 效率问题,可用sql azman

  9. 2018.09.23 关键网线(tarjan)

    描述 给出一个无向连通图,即在任一个点对间存在路径.有的点提供服务a, 有的点提供服务b .同一个点可能有两种服务类型.每个点必须与提供2种服务的点连通.如果一个边断掉,就可能出现有些点不能被服务到, ...

  10. linux CentOS 7 安装 RabbitMQ Erlang 21.0

    1. 安装erlang 安装依赖环境 yum -y install make gcc gcc-c++ kernel-devel m4 ncurses-devel openssl-devel unixO ...