< meta charset = " UTF-8 " > < meta http-equiv = " X-UA-Compatible " content = " IE=edge " > < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " > < title > Document </ title > </ head > < span > 文件名: </ span > < input type = " text " id = " doc " > < button > 选择文件 </ button > < input type = " file " id = " upload " onchange = " getFile(value) " style = " opacity : 0.5 ; margin-left : -74px ; width : 74px ; " > </ body > </ html > < script > function getFile ( value ) { // 获取文本框dom var doc = document . getElementById ( 'doc' ) ; // 获取上传控件dom var upload = document . getElementById ( 'upload' ) ; // 获取文件名 var fileName = upload . files [ 0 ] . name ; // 获取文件路径 var filePath = upload . value ; // 将文件名载入文本框 doc . value = fileName ; console . log ( fileName ) ; console . log ( filePath ) ; </ script >

vue代码

<template>
    <span>文件名:</span>
    <input type="text" ref="filePath">
    <button>选择文件</button>
    <input type="file" ref="upload"
      name="file" class="upload"
      @change="getFileNameToText" multiple="multiplt"
  </div>
</template>
<script>
export default {
  methods: {
    getFileNameToText() {
      // 获取上传控件dom
      var fileObj = this.$refs['upload'];
      // 获取文件名
      var fileName = fileObj.files[0].name;
      // 获取文件路径
      var filePath = fileObj.value;
      // 将文件名载入文本框
      this.$refs['filePath'].value = fileName;
      console.log(fileName, 'fileName');
      console.log(filePath, 'filePath');
</script>
<style scoped>
.upload {
  opacity: 0;
  width: 74px;
  margin-left: -74px;
</style>
                                    注意:input[type=file] 标签中的属性accept=application/msword,application/pdf 在pc上正常,但是在手机ios和android上这个文件格式限制会被忽略,所以需要在js中增加格式的判断,以及对应显示样式的设置.(我也是刚发现,如果有遇到这个问题的可以参考下—下面有更改:)
<template>
<div id=my-careers>
<head-top id=header>
<i slot=left class=iconfont></i>
<span slot=title>Appl
        style="height: 70px; margin-left: 100px; margin-top: 15px"
        <div class="add-file-right-img" style="margin-left: 70px">
          上传文件input标签的typefile时,可以获取文件,但是获取路径却会被现在的浏览器保护起来,变成了一个假路径。
我本想通过这个来改变video标签的src实现播放器,但是目前网上的方法都不管用。有待解决...
let getUrl = function(flie) {
    let url = ''
    if (window.createObjectURL!=undefined) { // basic
        url = window.createObjectURL(flie) ;
    }else if (window.webkitURL!=undefined) { // webkit or chrome
        url = window.web
                                    1. 前言 Java 开发中我们经常要获取文件路径,比如读取配置文件等等。今天我们就关于文件路径和如何读取文件简单地探讨一下。2. 文件路径 文件路径通常有 相对路径 与 绝对路...
                                    需求:使用input框来上传图片类型或者文件,并且在选择图片之后立刻回显出来,也就是获取完整路径。使用< input type="file"/>在选定图片后再< img src="xxx"/>。今天在实现这个需求的时候主要是出现了三个问题:
- 如何获取文件完整路径
- 如何选择文件后立刻回显图片
- 什么时候获取完整路径和回显图片
先来解决第一个问题吧。如何获取完整路径,我也在csdn上面看了挺多博客才解决的,但是我发现大多数都是不太清楚的,就是有些讲了但是没有解释,导致我看不懂,有些是无法实现功能。
                                    http://blog.csdn.net/comikey/article/details/8954479
解决思路是把input放在文字的上边,弄成透明的,这样在点文字时,实际是点击了input,这样就实现了文件上传。是不是很简单呀。
具体代码:
<style>
#uploadImg{font-size:12px;overflow:hidden;...
                                    有时候,我们给程序添加完一个功能,在本地测试是完全可以正常运行的,但一发布到Web上就各种报错,这时候我们就需要注意啦!
页面有一个input file服务器控件,一个div,div是image标签的容器,当点击input file的值改变,我们往div里追加image标签;
但当通过js的onchange事件动态获取input file路径的时候,发现console.log(pa
                                    页面有一个input file服务器控件,一个div,div是image标签的容器,当点击input file的值改变,我们往div里追加image标签;但当通过js的onchange事件动态获取input file路径的时候,发现console.log(path)打印出的路径是被浏览器屏蔽的,例如:C:\fakepath\file.jpg这是由于浏览器的安全机制,input file路径被...
文件整理常常会浪费很多时间。但如果让机器来做这样复杂的事情,不到 10 秒钟就能完成 1 个小时工作。
进行文件整理最直接的方式就是通过文件类型进行整理。所有的 txt 文件放在一个叫做 txt 文件文件夹,exe 文件放在另一个叫做 exe 文件文件夹里。
导入两个模块,shutil 和 os。os 模块可以帮助我们读取文件夹的文件和创建分类文件文件夹。而 shuti...
                                    一般网页上传文件大家都会用到这个标签<input type='file' id='file_input'/>我们可以通过这个标签选取文件,使用js进行文件上传等操作,同时,该标签同时可以选取多个文件<input type="file" id='file_input' multiple="multiple" />但有些时候,进行其他操作的时候,用户需要获得文件路径,那么这种写法可以用该标签选取文件夹
  nwdirectory=""
  ref={ref => {this.srcFolder = ref;}}
  onChange={(e) => {this.changeFolder(e);}}
/&gt...