<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. VMware安装Windows注意

    安装Windows通用步骤,分区,重建分区表,重写MBR引导.安装即可. VMware安装Windows 如果进不了CM/ROM,在.vmx文件里: 加入一行:bios.forceSetupOnce ...

  2. python之文件操作read

    #open函数,该函数用于文件处理,文件操作一共就有三种方法,打开文件#关闭文件, #先来说下打开文件,打开文件的模式有下面几种# 1.r,只读模式 f = open('test.log','r',e ...

  3. [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 ...

  4. linux用户和组

    1.用户隶属于用户组的. 2.用户与用户组配置文件 1)用户组配置文件 /etc/group 第一列:用户组的组名 第二列:组密码(真正的密码存储在了gshadow中) 第三列:用户组组ID,用户组唯 ...

  5. ServiceStack支持跨域提交

    //ServiceStack对浏览器有一定的限制 //修改AppHost.cs文件 using Funq;using ServiceStack;using ServiceStackTest.Servi ...

  6. 将Win7笔记本设置成WiFi热点(无线路由器)

    查看是否能启动WiFi网卡: S1:运行cmd命令,打开命令提示符窗口(以管理员身份运行). S2:在命令行输入:netsh wlan show drivers. 若“支持的承载网络”后为“是”,则可 ...

  7. workerman使用

    1.start_timer.php(boc) <?php use \Workerman\Worker; use \Workerman\Lib\Timer; require_once '/var/ ...

  8. Laravel 5.4+Vue.js 初体验:Laravel下配置运行Vue.js

    生产材料PHP:PHP 5.6+Laravel 5.4:https://github.com/laravel/laravel/releases/Composer:http://getcomposer. ...

  9. 如何删除win8自带输入法

    如何删除 win8 自带输入法 win8 自带的那个中文输入法太坑了,想删又删不了.试了半个小时才试出一个方法.方法如下: 第一步:在更改语言道选项下面点击[添加语言] [控制面板] -> [时 ...

  10. Base64中文乱码的问题

    web端和app端base64解码时中文乱码的问题. web端: String data = new BASE64Encoder().encode(data.getBytes("UTF-8& ...