最近在项目时，需要获取用户的上传文件的路径，便写了一个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. Thread pool引起的程序连接数据库响应慢

    数据库版本:percona-mysql 5.6.16 ​在很长一段时间,都会出现程序连接数据库,出现响应慢的情况,正常在几到几十毫秒之间,但是偶尔会出现上百毫秒的情况: 开始由于开发重新设置并调整过程 ...

  2. zmodem使用方法

    无论有xshell还是secureCRT连接linux的时. 默认都用一个zmodem可以帮助window和linux之间传输文件 很方便和实用的工具. 不过默认是无法使用的 需要安装lrzsz软件 ...

  3. SciPy和Numpy处理能力

    1.SciPy和Numpy的处理能力: numpy的处理能力包括: a powerful N-dimensional array object N维数组: advanced array slicing ...

  4. spring文件的上传和下载

    文件上传 文件上传需要用到两个类,MultipartFile和MultipartHttpServletRequest,它们都是在spring的web包中,同时需要在spring容器中配置Multipa ...

  5. js代码 注释 test

    <script type="text/javascript"> var obj = { tyep: 'GET', url: '/Backstage/Home/Menu' ...

  6. 插入排序InsertSort

    插入排序:从第二个数开始  一直和前面的数组比较 获得排序定位 ​ 代码 /** *插入排序 */ public class InsertSort { public static void inser ...

  7. java 常用API 包装 数组的覆盖和遍历

    package com.oracel.demo01; public class Sz { public static void main(String[] args) { // TODO Auto-g ...

  8. MongoDB基本操作总结

    MongoDB语法总结:插入操作:单条插入语法 : insertOne()示例: db.getCollection('MY_TEST').insertOne({"日期" : &qu ...

  9. ZJOI2015 幻想乡战略游戏 动态点分治_树链剖分_未调完

    Description 傲娇少女幽香正在玩一个非常有趣的战略类游戏,本来这个游戏的地图其实还不算太大,幽香还能管得过来,但是不知道为什么现在的网游厂商把游戏的地图越做越大,以至于幽香一眼根本看不过来, ...

  10. MooFest 树状数组 + 前缀和

    比较友好的数据结构题 建议读者好好思考思考--. 可以分析出与前缀和的关系, 之后就愉快的套起树状数组辣 #include <cstdio> #include<queue> # ...