我正在创建一个设计网页的 Web 应用程序。我正在使用 html5 来创建这个应用程序。我想创建一个弹出打开对话框的按钮,用户可以在其中选择图像或视频。选择后,图像将插入页面。
我已经搜索过,但这让我更加困惑。我应该使用哪些功能/方法和链接?
我正在创建一个设计网页的 Web 应用程序。我正在使用 html5 来创建这个应用程序。我想创建一个弹出打开对话框的按钮,用户可以在其中选择图像或视频。选择后,图像将插入页面。
我已经搜索过,但这让我更加困惑。我应该使用哪些功能/方法和链接?
你可以做一些工作来风格化它,但这里是一般的想法:
假设您有一些非常简单的标记,如下所示:
<input type='file' />
<img id="myImg" src="#" alt="your image" />
change
事件。<input type='file' />
FileReader
对象。我们将告诉这个对象两件事:
onload
事件时,它应该调用一个函数imageIsLoaded
。在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 的源属性。
你想用
<input type="file">
您可以使用 HTML5 FileReader 立即在本地获取文件,或者提交它以完成您的操作。