<!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. 简述JavaScript模块化编程（一）

    在早期编写JavaScript时,我们只需在<script>标签内写入JavaScript的代码就可以满足我们对页面交互的需要了.但随着时间的推移,时代的发展,原本的那种简单粗暴的编写方式 ...

  2. 83.基于Vue SEO的四种方案(小结)

    前言:众所周知,Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,下面列出几种最近研究和使用过的SEO方案,SRR和静态化基于Nuxt来说. 1.SSR服务器渲染:2.静态化:3.预渲染 ...

  3. Android开发常用开源框架：图片处理

    https://blog.csdn.net/SGQ_CSDN/article/details/79910709 Android开发常用开源框架:图片处理 框架名称 功能描述 Android Unive ...

  4. MongoDB 基本概念

    MongoDB和关系型数据库的对应关系 关系数据库 MongoDB 数据库   database 数据库   database 表格  table 集合  collection 行  row 文档  ...

  5. 深入理解JVM-java虚拟机栈

    1.java虚拟机栈 1. Java虚拟机栈也是线程私有的,它的生命周期与线程相同(随线程而生,随线程而灭) 2. 如果线程请求的栈深度大于虚拟机所允许的深度,将抛出StackOverflowErro ...

  6. 初识osquery

    初识osquery osquery是一个由Facebook的开源用于对系统进行查询,监控以及分析的一款软件. osquery对其的说明如下: osquery将操作系统公开为高性能关系数据库.这允许您编 ...

  7. freebsd xfce桌面安装scim输入法，安装成功。

    前言: 1.没有用handbook推荐的登陆组本地化方法,用的方法2:shell启动文件本地化方法(因为我不知道方法1里一些环境变量该大写还是小写,不想试了). 2.没有用登陆管理器,用xdm登录管理 ...

  8. linux下的 c 和 c++ 开发工具及linux内核开发工具

    https://opensource.com/article/18/6/embedded-linux-build-tools https://github.com/luong-komorebi/Awe ...

  9. PHP开启慢日志查询

    1.找到php-fpm.conf文件 2.去掉request_slowlog_timeout前面的分号,并设置时间.如:request_slowlog_timeout=5表示超过5秒的 慢日志文件位置 ...

  10. go语言笔记1

    Go语言学习整理 本文基于菜鸟教程,对于自己不明白的点加了点个人注解,对于已明确的点做了删除,可能结构不太清晰,看官们可移步Go语言教程 1    Go语言结构当标识符(包括常量.变量.类型.函数名. ...