抄自

http://blog.csdn.net/qiulei_21/article/details/52785191

js读取本地图片并显示

第一种方法比较好

版权声明：本文为博主原创文章，未经博主允许不得转载。

根据项目需要，需要选择本地图片并显示在页面上，然后上传至服务器。因为自身刚刚接触js,所以比较生疏，碰到问题吼，幸好有强大的网络，搜索很多有用的资源，现在将js读取本地图片并显示的代码总结一下，供大家使用，并给自己一个记录。

第一种方法：

<script type="text/JavaScript">

//图片显示插件

        (function ($) {

            $.imageFileVisible = function (options) {

                // 默认选项

                var defaults = {

                    //包裹图片的元素

                    wrapSelector: null,

                    //<input type=file />元素

                    fileSelector: null,

                    width: '100%',

                    height: 'auto',

                    errorMessage: "不是图片"

                };

                // Extend our default options with those provided.

                var opts = $.extend(defaults, options);

                $(opts.fileSelector).on("change", function () {

                    var file = this.files[0];

                    var imageType = /image.*/;

                    if (file.type.match(imageType)) {

                        var reader = new FileReader();

                        reader.onload = function () {

                            var img = new Image();

                            img.src = reader.result;

                            $(img).width(opts.width);

                            $(img).height(opts.height);

                            $(opts.wrapSelector).append(img);

                        };

                        reader.readAsDataURL(file);

                    } else {

                        alert(opts.errorMessage);

                    }

                });

            };

        })(jQuery);

        $(document).ready(function () {

            //图片显示插件

            $.imageFileVisible({ wrapSelector: "#image-wrap1",

                fileSelector: "#file1",

                width: 300,

                height: 300

            });

            $.imageFileVisible({ wrapSelector: "#image-wrap2",

                fileSelector: "#file2",

                width: 300,

                height: 300

            });

        });

 </script>

 <div id="ImportHead">

        <table border="0" class="frm" style="height: 35px; width: auto; padding-left: 5px;

            padding-top: 1px;">

            <tr style="width: 300px; height: 400px;">

                <th>

                    选择图1：

                </th>

                <td>

                    <input type="file" id="file1">

                    <div id="image-wrap1" style="width: 300px; height: 300px; border: solid 1px lightGray">

                    </div>

                </td>

                <th>

                    选择图2：

                </th>

                <td style="width: 300px;">

                    <input type="file" id="file2">

                    <div id="image-wrap2" style="width: 300px; height: 300px; border: solid 1px lightGray">

                    </div>

                </td>

            </tr>

            <tr>

                <td colspan="2" style="text-align: right">

                    <input type="submit" id="btnUpload" class="btnSearch" value="上传" />

                </td>

            </tr>

        </table>

    </div>

第二种方法：

<html>

<body>

 <img id="image"src=""/>

<br/>

 <input type="file"onchange="selectImage(this);"/>

<br/>

<script>

    var image = '';

    function selectImage(file) {

        if (!file.files || !file.files[0]) {

            return;

        }

        var reader = new FileReader();

        reader.onload = function (evt) {

            document.getElementById('image').src = evt.target.result;

            image = evt.target.result;

        }

        reader.readAsDataURL(file.files[0]);

    }

</script>

</body>

</html>

　　

js读取本地图片并显示的更多相关文章

  1. Springboot读取本地图片并显示

    在application.yml中配置url访问路径和本地图片路径: 方框1:url中访问路径,这里为:localhost:8080/testspringboot/image/... 方框2:本地图片 ...

  2. java 通过流的方式读取本地图片并显示在jsp 页面上(类型以jpg、png等结尾的图片)

    Java代码: File filePic = new File(path+"1-ab1.png"); if(filePic.exists()){ FileInputStream i ...

  3. pyqt5 多线程+定时器+读取本地图片

    前言 一个程序界面有多个button 按钮时,单击一个按钮,若此按钮对应的信号正在执行,且还未执行完毕: 此时再次单击另外一个按钮,就会出现假死状态. 这个时候我们就需要使用 多线程去解决 多线程+定 ...

  4. 手工创建tomcat应用，以及实现js读取本地文件内容

    手工创建tomcat应用: 1.在webapps下面新建应用目录文件夹 2.在文件夹下创建或是从其他应用中复制:META-INF,WEB-INF这两个文件夹, 其中META-INF清空里面,WEB-I ...

  5. window.open()读取本地图片简单使用总结

    最近做了一个项目,需要读取本地图片出来,问了一些人,感觉在数据库中存取路径比较合适,故做此方法. 后台查询出来的路径

  6. FileReader：读取本地图片文件并显示

    最近忙得比狗还惨,导致长时间没能更新文章,真心对不住啊.抽空整理了下关于在页面上读取和显示本地图片的实例文章,本文通过实例讲解如何使用支持FileReader浏览器的用户将能够通过一个file inp ...

  7. UE4 读取本地图片

    参考链接:https://answers.unrealengine.com/questions/235086/texture-2d-shows-wrong-colors-from-jpeg-on-ht ...

  8. phonegap(cordova) 自己定义插件代码篇（四）----读取本地图片

    有时候确实知道本地图片地址,要获取到base64  /** * 获取本地图片,包括路径和压缩后的 base64 */ (function (cordova) { var define = cordov ...

  9. android获取本地图片并显示图片

    import java.io.FileNotFoundException; import android.content.ContentResolver; import android.content ...

随机推荐

  1. Spring Boot IoC 容器初始化过程

    1. 加载 ApplicationContextInializer & ApplicationListener 2. 初始化环境 ConfigurableEnvironment & 加 ...

  2. 提bug

    大多数公司都是用bugzilla来管理bug,也有的公司使用内部开发的bug管理平台.这里以bugzilla为例,我最不爽的是提bug的时候既要选择severity(严重级别)又要选择priority ...

  3. Python 面向对象介绍

    面向对象,面向过程 面向对象引子 人狗大战,人与狗都有不同的特点,如果要写出这两个不同角色 需要写出两个角色,可以使用嵌套函数,函数内在写入函数,然后通 过字典,将里层函数reture出来,在调用. ...

  4. docker原理与上帝进程

    做个笔记, 先水一会. 虚拟机指的是: 在软件的层面上通过模拟硬件进行的输入输出. docker原理:docker就是一个linux系统的进程, 它通过 Linux 的 namespaces 对不同的 ...

  5. 2的n次方用c语言怎么表示

    C语言有函数,需要头文件#include <math.h>用pow(2,n)就可以了! double result = pow(2,n);

  6. 剑指offer（61）序列化二叉树

    题目描述 请实现两个函数,分别用来序列化和反序列化二叉树 题目分析 首先拿到题目时候,我先想到的是什么是序列化二叉树?序列化主要就是在前后端交互时候需要转换下,毕竟网络传输的是流式数据(二进制或者文本 ...

  7. python第一阶段总结（2）

    python3第一阶段的总结 首先申明一下,本人是看网络课程“老男孩”过来写博客的,想把自己学到的东西分享一下.同时给老男孩打个广告,其教学水平真的挺好的.仅据我个人多年的学习评价. 好,接下来是我对 ...

  8. Learning-Python【26】：反射及内置方法

    反射的概念 可以用字符串的方式去访问对象的属性,调用对象的方法(但是不能去访问方法),Python 中一切皆对象,都可以使用反射. 反射有四种方法: hasattr:hasattr(object, n ...

  9. git 管理和存储二进制大文件

    git 管理二进制文件 本文档将逐步带你体验 git 的大文件管理方式. 环境: windows10 64位 cmd git版本: git version 2.18.0.windows.1 创建到推送 ...

  10. Linux 命令行下导入导出 .sql 文件

    一.导出数据库用的是 mysqldump 命令 1.导出数据和表结构 /usr/bin/mysqldump -u 用户名 -p 数据库名 > 数据库名.sql 敲回车键后会提示输入密码 注意 m ...