最近在项目时，需要获取用户的上传文件的路径，便写了一个demo：

<body>

  <input type="file" name="" value="">

  <script>

    var input = document.getElementsByTagName("input")[];

    console.log(input);

    input.onchange = function () {

      var that = this;

      console.log(that.files[]);

      var src = window.URL.createObjectURL(that.files[])

      console.log(src);

      var img = document.createElement("img");

      img.style.width = "200px";

      img.src = src;

      document.body.appendChild(img);

    }

  </script>

效果及结果如下：

通过input[type=file]上传图片获取图片的尺寸：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <form id="form">

        <!-- .给input标签添加一个onchange事件：一旦选择文件发生变化则会触发   目的：获取选择图片的原始数据 -->

        <input type="file" id="exampleInputFile" name="icon" onchange=uploadImg(this)>

        <!-- .用一个img标签来接收文件数据  目的：（）先接收文件数据  （）通过offsetHeight属性获取宽高 -->

        <img src="" alt="" id="">

        <p>请上传图片.</p>

    </form>

</body>

<script>

    //选择图片，马上预览

    function uploadImg(obj) {

        //1.读取文件详细信息

        var file = obj.files[];

        console.log(obj);

        console.log(file);

        //2.使用FileReader读取文件信息

        var reader = new FileReader();

        //4.监听读取文件过程方法,异步过程

        reader.onloadstart = function (e) {

            console.log("开始读取....");

        }

        reader.onprogress = function (e) {

            console.log("正在读取中....");

        }

        reader.onabort = function (e) {

            console.log("中断读取....");

        }

        reader.onerror = function (e) {

            console.log("读取异常....");

        }

        reader.onload = function (e) {

            console.log("成功读取....");

            console.log(this.reault);

            //或者 img.src = this.result;  //e.target == this

            var img = document.getElementById("");

            //将解析的base64字符串赋值给img标签

            img.src = e.target.result;

            //5.这里需要异步获取，避免线程延迟

            setTimeout(function(){

                window.alert('高度' + img.offsetHeight + '宽度' + img.offsetWidth);

            },);

        }

        //3.开始读取

        reader.readAsDataURL(file)

    }

</script>

</html>

input[type='file']获取上传文件路径案例的更多相关文章

  1. input type file onchange上传文件的过程中，遇到同一个文件二次上传无效的问题。

    不要采用删除当前input[type=file]这个节点,然后再重新创建dom这种方案,这样是不合理的.解释如下:input[type=file]使用的是onchange去做,onchange监听的为 ...

  2. input type file onchange上传文件的过程中，同一个文件二次上传无效的问题。

    不要采用删除当前input[type=file]这个节点,然后再重新创建dom这种方案,这样是不合理的.解释如下:input[type=file]使用的是onchange去做,onchange监听的为 ...

  3. input type='file'限制上传文件类型

    前端与后台数据进行对接时,就避免不了要使用ajax进行http请求,常用的请求就两个post与get:然而常见的post请求的需求是文件上传,可能我一说到文件上传大家都觉得so  easy啊,没什么嘛 ...

  4. input type=file 图片上传相关

    HTML: <input type="file" name="address"   onchange='PreviewImage(this)' value ...

  5. JS获取上传文件的绝对路径，兼容IE和FF

    <input type="file" id="fileBrowser" name="fileBrowser" size="5 ...

  6. ie下获取上传文件全路径

    ie下获取上传文件全路径,3.5之后的火狐是没法获取上传文件全路径的 /*获取上传文件路径*/ function getFilePath(obj) { var form = $(this).paren ...

  7. Atitit.js获取上传文件全路径

    Atitit.js获取上传文件全路径 1. 默认的value只能获取文件名..安全原因.. 1 2. Firefox浏览器的读取 1 3. Html5 的file api 2 4. 解决方法::使用a ...

  8. js获取上传文件内容(未完待续)

    js 获取上传文件的字节数及内容 <div> 上传文件 : <input type="file" name = "file" id = &qu ...

  9. PHP使用APC获取上传文件进度

    今天发现使用PHP的APC也能获取上传文件的进度.这篇文章就说下如何做. 安装APC 首先安装APC的方法和其他PHP模块的方法没什么两样,网上能找出好多 phpinfo可以看到APC的默认配置有: ...

随机推荐

  1. shell学习第二弹-进阶

    1.linux系统中配置文件执行顺序 1)用户登录系统,首页调用/etc/profile文件初始化所有bash用户的默认特征 2)然后shell依次查找~/.bash_profile,~/.bash_ ...

  2. 根据业务自己设计的.NET工厂模式架构

    最近项目的架构需要做调整优化,根据业务需要写了一个简单的工厂模式架构 项目介绍:整个系统分为三大平台(这里用A,B,C来标示),每个平台又细分为多个APP客户端(每个APP都有appid来区分) 因为 ...

  3. Caffe+UbuntuKylin14.04_X64+CUDA 6.5配置

    在编译Caffe的漫长过程中,经过了一个又一个坑,掉进去再爬出来,挺有趣的.对比原文有修改! LInux下配置安装:(本文档使用同一块NVIDIA显卡进行显示与计算, 如分别使用不同的显卡进行显示和计 ...

  4. Qt：&OpenCV—Q图像处理基本操作（Code）

    原文链接:http://www.cnblogs.com/emouse/archive/2013/03/31/2991333.html 作者写作一系列:http://www.cnblogs.com/em ...

  5. C# 1.将整个文件夹复制到目标文件夹中 2.将指定文件复制到指定目标文件夹中

    ].Items.Clear(); string filePath = Application.StartupPath; string sourcePath = Path.Combine(filePat ...

  6. CorelDRAW 2019新品发布，行业大咖就差你了

    近日,由苏州思杰马克丁软件公司独家代理的CorelDRAW 2019将在苏州开启一场设计上的饕餮盛宴,您报名了么? 不管您是专业的设计师还是热爱设计的狂热粉丝,都将有机会参与到我们的活动中,为了这场盛 ...

  7. 如何在vue里面正确的引用 jquery 和 第三方插件

    vue-cli webpack全局引入jquery(jq通过npm安装的并非本地文件) 1.首先在package.json里加入, dependencies:{ "jquery" ...

  8. day25-3 json,pickle模块

    目录 json 序列化 反序列化 pickle json json文件并不是python独有的,所有的语言都有json,可以跨平台/语言传输数据 json文件中只能写入python中的dict/lis ...

  9. Windows自调试Redis

    一.安装Redis 1. Redis官网下载地址:http://redis.io/download,下载相应版本的Redis,在运行中输入cmd,然后把目录指向解压的Redis目录. 2.启动服务命令 ...

  10. 3.2、使用Flask-Bootstrap集成Twitter Bootstrap

    Bootstrap(http://getbootstrap.com/)是 Twitter 开发的一个开源框架,它提供的用户界面组件可用于创建整洁且具有吸引力的网页,而且这些网页还能兼容所有现代 Web ...