donglang2010 2018-12-02 03:41
浏览 69


Right now I have it as when a user clicks on the image the file browser will open up. But what I want is for after the file browser has opened and a file is chosen, once you click "open" the form will submit and the image will upload.

This is the closest I have gotten using the answer chosen here: Open File Browser on Link Click


<div class="col-sm-6">
    <img height="120" width="140" id="profileImage" alt="profile-image" class="userimg" style="margin-bottom: 1rem;" onclick="document.getElementById('imageFile').click();" src="<?php echo $image_src; ?>" />

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>?id=<?php echo $childId; ?>" method="post" enctype="multipart/form-data" id="imageForm" name="imageForm" class="text-center">
  <!--  <input type="submit" id="btn-imageUpload" value="Submit" name="submit" /> -->
    <input type="file"  style="display:none;" id="imageFile" name="profile-photo" onchange="this.form.submit() enctype=”multipart/form-data” capture/>

It almost worked.. When I click "open" in the file browser the page submits and refreshes, but the photo was not uploaded at all.

But it works fine if I submit using the "submit" button on the page instead of the "open" button in the file browser.

  • 写回答

1条回答 默认 最新

  • douzhenao6515 2018-12-02 03:52

    Add an event listener to your file input. Once it recognizes a change you can send them to where they need to go. Or make the request via AJAX.

    var form = document.querySelector('#profile_image'),
          input = document.querySelector('input[name="picture"]');
    input.addEventListener('change', e => {
      // form.submit(); // Uncomment this line or change it to your preferred AJAX mechanism
      document.querySelector('body').innerHTML += 'Event Listener worked!';
    <form action="/upload/profile/<?=$childId?>" method="POST" id="profile_image">
      <input type="file" name="picture" />

    This should easily submit your form.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?



    • ¥15 霍利韦尔软件web station N4的安装密码忘记了能找回吗
    • ¥20 帮电子新生画个仿真图吧🥰
    • ¥25 实验:WordCount案例实践(根据实验指导书编写实验报告。要求:文字加图)
    • ¥20 基于STM32F407设计一个贪食蛇游戏,要求:1有开始 、结束界面,能进行游戏设置,如:界面颜色,蛇移动速度。2蛇体能上下左右移动且在界面能随机生成食物,蛇吃后会变长;3小蛇碰壁死亡,显示游戏结束。
    • ¥15 摁摁钮(接P3.4口)无法实现点阵管播放速度调节,大家能帮我看看是什么问题吗?TAT
    • ¥15 小型网络防火墙mstp.vrrp.ospf配置
    • ¥15 grafna发送告警信息
    • ¥15 51单片机,LCD屏幕内容修改
    • ¥20 Ida Pro动态调试
    • ¥15 TensorFlow深度学习拓展项目