<!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. C#泛型集合之——列表

    列表基础 1.列表概述:列表与哈希集合不同之处在于,它的元素可以重复.(更接近逻辑上的数组,而哈希集合更接近于数学上的集合) 2.创建及初始化: (1)List<类型> 列表名 =new ...

  2. C# 获取某个时间的0点0分和23点59分59秒

    C#获取当月第一天和最后一天 当月第一天0时0分0秒: DateTime.Now.AddDays( - DateTime.Now.Day).Date 当月最后一天23时59分59秒: DateTime ...

  3. 关于Html中的title属性内容换行，以及Bootstrap的tooltip的使用

    1.HTML中的title属性的内容换行: 鼠标经过悬停于对象时提示内容(title属性内容)换行排版方法,html title 换行方法总结. html的title属性默认是显示一行的.如何换行呢? ...

  4. Ubuntu中安装（升级）GraphicsMagick

    1 前言 采用官方下载安装包然后强制安装升级Ubuntu中有的老版本gmagick-1.3.28,升级到gmagick-1.3.31 仅用来记录使用. 2.准备工作 1.下载安装包 https://s ...

  5. ES6--Promise讲解

    相信凡是写过javascript的童鞋也一定都写过回调方法(callback),简单说回调方法就是将一个方法func2作为参数传入另一个方法func1中,当func1执行到某一步或者满足某种条件的时候 ...

  6. iOS应用安全开发，你不知道的那些事

    来源:http://www.csdn.net/article/2014-04-30/2819573-The-Secret-Of-App-Dev-Security 摘要:iOS应用由于其直接运行在手机上 ...

  7. SparkSQL之dataframe写入mysql报错

    一.异常情况及解决方案 在使用Spark SQL的dataframe数据写入到相应的MySQL表中时,报错,错误信息如下: 代码的基本形式为: df.write.jdbc(url, result_ta ...

  8. sqlserver数据，将一行某一列字符串的值用“_”分割分别填充到这一行的其他列

    分割字符到列DECLARE @a VARCHAR(10)SET @a ='00G-2-1102'SELECT CHARINDEX('-',@a,CHARINDEX('-',@a))SELECT CHA ...

  9. 复盘一篇浅谈KNN的文章

    认识-什么是KNN KNN 即 K-nearest neighbors, 是一个hello world级别, 但被广泛使用的机器学习算法, 中文叫K近邻算法, 是一种基本的分类和回归方法. KNN既可 ...

  10. 通过request获取服务器相对路径及绝对路径

    一. String scheme = request.getScheme();//http String serverName = request.getServerName();//localhos ...