javascript - 在输入文件中将 DIV 背景更改为 jpg

Question

当我上传文件时，它会更新 IMG SRC。我想用我从输入文件上传的图像更新#gal01 的背景。这是代码:

HTML:

<img id="mlogo" src="#" alt=" " />
<br>
<div id="gal01">
 <input type="file" name="fileToUpload" accept="image/jpeg" class="fileInput" id="fileToUpload" onchange="readURL(this);" />
</div>

我有一个带有透明输入文件的 Div。

JavaScript:

try {function readURL(input) {
 if (input.files && input.files[0]) {
  var reader = new FileReader();
   reader.onload = function (e) {
    $('#mlogo')
    .attr('src', e.target.result)
    .width(95)
    .height(95);
    };
   reader.readAsDataURL(input.files[0]);
  }
 }
} catch (error) { throw error; }

CSS:

img {
 width:                 95px;
 height:                95px;
}

#gal01 {
 width:                 95px;
 height:                95px;
 overflow:              hidden;
 position:              relative;
 cursor:                pointer;
 background-color:      #F00;
 background:            url("http://www.dari.com/images/galimg.png") no-repeat scroll 0px 0px rgba(0, 0, 0, 0);
}

.fileInput {
    cursor: pointer;
    height: 100%;
    position:absolute;
    top: 0;
    right: 0;
    font-size:50px;
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}

谢谢你的帮助!

JSFiddle

Answer 1

为你的 fiddle 制作了一个新版本:

http://jsfiddle.net/se0kssLf/3/

你需要设置你的div的背景:

$('#gal01').attr('style', 'background: url('+e.target.result+');background-size: 95px 95px;');