ทริกเกอร์กล่องโต้ตอบ "เลือกไฟล์" โดยใช้โปรแกรม

ฉันมีองค์ประกอบอินพุตไฟล์ที่ซ่อนอยู่ เป็นไปได้ไหมที่จะเรียกใช้กล่องโต้ตอบเลือกไฟล์จากเหตุการณ์การคลิกของปุ่ม

หากคุณต้องการมีปุ่มของคุณเองเพื่ออัปโหลดไฟล์แทนที่จะใช้<input type="file" />คุณสามารถทำสิ่งต่อไปนี้

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

โปรดทราบว่าฉันใช้visibility: hiddenแทนdisplay: none. คุณไม่สามารถเรียกเหตุการณ์การคลิกบนอินพุตไฟล์ที่ไม่แสดง

คำตอบส่วนใหญ่ขาดข้อมูลที่เป็นประโยชน์:

ได้คุณสามารถคลิกองค์ประกอบอินพุตโดยใช้โปรแกรม jQuery / JavaScript แต่ถ้าคุณทำในตัวจัดการเหตุการณ์ที่เป็นของเหตุการณ์ที่เริ่มโดยผู้ใช้!

ตัวอย่างเช่นจะไม่มีอะไรเกิดขึ้นหากคุณซึ่งเป็นสคริปต์คลิกปุ่มโดยใช้โปรแกรมในการโทรกลับของ ajax แต่ถ้าคุณใส่บรรทัดรหัสเดียวกันในตัวจัดการเหตุการณ์ที่ผู้ใช้ยกขึ้นมามันจะทำงานได้

ปล. debugger;คีย์เวิร์ดจะรบกวนหน้าต่างเบราส์หากอยู่ก่อนการคลิกแบบโปรแกรม ... อย่างน้อยใน chrome 33 ...

สำหรับบันทึกมีทางเลือกอื่นที่ไม่ต้องใช้จาวาสคริปต์ เป็นการแฮ็กเล็กน้อยโดยใช้ประโยชน์จากข้อเท็จจริงที่ว่าการคลิกที่ป้ายกำกับจะกำหนดโฟกัสไปที่อินพุตที่เกี่ยวข้อง

คุณต้อง<label>มีforแอตทริบิวต์ที่เหมาะสม(ชี้ไปที่อินพุต) ตัวเลือกสไตล์เหมือนปุ่ม (พร้อม bootstrap ใช้btn btn-default) เมื่อผู้ใช้คลิกที่ป้ายข้อความกล่องโต้ตอบจะเปิดขึ้นเช่น:

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

ฉันไม่แน่ใจว่าเบราว์เซอร์จัดการกับการคลิกtype="file"องค์ประกอบอย่างไร (ข้อกังวลด้านความปลอดภัยและทั้งหมด) แต่ควรได้ผล:

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

ฉันได้ทดสอบJSFiddle นี้ใน Chrome, Firefox และ Opera แล้วพวกเขาทั้งหมดแสดงกล่องโต้ตอบการเรียกดูไฟล์

ฉันห่อinput[type=file]ป้ายกำกับจากนั้นจัดรูปแบบตามlabelที่คุณต้องการและซ่อนไฟล์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>

โซลูชัน CSS ล้วนๆ

วิธีเดียวคือการสร้างไฟล์ <input type="file">องค์ประกอบจากนั้นจำลองการคลิก แต่น่าเสียดาย

มีปลั๊กอินเล็ก ๆ (ปลั๊กไร้ยางอาย) ซึ่งจะช่วยลดความเจ็บปวดจากการต้องทำสิ่งนี้ตลอดเวลา: ไฟล์โต้ตอบ

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
        })
    })

ทางออกที่ดีที่สุดใช้งานได้ในทุกเบราว์เซอร์ ... แม้กระทั่งบนมือถือ

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

การซ่อนประเภทไฟล์อินพุตทำให้เกิดปัญหากับเบราว์เซอร์ความทึบเป็นวิธีแก้ปัญหาที่ดีที่สุดเพราะไม่ได้ซ่อน แต่ไม่แสดง :)

ไม่มีวิธีการข้ามเบราว์เซอร์ด้วยเหตุผลด้านความปลอดภัย สิ่งที่ผู้คนมักทำคือวางซ้อนไฟล์อินพุตทับอย่างอื่นและตั้งค่าการเปิดเผยเป็นซ่อนเพื่อให้ถูกเรียกใช้เอง ข้อมูลเพิ่มเติมที่นี่

ตรวจสอบให้แน่ใจว่าคุณใช้การผูกเพื่อรับอุปกรณ์ประกอบฉากในปฏิกิริยา

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>)
  }
}

การใช้ jQuery คุณสามารถเรียกclick()เพื่อจำลองการคลิก

สิ่งนี้ใช้ได้ผลสำหรับฉัน:

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

สำหรับผู้ที่ต้องการแบบเดียวกัน แต่ใช้ 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>