时间戳

首页 > 解决方案 > 一键选择文件上传

javascript - 一键选择文件上传

问题描述

我只需要创建一个选择文件并上传的按钮。我创建了一个选择文件的按钮，但它不会触发上传按钮中的 onclick 功能。

举个例子，我有一个 hello 按钮，它只是用来控制某些东西，但实际上它会对选定的文件做一些事情。

    <div class="upload-btn-wrapper">
       <button class="btn" onClick ="hello()">Upload a file</button>
       <input type="file" name="myfile"/>
    </div>



.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.btn {
  border: 2px solid gray;
  color: gray;
  background-color: white;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: bold;
}

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}


function hello() {
 console.log("hello");
}

codePen 链接：https ://codepen.io/anon/pen/wOmNJw

标签： javascripthtmlcss

解决方案

输入覆盖按钮单击侦听器。如果您尝试对文件执行某些操作，则应将更改侦听器应用于输入并在那里运行函数。您可以使用或不使用 jquery 来执行此操作。


香草 JS（没有 Jquery）

document.getElementsByName('myfile')[0].addEventListener('change', function(){
    hello(this);
});


function hello(elem) {
    console.log('Hello');
    console.log('File Name: ', elem.value);
}
.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.btn {
  border: 2px solid gray;
  color: gray;
  background-color: white;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: bold;
}

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
<div class="upload-btn-wrapper">
       <button class="btn" onClick ="hello()">Upload a file</button>
       <input type="file" name="myfile"/>
    </div>


使用 jQuery

$('input[name="myfile"]').on('change', hello);

function hello() {
 console.log("hello");
}
.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.btn {
  border: 2px solid gray;
  color: gray;
  background-color: white;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: bold;
}

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="upload-btn-wrapper">
       <button class="btn" onClick ="hello()">Upload a file</button>
       <input type="file" name="myfile"/>
    </div>


编辑：反应示例

// Example class component
class InputExample extends React.Component {
  handleFileChange(e){
      console.log('Hello');
      console.log('File Name: ', e.target.value);
  }
  
  render() {
    return (
      <input
        id="upload" 
        ref="upload" 
        type="file" 
        accept="image/*"       
        multiple="false"
        onChange={(e) => this.handleFileChange(e)}/>
    );
  }
}

// Render it
ReactDOM.render(
  <InputExample />,
  document.getElementById("react")
);
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

推荐阅读