<!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. linux c++ 内存泄漏检测工具：AddressSanitizer(ASan)

    1.介绍 AddressSanitizer(ASan),该工具为gcc自带,4.8以上版本均可以使用. 2.使用 编译的方式很简单,只需要添加 -fsanitize=address -g 即可,如 g ...

  2. 自搭建jetbrains系列ide授权服务器

    1.下载 LicenseServer 地址:https://mega.nz/#!7B5UVY6b!Hae2ceTBPIrTowQN0sV9fQ5lGOKzGxas2ug02RZAdGU,里面有不同的服 ...

  3. STL—— 容器（vector）的数据插入之 insert()

    vector 容器可以使用 vectorName.insert() 方法插入元素,vectorName.insert() 函数一共有4种重载方法: 第一种 insert() 用法:在指定地址插入单个元 ...

  4. hugging face-基于pytorch-bert的中文文本分类

    1.安装hugging face的transformers pip install transformers 2.下载相关文件 字表: wget http://52.216.242.246/model ...

  5. linux重启后nginx服务无法启动

    查看ngin.conf pid的内容 例如: pid /usr/local/nginx/logs/nginx.pid 根据以上配置内容来做,检查/usr/local/nginx/logs/是否存在,如 ...

  6. 给小白整理的一篇Python知识点

    1.基本概念 1.1 四种类型 python中数有四种类型:整数.长整数.浮点数和复数. python中数有四种类型:整数.长整数.浮点数和复数. 整数, 如 1 长整数 是比较大的整数 浮点数 如 ...

  7. javascript之原型、原型链

    一.原型: 1. 任何函数都有prototype属性(对象才有属性,函数也是对象): 2. 函数的prototype属性的值是个对象,这个对象就是原型(对象): 3. 作用:通过构造函数创建出来的对象 ...

  8. Web自动化测试：xpath & CSS Selector定位

    Xpath 和 CSS Selector简介 CSS Selector CSS Selector和Xpath都可以用来表示XML文档中的位置.CSS (Cascading Style Sheets)是 ...

  9. 唐诗宋词APP

    古诗词个人爱好,已收集5万多首唐诗以及1万多首宋词,因时间有限目前只开发了苹果版,后期开发安卓版, <风月醉>一 国学经典,有兴趣的可以下载学习古诗词,有问题可以留言哦! https:// ...

  10. svn怎么上传文件

    首先去网站下载TortoiseSVN,并安装   安装完后随便打开一个文件夹,如图,笔者在 E:\svn\ 文件下创建了一个simbo文件夹,选中并右键,出现了TortoiseSVN应用的选项,我们点 ...