Question

我知道这个问题有点冗长，但所有这些都是相关的，所以我把它们放在这里。我正在尝试这个过去2天，我非常接近得到一个解决方案。但是在css中出现了问题或者脚本代码无法理解的位置。

以下是我收到的小提琴链接，作为对我的问题click here to view的回复您可以查看我的问题here。

为了测试它，我只需复制并粘贴链接中给出的代码并保存为demo.html。内容正是如此：

<body>
    <header>
        <h1>File API - FileReader (Text)</h1>
    </header>
    <article>
        <label for="files">Select a file: </label>
        <input id="files" type="file" onchange="readURL(this);" /><br>
        div<div id="result"></div><br>
        img<img src='' id="img"><br>
    </article>
    <script>
    var readURL;
window.onload = function() {

    //Check File API support
    readURL = function(input) {

            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = (function (tFile) {
                    return function (evt) {
                      //$('#img').attr('src', evt.target.result);

                        $('#result').css({'background-image': 'url('+evt.target.result+')','background-size': '200px 200px', 'background-repeat': 'no-repeat', 'background-position':'center'})
                    };
                  }(input.files[0]));
               reader.readAsDataURL(input.files[0]);
            }
        }
}
    </script>
</body>

问题-1是图像没有显示出来。我根本无法理解为什么？

问题-2：
接下来，我在上一个问题you can view here中发布了代码。我至少能够设置背景。但是，即使我在背景之后使用背景大小或者不管引号中的属性值对，也不会调整背景图像的大小。我接受了答案，因为小提琴正在工作，但问题仍然没有得到解决。在这种情况下，jQuery的.css（）函数是不是很好地采用了多个值this fiddle 也必须行不通。但它的工作。

问题-3：
另一个兴趣点是多次点击切换背景图像，例如。红色背景按钮的onclick变为红色，但上传的图像上传，背景变为图像。现在我已经在单页中实现了两个。我可以根据请求显示代码。问题是我将图像设置为背景我不能简单地将其改回颜色。请注意，背景中的颜色更改脚本位于图像更改脚本之前。

您可以根据自己的专业知识选择回答任何问题。任何帮助或链接或研究将不胜感激。

Answer 1

你需要这种风格才能发挥作用：

#result {
    height: 300px;
    width: 100%;
}

您还需要添加查询：

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

Answer 2

第一个问题..

我没有弄清楚为什么你的小提琴有一个错误的错误＆＃39; readURL＆＃39;未定义但是因为你使用了jquery，我附加了事件并用jquery调用它现在它起作用了：

$(function () {
    $("#files").on('change', readURL);
});

//Check File API support
function readURL() {
    var input = this;
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = (function (tFile) {
            return function (evt) {
                //$('#img').attr('src', evt.target.result);

                $('#result').css({ 'background-image': 'url(' + evt.target.result + ')', 'background-size': '200px 200px', 'background-repeat': 'no-repeat', 'background-position': 'center' })
            };
        }(input.files[0]));
        reader.readAsDataURL(input.files[0]);
    }
}

working demo

作为颜色和背景的背景作为图象

2 个答案: