「已注销」 2021-05-10 21:02 采纳率: 50%
浏览 58
已采纳

关于input:file的一个问题

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<button id="addImageBtn">添加图片</button>
<script>
    var addImageBtn = document.getElementById('addImageBtn');
    addImageBtn.onclick = function () {
        var inputElement = document.createElement('input');
        inputElement.type = 'file';
        inputElement.click();
        /**
         * 我要在这里做一个判断：判断用户是否选择了文件。现在的窘境是：打开文件选择对话框，js继续往下执行了。等我选择了或者没有选择文件（总之是关闭文件选择对话框），就啥也不会发生了。
         * 判断：
         *  如果选择了文件，就添加到文档中；没有选择文件，就返回。
         */
        document.body.appendChild(inputElement);
    };
</script>
</body>
</html>
  • 写回答

7条回答 默认 最新

  • Go 旅城通票 2021-05-10 22:01
    关注

    变通下。。

    <!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <style>#file{position:relative;display:inline-block;overflow:hidden}
    #file input[type=file]{position:absolute;left:0;top:0;font-size:100px;opacity:0}</style>
    <div id="file">
        <button>添加图片</button>
        <input type="file" />
    </div>
    <script>
        var file = document.getElementById('file');
        function fileChange() {
            if (this.value) {
                document.body.appendChild(this);
                var newfile = document.createElement('input');
                newfile.type = 'file';
                newfile.onchange = fileChange;
                file.appendChild(newfile);
            }
        }
        file.querySelector('input').onchange = fileChange;
    </script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(6条)

报告相同问题？

悬赏问题

  • ¥15 微信会员卡接入微信支付商户号收款
  • ¥15 如何获取烟草零售终端数据
  • ¥15 数学建模招标中位数问题
  • ¥15 phython路径名过长报错 不知道什么问题
  • ¥15 深度学习中模型转换该怎么实现
  • ¥15 HLs设计手写数字识别程序编译通不过
  • ¥15 Stata外部命令安装问题求帮助！
  • ¥15 从键盘随机输入A-H中的一串字符串，用七段数码管方法进行绘制。提交代码及运行截图。
  • ¥15 TYPCE母转母，插入认方向
  • ¥15 如何用python向钉钉机器人发送可以放大的图片？