Question

我正在尝试从用户的本地计算机更改带有用户图片的div背景。但这似乎对我不起作用。

drush updb

$("#addPhoto").change(function() {
  var fileName = $(this).value;
  $("#myPic").css({
    "backgroundImage": "url('" + fileName + "')"
  });
});

#myPic {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: relative;
  bottom: -7%;
  left: -4%;
  background-size: cover;
}

控制台显示“找不到文件”错误。

Answer 1

使用FileReader可以轻松做到这一点：

MessageBox.Show("To: " + tcpClient.Client.LocalEndPoint + "\r\n\r\n" 
        + "From: " + tcpClient.Client.RemoteEndPoint + "\r\n\r\n" 
        + encoder.GetString(message, 0, bytesRead));

$("#addPhoto").change(function() {
    var file = this.files[0];
    var reader = new FileReader();
    reader.onloadend = function() {
        $("#myPic").css({
            "background-image": "url('" + reader.result + "')"
        });
    }
    if (file) {
        reader.readAsDataURL(file);
    } else {}
});

#myPic {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: relative;
  bottom: -7%;
  left: -4%;
  background-size: cover;
}

Answer 2

您不能为背景图片使用file:///协议。但是，如果您使用FileReader在客户端读取文件并转换为data URI方案，则可以执行此操作。

$(function() {
  function getBase64(file) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function() {
      console.log(reader.result);
      $("#myPic").css({
        "backgroundImage": "url('" + reader.result + "')"
      });
    };
    reader.onerror = function(error) {
      console.log('Error: ', error);
    };
  }
  $("#addPhoto").change(function() {
    getBase64(this.files[0]);
  });
});

#myPic {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: relative;
  bottom: -7%;
  left: -4%;
  background-size: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" accept="image/*" id="addPhoto" />
<div id="myPic"></div>

Answer 3

$(document).on('change',"#addPhoto",function(){
    readURL(this);
});


function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#myPic').css('background', 'url('+e.target.result+')');
        }
        reader.readAsDataURL(input.files[0]);
    }
}

#myPic{
height:250px;
width:500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="file" accept="image/*" id="addPhoto" />


<div id="myPic">
</div>

Answer 4

与其他回复相比更麻烦，但是请勿使用FileReader 。

这将把文件的数据加载到内存中三遍，什么也不会做，会创建一个过长的字符串，该字符串会长时间同时出现在DOM和CSSOM中，而您只需加载一次数据就可以达到相同的结果。 / p>

为此，请使用 URL.createObectURL 方法从您的文件中创建Blob URI。这将返回一个字符串，您以后可以将其用作URI，直接指向磁盘上的文件。

最后的好处：它的生成是同步的。

$("#addPhoto").change(function() {
  var file = this.files[0];
  var url = URL.createObjectURL(file);
  $("#myPic").css({
    "backgroundImage": "url('" + url + "')"
  });
});

#myPic {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: relative;
  bottom: -7%;
  left: -4%;
  background-size: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" accept="image/*" id="addPhoto" />
<div id="myPic"></div>

使用“选择文件”输入来更改div backgroundImage

4 个答案: