局部视图是 HTML5 中的新特性,它允许在文档中创建一个局部区域,只显示该区域中的内容,而不会影响整个文档的布局。在 jQuery 对话框中上载文件时,可以使用局部视图来显示上传的文件,而不影响整个文档的布局。
具体实现步骤如下:
<div>
标签包裹需要显示的文件内容,例如:<div id="file-preview" style="display:none;"></div>$('#fileInput').change(function() {
var file = this.files[0];
var preview = document.getElementById('file-preview');
preview.innerHTML = '';
var fileReader = new FileReader();
fileReader.onload = function(e) {
preview.innerHTML = e.target.result;
};
fileReader.readAsDataURL(file);
});除了使用 Data URL 格式,还可以使用其他方法将文件内容加载到局部视图中,例如使用 File API 或 Blob API。
领取专属 10元无门槛券
手把手带您无忧上云