我有一个脚本,希望最终用户能够指定一个图像(使用文件选择器)来更改网站的背景。但是我不希望他们实际将文件上传到服务器,因为这不仅是多余的(因为当背景改变时,他们只是重新下载文件),而且因为它是用户脚本,所以也是不可能的。相反,我只希望后台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不允许使用它)。

09-10 08:48
查看更多