如果文件可用，则更改预览图像

问题描述

我在Django REST中创建了一个项目，您可以在其中上传图片，单击运行，它应用对象检测并使用TensorFlow在图片上绘制框，然后将图片保存在文件夹中。物体检测完成后，侧面刷新。结果以自己的名称加上“ _with_BOXES”存储。示例：inpFile =“ image1.jpg” 结果在“ ../images/results/image1_with_BOXES.jpg”中

我的问题是检测完成后，我想将预览图像更改为带有框的图像。但是预览始终为空。可能是因为侧面刷新并且没有要预览的输入文件。我的尝试是一个onclick函数，该函数在单击按钮后加载图片，但这没有用。我认为是因为检测完成后该面刷新了。

我的HTML文件基本上是：

<!doctype html>
<html lang="de">
  <head>
      
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    
    
    <style>
        .image-preview {
            width: 600px;
            min-height: 350px;
            border: 2px solid black ;
            margin-top: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: grey;
        }
        
        .image-preview__image{
            display: none;
            width: 100%;
            max-height: 350px;
        }
   
      </style>

    </head>
<body>
    


<div class="input" align="center">
            <form method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <input type="file" name="inpFile" id="inpFile" accept="image/jpg,image/png,image/jpeg" class="btn btn-info bnt-lg">
                <input type="submit" value="Hochladen & Analysieren" class="btn btn-info bnt-lg">
            </form>
</div>

<div class="bild" align="center">
<div class="image-preview" id="imagePreview">
            <img scr="" alt="Bildvorschau" class="image-preview__image">
            <span class="image-preview__default-text">Bildvorschau</span>
</div>
</div>

</body>

<script>
    const inpFile = document.getElementById("inpFile");
        const previewContainer = document.getElementById("imagePreview");
        const previewImage = previewContainer.querySelector(".image-preview__image");
        const previewDefaultText = previewContainer.querySelector(".image-preview__default-text");
        
       inpFile.addEventListener("change",function(){
            const file = this.files[0];
            
            if(file){
                const reader = new FileReader();  
                
                previewDefaultText.style.display = "none";
                previewImage.style.display = "block";
                
                reader.addEventListener("load",function(){
                    console.log(this);
                    previewImage.setAttribute("src",this.result);
                });
                
                reader.readAsDataURL(file);
            } 
        });
        
        
</script>
   
</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

django-rest-framework html javascript

如果文件可用，则更改预览图像

问题描述

解决方法

相关问答