<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus®">

<meta name="Author" content="buexplain">

<meta name="Keywords" content="">

<meta name="Description" content="">

<title>Document</title>

<script src="jquery.js"></script>

</head>

<body>

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

    <img id="imgsrc" src="">

    <script>

        $(function() {

            $("#imgsrc").hide();

            $("#imgfile").change(function() {

                var objUrl = getObjectURL(this.files[0]);

                console.log("objUrl = " + objUrl);

                if (objUrl) {

                    $("#imgsrc").attr("src", objUrl);

                    $("#imgsrc").show();

                }

            });

            function getObjectURL(file) {

                var url = null;

                if (window.createObjectURL != undefined) { // basic

                    url = window.createObjectURL(file);

                } else if (window.URL != undefined) { // mozilla(firefox)

                    url = window.URL.createObjectURL(file);

                } else if (window.webkitURL != undefined) { // webkit or chrome

                    url = window.webkitURL.createObjectURL(file);

                }

                return url;

            }

        });

    </script>

</body>

</html>

javascript预览本地图片的更多相关文章

  1. IE7+ 浏览器兼容预览本地图片

    css #preview_fake { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); o ...

  2. vue预览本地图片

    <template> <div> <a href="javascript:void(0);" @change="addImage" ...

  3. 预览本地图片原生js

    <!-- 样似总结: 用a标签代替file,做文件上传. 将file进行绝对定位,透明度设置为0:宽度为“上传图片”的宽度,超出部分隐藏. 这样做是为了将file隐藏起来.用a标签代替file ...

  4. jquery预览本地图片

    本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群:   281442983 (点击链接加入群:http://jq.qq.com/?_wv=1027&k=29Lo ...

  5. 基于HTML5的可预览多图片Ajax上传

    一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...

  6. es5预览本地文件、es6练习代码演示案例

    es6简单基础: <!DOCTYPE html> <html> <head> <meta name="viewport" content= ...

  7. HTML5可预览多图片ajax上传(使用formData传递数据)

    HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...

  8. input type=file实现图片上传，预览以及图片删除

    背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...

  9. 一款基于jQuery可放大预览的图片滑块插件

    今天给大家分享一款基于jQuery可放大预览的图片滑块插件.这款jQuery焦点图插件的特点是可以横向左右滑动图片,并且点击图片可以进行放大预览,唯一的缺陷是这款焦点图并不能循环切换,如果你有较好的J ...

随机推荐

  1. k8s--yml文件2

  2. iOS - 架构模式 - 解密 MVC、MVP、MVVM、VIPER架构

    在 iOS 中使用 MVC 架构感觉很奇怪? 迁移到MVVM架构又怀有疑虑?听说过 VIPER 又不确定是否真的值得切换? 相信你会找到以上问题的答案,如果没找到请在评论中指出. 你将要整理出你在 i ...

  3. 一分钟告诉你什么是OPC DA质量代码

    [关于TOP Server OPC Server试用版可登录慧都网该产品下载页进行下载] OPC DA(OPC实时数据访问规范)定义了包括数据值,更新时间与数据品质信息的相关标准.这个定义相信大家都很 ...

  4. 通过公网ip访问虚拟机web服务

    工作中有需要进行通过外网ip访问虚拟机上的web服务,通过查阅资料,将配置过程整理如下: 思路:通过路由器的端口映射访问虚拟机上的web服务 1. 前提是在虚拟机上的web服务已经部署好,并且可以通过 ...

  5. Flask--配置文件

    配置文件 配置文件的方式有很多,下面介绍两种: 第一种:根据全局变量实现 App.py from flask import Flask, session app = Flask(__name__) # ...

  6. css样式设定样例说明

    <style> .classA .classB{*}; //表示设置class为classA标签下的classB标签的样式(A). .classA , .classB{*}; //表示同时 ...

  7. 基于gtk的imshow:用stb_image读取图像并用gtk显示

    在前面一篇,已经能够基于gtk读取图像并显示.更前面的一篇:基于GDI的imshow:使用stb_image读取图像并修正绘制,通过stb_image读取图像并通过GDI显示图像,实现了一个imsho ...

  8. 【Docker】docker的安装和常用命令

    一.docker安装和启动 1.yum 命令 yum install docker 2.docker启动命令 sudo systemctl start docker 二.docker常用命令 dock ...

  9. WSL quick overview

    简介 WSL,是Windows Subsystem for Linux的缩写,字面意义上理解就是WIndows下的Linux子系统.WSL 由Microsoft Windows内核团队创建,目前如果最 ...

  10. Mysql中innodb和myisam

    innodb和myisam两种存储引擎的区别 1.事务和外键 1)InnoDB具有事务,支持4个事务隔离级别,回滚,崩溃修复能力和多版本并发的事务安全,包括ACID.如果应用中需要执行大量的INSER ...