白日梦想猿 2021-04-16 00:06 采纳率: 50%
浏览 881
已采纳

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

     

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 stm32f407使用DMA问题
  • ¥15 您好 这个API接口该怎么弄 网站搭建好了 API也有 现在就不知道该怎么填写API 不知道怎么用
  • ¥88 用uniapp写一个多端的程序,用到高德地图,用高德的JSAPI吗?
  • ¥20 关于#c++#的问题:水果店管理系统
  • ¥30 dbLinq最新版linq sqlite
  • ¥20 对D盘进行分盘之前没有将visual studio2022卸载掉,现在该如何下载回来
  • ¥15 完成虚拟机环境配置,还有安装kettle
  • ¥15 2024年全国大学生数据分析大赛A题:直播带货与电商产品的大数据分析 问题5. 请设计一份优惠券的投放策略,需要考虑优惠券的数量、优惠券的金额、投放时间段和投放商品种类等因素。求具体的python代码
  • ¥15 有人会搭建生鲜配送自营+平台的管理系统吗
  • ¥15 用matlab写代码