How to upload image file from computer and set as div background image using jQuery?

后端未结

关注

 3  1980

南旧

The HTML code for image file input:

The des

相关标签:

3条回答

自闭症患者

2020-12-28 10:48

This may solve your problem

JS FIDDLE

HTML

<input type='file' id='getval' name="background-image" /><br/><br/>
<div id='clock'></div>

CSS

#clock{
   background-image:url('');
   background-size:cover;
   background-position: center;
   height: 250px; width: 250px;
   border: 1px solid #bbb;
}

PURE JAVASCRIPT

document.getElementById('getval').addEventListener('change', readURL, true);
function readURL(){
   var file = document.getElementById("getval").files[0];
   var reader = new FileReader();
   reader.onloadend = function(){
      document.getElementById('clock').style.backgroundImage = "url(" + reader.result + ")";        
   }
   if(file){
      reader.readAsDataURL(file);
    }else{
    }
}

0 讨论(0)

一向

2020-12-28 10:50

var loadFile = function(event) {
    var output = document.getElementById('output');
    output.style.backgroundImage= "url("+URL.createObjectURL(event.target.files[0])+")";
  };

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<input type="file" accept="image/*" onchange="loadFile(event)">
<div style="width: 500px;height: 500px;" id="output"></div>
</body>
</html>

0 讨论(0)

挽巷

2020-12-28 10:53

It's small way to do this without using FileReader.

http://jsfiddle.net/PuneetChawla/vqn7r0nj/

HTML

<input type='file' id='getval' name="background-image" onchange="readURL(event)" /><br/><br/>
<div id='clock'></div>

CSS

#clock{
           background-image:url('');
           background-size:cover;
           background-position: center;
           height: 250px; width: 250px;
           border: 1px solid #bbb;
            }

JavaScript

function readURL(event){
         var getImagePath = URL.createObjectURL(event.target.files[0]);
         $('#clock').css('background-image', 'url(' + getImagePath + ')');
        }

Explanation - The URL.createObjectURL() static method creates a DOMString containing an URL representing the object given in parameter.

0 讨论(0)