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

Change DIV background to jpg in input file

本文关键字：DIV 背景 jpg 输入 文件      更新时间：2023-09-26

当我上传文件时，它会更新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

为你的小提琴制作了一个新版本:

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

你需要设置div的背景:

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

找到$('#gal01')并将其css background属性设置为e.target.result:

    $('#gal01')
.css('background', 'url('+e.target.result+') no-repeat scroll 0px 0px rgba(0, 0, 0, 0)')
.css( 'background-size', 'cover');

inside reader.onload = function (e) {...

工作小提琴:http://jsfiddle.net/se0kssLf/2/

相关文章：