一键文件选择和上传

Question

我只需要创建一个按钮来选择文件并上传.. 我创建了一个选择文件的按钮，但它不会触发上传按钮中的 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

Answer 1

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

编辑：React 示例

// 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>

Answer 2

我对您的代码进行了一些更改，并且可以正常工作：

JS 文件

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

    document.querySelector('.upload-btn-wrapper input[type=file]').click();
}

CSS 文件

.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;
  opacity: 0;
}

Answer 3

如果这是您正在寻找的。

document.getElementById("fileInput").addEventListener("change", function(event, val){
  let file = event.target.value;
  
  if(!!file){
     document.getElementById("inputWrapper").style.display = "none";
     document.getElementById("upload").style.display = "block";
  }

});

.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">

  <input type="submit" value="Upload" class="btn" style="display:none" id="upload" />

  <div id="inputWrapper">
    <span><input type="file" name="myfile" id="fileInput"/></span>
    <span><button class="btn">Select file</button>    </span>
  </div>

</div>