<!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. 使用HttpClient调用接口

    一,编写返回对象 public class HttpResult { // 响应的状态码 private int code; // 响应的响应体 private String body;get/set ...

  2. MySQL和SQL Server一些基本用法区别

    具体查看:https://www.cnblogs.com/zhaow/articles/9633554.html 转自:https://www.cnblogs.com/zhaow/articles/9 ...

  3. python 2.django的镜像安装与第一次项目创建-运行以及app创建

    django的设计模式 Django是一个遵循MVC设计模式的框架,MVC是Model.View.Controller的三个单词的简写.分别代表模型.视图.控制器. 而Django也是是一个MTV的设 ...

  4. Linux的巡检命令

    # uname -a # 查看内核/操作系统/CPU信息# head -n 1 /etc/issue # 查看操作系统版本# cat /proc/cpuinfo # 查看CPU信息# hostname ...

  5. js节流与防抖函数封装

    js节流与防抖函数封装 常见应用场景: window的 resize 和 scroll 事件: 文字输入时的 keyup 事件: 元素拖拽.移动时的 mousemove 事件: 防抖 定义:多次触发事 ...

  6. 记录axios在IOS上不能发送的问题

    最近 遇到 了axios在IOS上无法发送的问题,测试 了两个 苹果 机,IOS10上不能发送,IOS12可以,百度了下,找到了解决方法.记录下吧 首先引入qs,这个安装axios也已经有了吧:然后在 ...

  7. 如何创建SAP Cloud Platform Process Integration runtime服务

    登录SAP Cloud Platform cockpit,进入subaccount的Service marketplace界面,选择process integration runtime: 点击ins ...

  8. 巧用浏览器F12调试器定位系统前后端bug-转载

    做测试的小伙伴可能用过httpwatch,firebug,fiddler,charles等抓包(数据包)工具,但实际上除了这些还有一个简单实用并的抓包工具,那就是浏览器的F12调试器. httpwat ...

  9. Flink源码分析 - 剖析一个简单的Flink程序

    本篇文章首发于头条号Flink程序是如何执行的?通过源码来剖析一个简单的Flink程序,欢迎关注头条号和微信公众号"大数据技术和人工智能"(微信搜索bigdata_ai_tech) ...

  10. 【RocketMQ异常】Caused by: com.aliyun.openservices.shade.com.alibaba.rocketmq.client.exception.MQClientException: No route info of this topic, message-service-topic-testf

    一.异常信息 -- ::-thread-] ERROR c.x.x.r.service.producer.ali.AliMQProducerProcess.sendMessageFromQueue(A ...