如何使事件onchange的HTML输入对象不提示文件资源管理器

How to make HTML input object of event onchange not prompt file explorer?

本文关键字：对象 提示 文件 资源管理器 输入 HTML 何使 事件 onchange      更新时间：2023-09-26

今天我遇到了一个问题，有两种方法可以解决，但我不知道如何正确地实现它们中的任何一种。

我有一个类型为file的HTML元素，它附加了一个onchange事件。这个元素应该处理一个提示，用户在该提示中选择一个图像文件并预览图像。进一步的操作对我的问题来说毫无意义，所以我不会深入讨论。

这就是我的问题所在：如果用户再次点击输入（阅读：第一次加载图像后），会弹出一个confirm窗口，他决定是否要替换当前图像。

如果确认返回false，那么我不希望文件资源管理器弹出并允许用户选择一个新文件，这已经发生了。如果确认返回true，那么我确实希望文件资源管理器弹出。

我曾尝试使用onclick事件来检查用户是否要替换它，但我仍然无法阻止文件资源管理器弹出。但是，如果用户对确认窗口说"不"，我可以阻止图像更改。

这是我的代码：

处理事件的输入：

<label class="labelText"> <input id="uploadImage" type="file"
        onchange="PreviewImage();"/> Upload Image
</label>

Javascript函数：

function PreviewImage() {
    var newMapURL = "";
    if(oldMapURL.length == 0){
        oldMapURL  = document.getElementById("uploadImage").value;
        loadImage(newMapURL);
    }
    else {
        newMapURL = document.getElementById("uploadImage").value;
        if (confirm("Are you sure you want to create a new map?")) {
            cleanWorkspace();
            loadImage(newMapURL);
        }   
    }   
}
function loadImage(newMapURL){
        var reader = new FileReader();
        reader.readAsDataURL(document.getElementById("uploadImage").files[0]);
        reader.onload = function(oFREvent) {
        document.getElementById("previewImage").src = oFREvent.target.result;       
    }           
}

请注意，我想在纯JavaScript中执行此操作（读作：无jQuery或类似内容）。

编辑：在任何人提到之前，是的，我知道newMapURL没有被使用。然而

<input id="uploadImage" type="file" onchange="PreviewImage();" onclick="return confirm('Sure?')" />

只有当字段为空时，您才需要使函数show确认。

相关文章：