一键选择和上传文件

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来执行此操作。

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