我有一个脚本,希望最终用户能够指定一个图像(使用文件选择器)来更改网站的背景。但是我不希望他们实际将文件上传到服务器,因为这不仅是多余的(因为当背景改变时,他们只是重新下载文件),而且因为它是用户脚本,所以也是不可能的。相反,我只希望后台src更改为本地文件路径。
如何做到最好?出于某种原因,文件选择器表单元素仅授予javascript访问文件名的权限,而不提供完整路径。我可以使用其他HTML元素,只要用户不必手动输入文件路径即可。
最佳答案
您可以使用FileReader API将图像编码为data:
URL,并将其保存在浏览器的LocalStorage中。但是,如果用户清除浏览器历史记录,背景也会丢失。
我编写了一些示例代码来帮助您入门:
的HTML
<input id="image-input" type="file">
的JavaScript
var input = document.getElementById('image-input'),
tag = document.getElementsByTagName('html')[0];
input.addEventListener('change', function() {
var file = input.files[0],
reader = new FileReader();
if( !file ) {
return;
}
reader.addEventListener('load', function( evt ) {
localStorage['background-image'] = reader.result;
tag.style.backgroundImage = 'url(' + reader.result + ')';
});
reader.readAsDataURL(file);
});
if( localStorage['background-image'] ) {
tag.style.backgroundImage = 'url(' + localStorage['background-image'] + ')';
}
一个JSFiddle可用here(请注意,我已经注释掉localstorage代码,因为JSFiddle不允许使用它)。