Background as color and background as image
Question
I know this question is a bit lengthy, but all of it is related so I am putting them here.I am trying this since past 2 days and i am very close of getting a solution.But something is wrong in css or scripting code can't understand where.
Following is the fiddle link I received as a response to my question click here to view You can view my question here .
In order to test it I simply copied and pasted the code as given in the link and saved as demo.html. The contents are exactly this:
<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>
Problem-1 is that image is not showing up.I simply can't understand why?
Problem-2:
Next with code posted in my previous question you can view here . I am at least able to set the background. But not resize the background image even if I use background-size after background or irrespective of the property-value pair in quotes or not.I have accepted the answer because fiddle was working,but problem is still unresolved. Is it that .css() function of jQuery is not taking multiple values well in that case this fiddle must also not work. But its working.
Problem-3:
Another point of interest is switching the background image on-click multiple times like for eg. onclick of button for red background changes to red but onclick of upload image is uploaded and background becomes image. Now I have implemented both in single page.I can show you the code on request.Problem is once I set image as background I cannot simply change it back to color. Note the script of color change in the background is before image change script.
You can choose to answer any of the problem according to your expertise. Any help or links or research will be appreciated.
2 answers
solution1
1 ACCPTED 2014-06-15 06:34:55
You need this style for it to work:
#result {
height: 300px;
width: 100%;
}
You also need to add query:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
solution2
1 2014-06-15 07:00:35
For your first problem..
I didn't dig why exactly your fiddle had an error of 'readURL' is undefined but since you used jquery, I attached the event and called it with jquery and now it works:
$(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]);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.