使用 HTML 和 JQuery 的“打开”对话框的按钮

A button for Open Dialog Box using HTML and JQuery

本文关键字：对话框 按钮 打开 JQuery 使用 HTML      更新时间：2023-09-26

我正在创建一个设计网页的Web应用程序。我正在使用html5来创建此应用程序。我想创建一个弹出"打开"对话框的按钮，用户可以在其中选择图像或视频。选择后，图像将插入到页面上。

我已经搜索过，但这让我更加困惑。我应该使用哪些功能/方法和链接？

你可以做一些工作来风格化它，但这是一般的想法：

假设您有一些非常简单的标记，如下所示：

<input type='file' />
<img id="myImg" src="#" alt="your image" />
  • 您希望利用 <input type='file' /> 元素的 change 事件。
    • 在那里，检查
  • 是否选择了任何文件，如果是，则检查数组中的第一个文件是否存在。
  • 然后创建一个新的FileReader对象。 我们将告诉这个对象两件事：
    1. 当它引发onload事件时，它应该调用一个函数imageIsLoaded。
    2. 然后从第一个文件中获取数据并将其读入。
      • 完成此操作后，它将在步骤 1 中引发事件

在 JavaScript 中，它看起来像这样：

$(":file").change(function () {
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        reader.onload = imageIsLoaded;
        reader.readAsDataURL(this.files[0]);
    }
});
function imageIsLoaded(e) {
    $('#myImg').attr('src', e.target.result);
};

在此示例中，加载图像时，我们将替换 imageIsLoaded 函数中标记中的 img 的 source 属性。

小提琴工作演示

你想使用

<input type="file">

您可以使用HTML5 FileReader立即在本地获取文件，或者提交它以执行某些操作。

相关文章：