Lập trình kích hoạt hộp thoại “chọn tệp”

Tôi có một phần tử đầu vào tệp ẩn. Có thể kích hoạt hộp thoại tệp đã chọn của nó từ sự kiện nhấp vào nút không?

Nếu bạn đang muốn có nút của riêng mình để tải tệp lên thay vì sử dụng <input type="file" />, bạn có thể làm như sau:

<input id="myInput" type="file" style="visibility:hidden" />
<input type="button" value="Show Dialog" onclick="$('#myInput').click();" />

Lưu ý rằng tôi đã sử dụng visibility: hidden, thay vì display: none. Bạn không thể gọi sự kiện nhấp chuột trên đầu vào tệp không được hiển thị.

Hầu hết các câu trả lời ở đây đều thiếu thông tin hữu ích:

Có, bạn có thể lập trình nhấp vào phần tử đầu vào bằng jQuery / JavaScript, nhưng chỉ khi bạn thực hiện việc đó trong trình xử lý sự kiện thuộc một sự kiện ĐƯỢC NGƯỜI DÙNG BẮT ĐẦU!

Vì vậy, chẳng hạn, sẽ không có gì xảy ra nếu bạn, tập lệnh, nhấp vào nút theo chương trình trong lệnh gọi lại ajax, nhưng nếu bạn đặt cùng một dòng mã trong trình xử lý sự kiện do người dùng đưa ra, nó sẽ hoạt động.

PS debugger;Từ khóa làm gián đoạn cửa sổ duyệt nếu nó ở trước khi nhấp chuột có lập trình ... ít nhất là trong chrome 33 ...

Chỉ đối với bản ghi, có một giải pháp thay thế không yêu cầu javascript. Đó là một chút hack, khai thác thực tế là việc nhấp vào một nhãn đặt trọng tâm vào đầu vào liên quan.

Bạn cần một thuộc tính <label>thích hợp for(trỏ tới đầu vào), phân tích tùy chọn theo kiểu một nút (với bootstrap, sử dụng btn btn-default). Khi người dùng nhấp vào nhãn, hộp thoại sẽ mở ra, ví dụ:

<!-- optionnal, to add a bit of style -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<!-- minimal setup -->
<label for="exampleInput" class="btn btn-default">
  Click me
</label>
<input type="file" id="exampleInput" style="display: none" />

Tôi không chắc cách trình duyệt xử lý các nhấp chuột vào type="file"các phần tử (các mối quan tâm về bảo mật và tất cả), nhưng điều này sẽ hoạt động:

$('input[type="file"]').click();

Tôi đã thử nghiệm JSFiddle này trong Chrome, Firefox và Opera và tất cả chúng đều hiển thị hộp thoại duyệt tệp.

Tôi bọc thẻ input[type=file]trong một thẻ nhãn, sau đó tạo kiểu labeltheo ý thích của bạn và ẩn input.

<label class="btn btn-default fileLabel" data-toggle="tooltip" data-placement="top" title="Upload">
    <input type="file">
    <span><i class="fa fa-upload"></i></span>
</label>

<style>
    .fileLabel input[type="file"] {
        position: fixed;
        top: -1000px;
    }
</style>

Giải pháp hoàn toàn CSS.

<input type="file">Thật không may, cách duy nhất là tạo một phần tử và sau đó mô phỏng một cú nhấp chuột.

Có một plugin nhỏ (plugin không biết xấu hổ) sẽ giúp bạn không phải làm điều này mọi lúc: tệp-hộp thoại

fileDialog()
    .then(file => {
        const data = new FormData()
        data.append('file', file[0])
        data.append('imageName', 'flower')

        // Post to server
        fetch('/uploadImage', {
            method: 'POST',
            body: data
        })
    })

Giải pháp tốt nhất, hoạt động trên tất cả các trình duyệt .. ngay cả trên thiết bị di động.

<div class="btn" id="s_photo">Upload</div>

<input type="file" name="s_file" id="s_file" style="opacity: 0;">';

<!--jquery-->

<script>
    $("#s_photo").click(function() {
        $("#s_file").trigger("click");
    });
</script>

Ẩn loại tệp đầu vào gây ra sự cố với trình duyệt, độ mờ là giải pháp tốt nhất vì nó không ẩn, chỉ không hiển thị. :)

Không có trình duyệt chéo nào để làm điều đó, vì lý do bảo mật. Những gì mọi người thường làm là phủ tệp đầu vào lên một thứ khác và đặt chế độ hiển thị của nó thành ẩn để nó tự kích hoạt. Thêm thông tin ở đây.

Đảm bảo rằng bạn đang sử dụng ràng buộc để nhận các đạo cụ thành phần trong REACT

class FileUploader extends Component {
  constructor (props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
   onChange=(e,props)=>{
    const files = e.target.files;
    const selectedFile = files[0];
    ProcessFileUpload(selectedFile,props.ProgressCallBack,props.ErrorCallBack,props.CompleatedCallBack,props.BaseURL,props.Location,props.FilesAllowed);
  }
   handleClick = () => {
    this.refs.fileUploader.click();
  }
  render()
  {
  return(
      <div>
        <button type="button" onClick={this.handleClick}>Select File</button>  
        <input type='file' onChange={(e)=>this.onChange(e,this.props)} ref="fileUploader" style={{display:"none"}} />
      </div>)
  }
}

Sử dụng jQuery, bạn có thể gọi click()để mô phỏng một cú nhấp chuột.

Điều này đã làm việc cho tôi:

$('#fileInput').val('');

Đối với những người muốn tương tự nhưng đang sử dụng React

openFileInput = () => {
    this.fileInput.click()
}

<a href="#" onClick={this.openFileInput}>
    <p>Carregue sua foto de perfil</p>
    <img src={img} />
</a>
<input style={{display:'none'}} ref={(input) => { this.fileInput = input; }} type="file"/>

<div id="uploadButton">UPLOAD</div>
<form action="[FILE_HANDLER_URL]" style="display:none">
     <input id="myInput" type="file" />
</form>
<script>
  const uploadButton = document.getElementById('uploadButton');
  const myInput = document.getElementById('myInput');

  uploadButton.addEventListener('click', () => {
    myInput.click();
  });
</script>