little亮~
2021-04-16 00:06
采纳率: 50%
浏览 169

input中选择文件后,却显示未选择任何文件?

input中选择文件后,却显示未选择任何文件?

 

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
    //可以选择多个文件加载在页面
    function read() {
        var file = document.getElementById("file");
        var imgDiv = document.getElementById("imgDiv");
        for (var i = 0; i < file.files.length; i++) {
            let reader = new FileReader();
            var file1 = file.files[i];
            reader.readAsDataURL(file1);
            reader.onload = function (result) {
                //reader对象的result属性存储流读取的数据
                imgDiv.innerHTML += '<img src="' + reader.result + '" alt=""/>'
            }
        }
    }
</script>
</head>
<body>
<div id="imgDiv">
    <input type="file" id="file" onchange="read()" accept="image/*">

</div>
</body>
</html>

就是我打算选择一个图片后可以立马显示,但是我发现,当吧input标签放在div标签(这个div标签是之后需要使用img标签来显示图片的)里面的时候,就算选择文件后,且图片能正常显示,input却始终显示未选择任何文件

 

 

但是当吧input标签放在div标签外面的时候,图片可以正常显示,且会显示已选择文件

放在外面后的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
    //可以选择多个文件加载在页面
    function read() {
        var file = document.getElementById("file");
        var imgDiv = document.getElementById("imgDiv");
        for (var i = 0; i < file.files.length; i++) {
            let reader = new FileReader();
            var file1 = file.files[i];
            reader.readAsDataURL(file1);
            reader.onload = function (result) {
                //reader对象的result属性存储流读取的数据
                imgDiv.innerHTML += '<img src="' + reader.result + '" alt=""/>'
            }
        }
    }
</script>
</head>
<body>
<input type="file" id="file" onchange="read()"
                                                   accept="image/*">
<div id="imgDiv">
</div>
</body>
</html>

 

求大佬讲解这是为什么,我最近在开发自己的博客系统,因为要上传九宫格相片,就是点击一个小格子后,图片会立马显示在这个小格子中,图片能够正常显示,但是input显示未选择任何文件!!!,但是数据传输到后端的时候从input获取的文件数据为None,希望有大佬能帮帮忙

 

 

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • leewen5 2021-04-19 10:19
    已采纳

     

    点赞 1 打赏 评论
  • leewen5 2021-04-16 16:32

    文件上传文本框放在里面,你用 imgDiv.innerHTML替换里面的内容,此时input就消失了,肯定没值撒。

    点赞 1 打赏 评论
  • little亮~ 2021-04-20 08:35

    谢谢了

    点赞 打赏 评论

相关推荐 更多相似问题