Question

所以我想要改变div的背景。

<html>
    <head>
    </head>
    <body>
        <input type="file">
        <div id="myBackground"></div>
   </body>
</html>

Answer 1

我的意思是你从输入读取文件然后作为div的背景应用，使用FileReader.readAsDataURL()

＆＃13;

function previewFile() {
  var preview = document.querySelector('#myBackground'),
      file    = document.querySelector('input[type=file]').files[0],
      reader  = new FileReader();

  reader.addEventListener("load", function () {
    preview.style.backgroundImage = 'url(' + reader.result + ')';
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

＆＃13;

#myBackground{
  width: 150px;
  height:150px;
  background-size: cover
}

＆＃13;

<html>
    <head>
    </head>
    <body>
        <input type="file" onchange="previewFile()"/>
        <div id="myBackground"></div>
   </body>
</html>

＆＃13;

Answer 2

 public void setLoginBtnText(ResourceBundle bundle){
        String val = bundle.getString("loginButton");
        try {
            loginBtn.setText(new String(val.getBytes("ISO-8859-1"), "UTF-8"));
        } catch (UnsupportedEncodingException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#myBackground img').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgUpload").change(function(){
    readURL(this);
});

Answer 3

试试这个

    function input_image_changefunction(){
                      var e;
                      var oFReader = new FileReader();
                      oFReader.readAsDataURL(document.getElementById("full_image").files[0]);

           oFReader.onloadend = function() {


        // Do what you want to to with the image here
          }
               oFReader.onload = function (oFREvent) {

         //some other action eg  load the image to the background
        document.getElementById("myBackground").src = oFREvent.target.result;
    };


}

然后将id和onchange动作添加到文件输入，例如

   <input type="file"  id="full_image" onchange="input_image_changefunction()" name="full_image" class="ssb" required="required" accept='image/*'>

如何在JavaScript中上传图像并使用它？

3 个答案: