<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. iOS_SN_地图的使用(3)

    地图的定位,记得不用定位的时候要关掉定位不然会一直定位,使电量使用过快. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional ...

  2. POI创建Excle

    1.导包 2.Demo Workbook wb=new HSSFWorkbook();//创建工作空间 Sheet sh= wb.createSheet("工作表1");//创建工 ...

  3. 关于本地$.get(url,function(data)),异步获取数据

    起初 此处url为本地同目录下的html片段 $.get(url,function(data) { alert(url); $("#gallery").append(data); ...

  4. PHP的curl常用的5种写法

    // 1,抓取无访问控制文件 $ch= curl_init(); curl_setopt($ch, CURLOPT_URL,"http://localhost/mytest/phpinfo. ...

  5. Python新手学习基础之循环结构练习

    有几个元音字母? 有一个字符串"I learn Python from maya",我们想要查找出它里面的元音字母(aeiou)(其实是找出这几个小写字母),并统计出其元音字符的个 ...

  6. dos下修复硬盘损坏的文件

    点击开始-->运行-->输入cmd,出现DOS状态对话框.在光标处输入有损坏文件的磁盘盘符后回车(如文件夹在D盘就输入D:然后回车),再输入“CHKDSK”,回车即可看到相关检测信息.“C ...

  7. 转:从BeagleBone谈AM335x硬件系统设计

    链接:http://blog.chinaunix.net/uid-730738-id-3266690.html    作者:chenzhufly 从BeagleBone谈AM335x硬件系统设计 日期 ...

  8. linux虚拟机命令行模式下,某些命令显示乱码问题。

    刚安装了linux虚拟机,使用vi命令试着修改IP配置,结果出现乱码.配置IP的文件内容本身没有乱码,主要是vi编辑的命令行的提示出现乱码,例如,按i是插入模式,结果底下出现乱码提升,不是提示插入. ...

  9. 学习phpcms模板方法:

    1.改官方模板,读里面的代码,改改它,看看有什么变化,如果不明白,去官方论 坛.查手册.专业人士还可以看数据库.2.复制实例代码,整理笔记,到实战的时候,就直接复制,改改参数即可.

  10. hdu 5012 Dice

    Problem Description There are 2 special dices on the table. On each face of the dice, a distinct num ...