<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>3</title>

<script>

function getFullPath(obj) {

    if (obj) {

        //Internet Explorer

        if (window.navigator.userAgent.indexOf("MSIE") >= 1) {

            obj.select();

            return document.selection.createRange().text;

        }

        //Firefox

        if (window.navigator.userAgent.indexOf("Firefox") >= 1) {

            if (obj.files) {

                return obj.files.item(0).getAsDataURL();

            }

            return obj.value;

        }   

        //兼容chrome、火狐等，HTML5获取路径

        if (typeof FileReader != "undefined") {

            var reader = new FileReader();

            reader.onload = function(e) {

                document.getElementById("pic").src = e.target.result + "";

            }

            reader.readAsDataURL(obj.files[0]);

        } else if (browserVersion.indexOf("SAFARI") > -1) {

            alert("暂时不支持Safari浏览器!");

        }  

    }

}  

function showPic(obj) {

    var fullPath = getFullPath(obj);

    if (fullPath) {

        document.getElementById("pic").src = fullPath + "";

    }

}

</script>

</head>

<body>

    <input type="file" onchange="showPic(this)">

    <img src="" id="pic">

</body>

</html>

由于工作需要，自己写了个小demo，通过自己组装，可以实现一定的需求。

原创文章如转载，请注明出处

一个上传图片，预览图片的小demo的更多相关文章

  1. KindEditor的简单使用，以及上传图片预览图片，用户删除图片后的数据处理（重点），以及 BeautifulSoup，shutil两模块了解

    KindEditor的简单了解 http://www.cnblogs.com/wupeiqi/articles/6307554.html 简单使用: <div class="comm& ...

  2. ipad iphone 开发的应用，加一个启动预览图片

    如果你想在你的ipad,iphone应用启动是不显示黑屏幕,而是用一个图片代替的话,你只需要吧一张名为 Default.png 的图片加到项目里就行了. 很简单吧,新手们记得去这样美化下你的应用吗,很 ...

  3. 通过HTML5 FileReader实现上传图片预览功能

    原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...

  4. 微信小程序预览图片

    选择图片时可设置图片是否是原图,图片来源.这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用 主要方法: wx.chooseImage(object) wxml ...

  5. 【微信小程序】微信小程序wx.previewImage预览图片

    一.小知识 二.例子,配合轮播图使用效果更佳!(如图1) 1.wxml <scroll-view scroll-y="true"> <swiper catchta ...

  6. 微信小程序：点击预览图片

    在开发微信小程序时,开发人员会参考着小程序api来开发小程序,但有的时候根据情况不同很容易出现bug,以下是我在开发小程序时出现的各种bug,在开发时有需要预览图片. 1.xml <view c ...

  7. file上传图片，base64转换、压缩图片、预览图片、将图片旋转到正确的角度

    /** * 将base64转换为文件对象 * (即用文件上传输入框上传文件得到的对象) * @param {String} base64 base64字符串 */ function convertBa ...

  8. input file 模拟预览图片。

    首先申明,接下来内容只是单纯的预览图片,最多选择九张,并没有和后台交互,交互的话需要自己另外写js. 本来想写一个调用摄像头的demo,意外的发现input file 在手机端打开的话,ios可以调用 ...

  9. 异步上传&预览图片-压缩图片

    移动端普及的时代,流量是用户最关心的,手机拍出来的照片基本上都在1~2M以上,这样上传会非常耗流量,影响用户体验,此例能在保证清晰度的情况下,将4.5M的图片压缩为30K <!DOCTYPE h ...

随机推荐

  1. JavaSE01-概述

    1.1 Java语言发展史 语言:人与人交流沟通的表达方式 计算机语言:人与计算机之间进行信息交流沟通的一种特殊语言 Java语言是美国Sun公司(Stanford University Networ ...

  2. IOS开发中设置导航栏主题

    /** * 系统在第一次使用这个类的时候调用(1个类只会调用一次) */ + (void)initialize { // 设置导航栏主题 UINavigationBar *navBar = [UINa ...

  3. Git中一个由readme.md文件引起的问题

    githup中建立远程仓库时,勾选了创建readme文件,本地仓库无法push,解决方法: https://blog.csdn.net/ashencode/article/details/816249 ...

  4. HBase按照行键范围删除数据

    #!/bin/bash #TOOL_PATH=$(cd "$(dirname "$0")"; pwd) #TOOL_PATH_TMP=$(cd "$( ...

  5. css进阶 03-网页设计和开发中，关于字体的常识

    03-网页设计和开发中,关于字体的常识 #前言 我周围的码农当中,有很多是技术大神,却常常被字体这种简单的东西所困扰. 这篇文章,我们来讲一讲关于字体的常识.这些常识所涉及到的问题,有很强的可操作性, ...

  6. Qt QChart 创建图表

    Qt QChart 创建图表 @ 目录 Qt QChart 创建图表 效果 流程 代码 1. 饼图 2. 柱图 3. 折/曲线图 4. 区域图 效果 流程 graph LR q(value 数据) q ...

  7. Linux下安装ffmpeg，视频格式转换

    下载ffmpeg 从ffmpeg官网:http://ffmpeg.org/download.html 下载最新的ffmpeg安装包,然后通过如下命令解压: 解压 ffmpeg-*.tar.bz2 文件 ...

  8. 这可能是目前最轻量级、最支持MVVM、可定制性最高的开源Chart控件！

    由于项目中经常用到Series Chart,而目前市面又实在找不到既支持MVVM,又轻量级的开源Chart控件,于是干脆就花了两周时间随手写了一个.昨天感觉还比较满意,就发布到了Github上:htt ...

  9. 如何在Python中处理不平衡数据

    Index1.到底什么是不平衡数据2.处理不平衡数据的理论方法3.Python里有什么包可以处理不平衡样本4.Python中具体如何处理失衡样本印象中很久之前有位朋友说要我写一篇如何处理不平衡数据的文 ...

  10. 关于线程池（ThreadPoolExecutor）参数的浅析

    引子 线程池在项目中很常用,需要多个任务异步执行的地方我们都会去创建一个线程池. 我们看到 ThreadPoolExecutor源码中提供了更方便的工厂方法(Executors)使用. 提供方便应该是 ...