精华内容
下载资源
问答
  • vue获取input file对象

    千次阅读 2019-04-24 17:41:18
    获取第一个:

     

    获取第一个:

     

    展开全文
  • 获取input type=file的文件名方法: let filePath = $("input[type = 'file']").val(); //获取路径 let urlArr = filePath.split("\\"); //以反斜杠'\'截取文件名为数组 let fileNam...

    获取input type=file的文件名方法:

     

            let filePath = $("input[type = 'file']").val();        //获取路径

            let urlArr = filePath.split("\\");                    //以反斜杠'\'截取文件名为数组

            let fileName = urlArr[urlArr.length-1];        //获取文件名

    input type=file在个浏览器中样式各不相同,如下图所示:

    若要统一样式,可将原有样式设置属性 opacity: 0,布局上用定位position:relative/absolute实现,实现效果如下:


    具体实现代码如下:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <script src="./d3/jquery-1.12.0.min.js"></script>
        <style>
            .fileIpt {
                width: 423px;
                height: 30px;
            }
            input {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }
            .label-text[for = "inputDataBackup1"] {
                color: #0e0e0e;
                padding: 5px 20px 6px 20px;
                margin-bottom: 0px;
                font-weight: 500;
                background: #2fc8f6;
                border-radius: 3px 0px 0px 3px;
                -webkit-border-radius: 3px 0px 0px 3px;
                -moz-border-radius: 3px 0px 0px 3px;
                font-size: 14px;
                vertical-align: middle;
                text-align: center;
            }
            #inputDataBackup1 {
                width: 268px;
                height: 30px;
                background: transparent;
                position: relative;
                display: inline-block;
                margin-left: -6px;
                padding: 1px 0px 0px 0px;
                color: #57D1F7;
                text-align: center;
                vertical-align: middle;
                border: 2px solid #2fc8f6;
                border-radius: 3px;
                -webkit-border-radius: 3px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }
          .selectFile {
              position: absolute;
              left: 0;
              top: -1px;
              z-index: 3;
              height: 30px;
              width: 268px;
              opacity: 0;
          }
        .errTip {
              position: absolute;
              top: 20px;
              left: 50%;
              margin-left: -90px;
              color: red;
              font-size: 12px;
          }
        .fileName {
              width: 210px;
              height: 30px;
              position: absolute;
              left: 0;
              top: -2px;
              z-index: 1;
              color: #000;
              text-align: center;
              background-color: transparent;
              border-color: transparent;
              overflow: hidden;
              text-overflow: ellipsis;
          }
        .path {
              width: 55px;
              height: 30px;
              background-color: #2fc8f6;
              display: inline-block;
              position: absolute;
              top: -2px;
              right: 0;
              z-index: -1;
              text-align: center;
              vertical-align: middle;
              border-radius: 0px 3px 3px 0px;
              -webkit-border-radius: 0px 3px 3px 0px;
              -moz-border-radius: 0px 3px 3px 0px;
          }
          .pathText {
              display: inline-block;
                font-size: 12px;
                line-height: 30px;
                color: #fff;
                letter-spacing: 3px;
          }
        </style>
    </head>
    <body>
        <div class="fileIpt">
          <label class="label-text" for="inputDataBackup1">选择文件</label>
          <div id="inputDataBackup1" class="input-selectStyle">
            <input class="selectFile" type="file" multiple="multiple" title="未选择任何文件">
            <p class="errTip"></p><input class="fileName" readonly="readonly">
            <div class="path">
              <span class="pathText">上传</span>
            </div>
          </div>
        </div>
        <script type="text/javascript">
            $(".selectFile").on("change",function(){
                console.log($(this))
                var filesNum = $('.selectFile')[0].files.length;
                if(filesNum > 1){
                    var fileTiltle = [];
                    for(var i = 0 ;i<filesNum;i++){
                        var file=$('.selectFile')[0].files[i];
                        console.log(file.name);
                        fileTiltle.push(file.name)
                    }
                    $(".fileName").val(fileTiltle.join(","));
                    $(this).attr("title",filesNum+'个文件');
                }else if(filesNum == 1){
                    var filePath = $(this).val();
                    var urlArr = filePath.split("\\");
                    var fileName = urlArr[urlArr.length-1];
                    $(".fileName").val(fileName);
                    $(this).attr("title",fileName);
                }
            
            if(fileName == "") {
                $(".errTip").html("请选择上传文件");
            }else{
                $(".errTip").html("");
            }
        })
        </script>
    </body>
     
    </html>

     

    展开全文
  • 1、直接获取文件的内容: <form id="form" method="post" enctype="multipart/form-data">...input type="file" id="input"> </form> <button id="button">获取内容</butto...

    1、直接获取文件中的内容:

    复制代码
    <form id="form" method="post" enctype="multipart/form-data">
        <input type="file" id="input">
    </form>
    <button id="button">获取内容</button>
    
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $("#button").click(function () {
            console.log(document.getElementById("input").files[0]);
        });
    </script>
    复制代码

    2、动态添加input,并分别获得每个input中的file内容(此处不能用id获取内容)

    复制代码
    <div id="div"></div>
    <button id="button">添加</button>
    
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $("#button").click(function () {
            var $add = $('<div id="div2" style="border: 1px solid red;">' +
                    '<input class="input" type="file">' +
                    '<button class="upload">upload</button>' +
                    '</div>');
            $("#div").append($add);
            $add.find('.upload').click(function () {
                console.log($add.find('.input')[0].files[0]);
            });
        });
    </script>
    复制代码
    如何联系我:【万里虎】www.bravetiger.cn 【QQ】3396726884 (咨询问题100元起,帮助解决问题500元起) 【博客】http://www.cnblogs.com/kenshinobiy/
    展开全文
  • **今天来和大家分享一下input type="file"的默认样式修改相关问题** 首先<input type="file">文件默认条件下在各大浏览器的样式是不一样的,而且很丑,相信很多做前端开发的朋友都需要修改一下它的默认样子。...

    **今天来和大家分享一下input type="file"的默认样式修改相关问题**
     首先<input type="file">文件默认条件下在各大浏览器的样式是不一样的,而且很丑,相信很多做前端开发的朋友都需要修改一下它的默认样子。因此我在这用两种方式解决以下问题:
     1.隐藏input,用label代替input标签显示在页面上,代码如下:
     

    <style type="text/css">
        input[type="file"] {
            display: none;
        }
        label{
            display: inline-block;
            height: 30px;
            line-height: 30px;
            width: 50px;
            text-align: center;
            background: #1f64b0;
            color: #fff;
            cursor: pointer;
        }
        input[type="text"]{
            height: 25px;
            width:150px; 
            position: relative;
            top: -1px;
        }
        p{color: #f00;}
    </style>
        <div>
            <p>只获取文件名</p>
            <input type="file" name="" id="files" onchange="uploadFile(this)">
            <label for="files">浏览</label><input type="text" name="" id="txtFile">
        </div>
    
        <div>
            <p>获取文件路劲,但是浏览器会默认用fakepath代替文件的真实路劲</p>
            <input type="file" name="" id="file" onchange="document.getElementById('txtFileUrl').value=this.value" >
            <label for="file">浏览</label><input type="text" name="" id="txtFileUrl">
        </div>
        <script type="text/javascript">
            function uploadFile(e) {
                var name = event.target.files[0].name;//获取上传的文件名
            
                $('#txtFile').val(name);
            }
        </script>


    2.,以前我一直是用第一种方法来修改file的默认样式的,没有任何问题
     但这次做项目的时候,发现这样写,当浏览器调到“兼容模式”后,上传文件就会跳转到一个空白的页面。所以也就有了等会要介绍的第二种方法了。将<input type="file">的透明度设为0,然后将文本框和按钮定位在file上面,来实现上传文件的功能,代码如下:
     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <style type="text/css">
        .file {
    position:relative;
    width:226px;
    height:30px;
    border:1px #ccc solid;
    }
    .file input {
    font-size:16px;
    margin:0;
    padding:0;
    position:relative;
    vertical-align:middle;
    outline:none;
    }
    .file input[type="text"] {
    border:3px none;
    width:162px;
    z-index:4;
    font-size: 12px;
    padding-left: 10px;
    }
    .file input[type="button"] {
    width:54px;
    height:30px;
    z-index:2;
    background: #1f64b0;
    color: #fff;
    outline: none;
    border: none;
    }
    .file input[type="file"] {
    position:absolute;
    right:0px;
    height:30px;
    opacity:0;
    z-index:3;
    cursor: pointer;
    }
    p{color: #f00;}
    </style>
    <body>
        <p>在浏览器的兼容模式下,用label修改的input file上传文件会跳转到空白页面,所以换一种方式来改变样式</p>
        <div class="file">
            <input type="button" value="浏览" /><input type="text" value="未选择文件" /><input type="file" />
        </div>
    </body>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script>
        window.onload=function(){
            var file=document.querySelector(".file input[type='file']");
            var text=document.querySelector(".file input[type='text']");
            file.addEventListener("change",assign,false);
            function assign(){
                text.value=file.value;
            }
        }
    </script>
    </html>

     

    展开全文
  • js获取 input file 图片立即显示

    热门讨论 2014-12-05 10:20:12
    js获取input file控件选择的图片 并且立即在img标签显示出来
  • js获取input file路径改变图像地址

    千次阅读 2016-08-19 14:10:13
    html, input file, file, 获取input file路径, js
  • 获取input file文件

    2019-09-10 09:17:19
    var file = $('#image_file')[0].files[0];
  • 下面小编就为大家带来一篇JS获取input file绝对路径的方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 中选图片的一些信息,比如说图片的宽高等等,但是我们知道的,通过file控件的onchange事件只能获取到文件的一些基本信息,像文件大小,最后修改时间等等. 嗯哼,首先先想想前提,怎样才能获得一个图片的宽高呢?...
  • input file获取文件路径

    万次阅读 热门讨论 2019-10-28 16:36:20
    html代码段: <input type="file" @change.prevent.stop="upload"> vue script代码段: data() { fileName: '' }, methods: { upload(event) { let files = event.target.files[0]; th...
  • 其实吧 是通过input file文件选择框的一个 change事件 监听回调进行文件的信息的获取的 原生js是 var file = document.querySelector('input[type=file]'); file.addEventListener('change', function() { ...
  • 获取 input file 文件域的路径

    千次阅读 2013-04-08 15:49:54
    获取input file的路径 //FX获取文件路径方法 function readFileFirefox(fileBrowser) { try { netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); } cat
  • input file multiple获取文件名

    千次阅读 2019-05-20 08:49:27
    input file multiple获取文件名(以分号分隔) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> ...
  • 使用js获取input file的路径

    万次阅读 2018-01-31 21:38:10
    有时候,我们给程序添加完一个功能,在本地测试是完全可以正常运行的,但一发布到Web上就各种报错,这时候我们就需要注意啦!...但当通过js的onchange事件动态获取input file 的路径的时候,发现console.log(pa
  • 获取input-file的文件名、后缀名(兼容IE) 源代码: function change(e){  var src=e.target || window.event.srcElement; //获取事件源,兼容chrome/IE  src.style....
  • 获取input file的数据

    2019-10-24 21:33:44
    let startInput=$("#input_start").get(0).files[0];
  • $("#shop_img").change(function (e) { var file, img; if ((file = this.files[0])) { img = new Image(); img.onload = function () { if(this.width != 640 || this.he...
  • <input type="file" name="file" id="file"/> 用var fileName = document.getElementById("file").value;得到file的上传路径,但是在IE8或更高版本的IE得到的路径是:c:\fakepath\xxx路径,怎么才能得到上传的...
  • 前台页面 ``` <input type="file" id="f"> ``` 如何在后台java中获取此上传文件的大小?
  • input file美化

    千次阅读 2016-07-11 22:56:58
    input file太丑了,所以美化那是势在必行的。方法很多种。我就介绍两种方法.1.利用一个按钮去触发input file。 如图: html代码:<input type="text" id="show-path" style="height: 30px"/> 选择文件 <input ...
  • 获取input type=file的文件路径

    千次阅读 2018-01-25 11:59:44
    获取input type=file的文件路径
  • 获取input file属性,预览图片

    千次阅读 2019-02-14 16:49:13
    如何在input的type属性等于file获取选择的图片信息,进行预览 &lt;input type="file" class="my-file" /&gt; &lt;img class="my-img" src="#"/&gt; ...
  • 在开始时,遇到inputfile获取到files后,刚开始以为files是数组,于是用了数组的一些方法,发现报错,一直得不到想要的结果,于是大胆猜想files为伪数组,并将之进行转化,转为真正的数据就能运用数组的方法...
  • js清空input file的值

    万次阅读 多人点赞 2017-08-07 16:11:15
    今天在做选择本地图片上传的功能时遇到一个问题,第一次选择图片完成会触发onchange事件,获取文件后动态在界面上创建img标签展示,这个过程没有问题,问题出在当把创建的img元素节点删除后,再点file控件选中同一个...
  • var file1= document.getElementById("file1").value;// 判断浏览器类型,防止浏览器将文件路径设为C:/fakepath/ var isIE = (document.all) ? true : false; var isIE7 = isIE && (navigator.userAgent.indexOf('...
  • input:file是一个文件上传控件,如何读取input:file的路径并显示图片,具体实现如下,需要注意的是在IE8由于IE8自作聪明的将真实路径隐藏起来
  • Js/Jquery获取input file的文件名

    千次阅读 2019-08-01 23:32:32
    input type="file" name="file" id="file" class="input_text80" /> 方法一:字符串截取 var file = $("#file").val(); var fileName = getFileName(file); function getFileName(o){ var pos=o.lastIndexOf...
  • 现在想用FFmpeg编辑视频,需要将input中选定视频本地路径传输到后台, 但是前台无法获取文件的本地路径,后台没法操作,各位大师,求支招,谢谢啦!!!

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 365,361
精华内容 146,144
关键字:

获取input中的file