<!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. 团队作业4-Day1

    团队作业4-Day1 1. 各个成员在 Alpha 阶段认领的任务 Alpha任务分配 人员 小程序样式实现 吴安冬+吴梓华 小程序js代码及云数据实现 庾艺锋+白军强 项目测试 王泽鑫+赵玮锋 2. ...

  2. 一文说通C#中的异步迭代器

    今天来写写C#中的异步迭代器 - 机制.概念和一些好用的特性   迭代器的概念 迭代器的概念在C#中出现的比较早,很多人可能已经比较熟悉了. 通常迭代器会用在一些特定的场景中. 举个例子:有一个for ...

  3. SQL注入基本知识点总结

    SQL注入基本知识 information_schema    MySQL 中存储所有数据库名.所有表名.所有字段名的系统数据库叫 information_schema ,这是在 MySQL 数据库初 ...

  4. Swift3.0学习之基础部分

    1.常量和变量 常量和变量把一个名字(比如 maximumNumberOfLoginAttempts 或者 welcomeMessage )和一个指定类型的值(比如数字 10 或者字符串 " ...

  5. iOS常见遍历方法汇总

    一.for循环 NSArray *iosArray = @[@"L", @"O", @"V", @"E", @" ...

  6. C#中RDLC控制某列的显示隐藏

    使用 1.添加参数IsEnable(用于控制显示或隐藏)2.在RDLC页面,需要控制的列上,右键,列的可见性...,基于表达式隐藏或显示3.输入 IIF(Parameters!IsEnable.Val ...

  7. html中table表格标题固定表数据行出现滚动条

    需求 web系统中有的用户不喜欢分页,希望数据能在一个页面中全部显示出来. 但是页面中是有滚动条的,当查看下面的数据时就不知道数据行中的列对应的是哪个标题的列. 也就是无法知道这个列是什么数据. 所以 ...

  8. MVC中Bundle的使用

    BundleConfig配置 (1)StyleBundle中的参数,即为cshtml中需要调用的虚拟路径名称. (2)Include包含路径,可以包含一个或多个css或js文件.即包含一组文件. pu ...

  9. 测试平台MeterSphere源码入门

    前端代码结构 ├── package.json #Vue的模块依赖定义 ├── pom.xml #Maven前后端打包的定义与依赖 ├── public ├── src #前端核心代码 │ ├── a ...

  10. Selenium ActionChains、TouchAction方法

    ActionChains和TouchAction可以用来模拟点击.双击.滑动等事件.ActionChains用于执行PC端的鼠标移动.按键.拖拽等事件:TouchActions用法与ActionCha ...