<!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. mysql-数据备份与存储过程

    目录 修改隔离级别 存储过程 什么是存储过程 用来干什么 三种数据处理方式 备份与恢复 修改隔离级别 修改全局的 set global transaction isolation level read ...

  2. EditPlus中文版 安装教程

    EditPlus中文版安装教程 1.下载软件压缩包,解压即可.不需要安装,解压后打开“EditPlus中文版”文件夹(软件我会打包好,在文中的最低端找到即可下载:若链接失效了,请告知我一声,我会重新更 ...

  3. Python进阶----GIL锁,验证Cpython效率(单核,多核(计算密集型,IO密集型)),线程池,进程池

    day35 一丶GIL锁 什么是GIL锁:    存在Cpython解释器,全名:全局解释器锁.(解释器级别的锁) ​   GIL是一把互斥锁,将并发运行变成串行. ​   在同一个进程下开启的多个线 ...

  4. pandas-08 pd.cut()的功能和作用

    pandas-08 pd.cut()的功能和作用 pd.cut()的作用,有点类似给成绩设定优良中差,比如:0-59分为差,60-70分为中,71-80分为优秀等等,在pandas中,也提供了这样一个 ...

  5. Vue学习之webpack调用第三方loader(十五）

    ---恢复内容开始--- 一.webpack 默认只能打包处理 JS 类型的文件,无法处理 其他的非  JS 类型的文件: 如果非要处理 非 JS 类型的文件,我们需要手动安装一些 合适 第三方 lo ...

  6. 创建图 figure & figcaption

    如报纸.杂志.报告等其他媒介上看到过图.通常,图是由页面上的文本引述出. 在HTML5出现之前,没有专门实现这个目的的元素,因此一些开发人员想出了他们自己的解决办法(通常会使用不那么理想的.没有语义的 ...

  7. 英语caement水泥

    水泥石  又称净浆硬化体.是指 硬化后的水泥浆体,称为水泥石,在英语里是cement有时写作caement [1] ,是由胶凝体.未水化的水泥颗粒内核.毛细孔等组 成的非均质体. 中文名:水泥石 外 ...

  8. 电缆公司如何面对企业改革？MES系统打造智能工厂

    项目背景 目前,“互联网+电缆”正在成为电缆行业发展的主流,作为中国领先的大型电缆企业江苏亨通电力电缆有限公司(简称“亨通电缆”)积极响应国家提出的“中国制造2025”号召,实施MES工程项目,启用智 ...

  9. C# winform 托盘控件的使用

    从工具栏里,把NotifyIcon控件拖到窗体上,并设置属性: 1.visible 设置默认为FALSE: 2.Image 选一张图片为托盘时显示的图样:比如选奥巴马卡通画像: 3.Text  显示: ...

  10. php框架路由美化后提示No input file specified

    此问题出现在.htaccess上 Apache按如下代码修改即可: RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-d RewriteCond % ...