javascript - 使用 HTML 和 JQuery 的打开对话框按钮

Question

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

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

Answer 1

您可以做一些工作来对其进行风格化，但这是一般的想法:

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

<input type='file' />
<img id="myImg" src="#" alt="your image" />

• 您想利用 change <input type='file' /> 事件元素。
• 到达那里后，检查是否已选择任何文件，如果是，则检查数组中的第一个文件是否存在。
• 然后创建一个新的FileReader目的。我们将告诉这个对象两件事:
  1. 当它引发 onload 时事件，它应该调用一个函数 imageIsLoaded .
  2. 然后从第一个文件中取出数据并读入。
     
     • 完成后，它将在第一步中引发事件

在 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 的源属性。功能。

Working Demo In Fiddle