Lấy đối tượng tập tin từ tập tin Đầu vào

Question

Tôi đang cố sử dụng đầu vào tập tin phản ứng-bootstrap với jquery fileupload(). Với jquery thẳng tôi sẽ làm $('#fileUpload').prop('files') để có được các tập tin để vượt qua để gọi tập tin tải lên. Tuy nhiên, tôi không biết làm thế nào để có được các tập tin một cách chính xác với phản ứng-bootstrap.

<Input type='file' label='Upload' accept='.txt' ref='fileUpload' buttonAfter={uploadFileButton}/> 

Answer 1

Thuộc tính chuỗi ref là considered legacy và rất có thể sẽ không được dùng nữa vào một thời điểm nào đó trong tương lai. Cách để làm điều này bây giờ là với một ref gọi lại. Dưới đây tôi chứng minh bằng cách sử dụng một chức năng mũi tên ES6.

Thay đổi yếu tố đầu vào của bạn để:

<Input 
    type='file' label='Upload' accept='.txt' 
    buttonAfter={uploadFileButton} 
    ref={(ref) => this.fileUpload = ref} 
/> 

Sau đó, bạn có thể sử dụng:

const file = this.fileUpload.files[0];

Và vân vân.

Answer 2

Khá thẳng về phía trước; Tôi hoàn toàn bỏ lỡ điều này:

var files = this.refs.fileUpload.getInputDOMNode().files; 

Answer 3

Thêm vào fahad's answer, nếu bạn không thể sử dụng chức năng mũi tên (do hỗ trợ trình duyệt cũ hơn hoặc vì một số lý do khác), bạn phải liên kết ngữ cảnh React với hàm.

<Input type='file' label='Upload' accept='.txt' 
    buttonAfter={uploadFileButton} 
    ref={ function(ref) { this.fileUpload = ref }.bind(this) } 
/> 

Answer 4

Điều này phù hợp với tôi.

cho phép tệp = this.refs.fileUpload.files [0];

Answer 5

tôi giải quyết upload file như thế này cho React-Bootstrap với một nút tìm kiếm tùy chỉnh:

addFile = (event: any): void => { 
    console.log(event.target.files[0]); 
} 

<FormGroup> 
    <ControlLabel htmlFor="fileUpload" style={{ cursor: "pointer" }}><h3><Label bsStyle="success">Add file</Label></h3> 
     <FormControl 
      id="fileUpload" 
      type="file" 
      accept=".pdf" 
      onChange={this.addFile} 
      style={{ display: "none" }} 
     /> 
    </ControlLabel> 
</FormGroup>