0

我想让用户预览他们的图像作为 div 背景的样子。我不想让他们将图像上传到我的服务器，而是将其存储在他们的本地缓存中并让 Jquery 获取路径并将背景图像替换为用户选择的图像......

4

4 回答 4

2

您可以将图像转换为数据 URI，并在他们预览图像时使用它。

于 2012-06-22T19:59:59.417 回答
1

听起来像是 File API 的理想用例。文件 API 仅需要 [足够的] HTML5 支持。（也就是说，不是 jQuery。）您现在可以编写代码并在 Firefox 和 Chrome 中进行测试：

http://www.caniuse.com/#feat=fileapi

对于移动用户，还有 PhoneGap 和其他 3rd 方解决方案。

于 2012-06-22T20:05:29.630 回答
1

不跨浏览器： 

document.getElementById('uploader').onchange = function(){
    var file = document.getElementById('uploader').files[0];

    if (!file.type.match(/image.*/)) {
        // this file is not an image.
        alert('File type not supported');
        }
    else{
        var img = document.createElement("img");
        var reader = new FileReader();  
        reader.onload = function(e) {
            img.src = e.target.result;
            delete this;
            }
        img.onload = function(e) {
                //do your code
            }
        reader.readAsDataURL(file);
        }
    };
于 2012-06-22T20:06:35.793 回答
1

这是我使用 jQuery 和 HTML5 File API 拼凑起来的东西。在更改 input[type='file'] 时，它将尝试将图像加载为 img 标签的 src。File APi 本质上将本地文件转换为 DataURI，然后您可以将其作为 src 提供

jsFiddle

于 2012-06-22T21:57:43.207 回答