11

ファイルアップロード入力からファイルを取得し、document.body.style.backgroundImageを設定してプレビューできるソリューションを探しています。

次のコードは、Image要素にプレビューを表示するために機能します。

function setImage(id, target){
  input = document.getElementById(id);
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
      target.src = e.target.result;
    };

        reader.readAsDataURL(input.files[0]);
  }
}

ここで、idはのIDであり<input type='file'>、targetは<img>要素です。

次のコードは、私が何をしたいのかを示していますが、e.target.resultはdata:image/png;base64形式であり、cssがURLを要求する場合は明らかに機能しません。

  function setBackgroundImage(id){
    input = document.getElementById(id);
    if (input.files && input.files[0]) {
      var reader = new FileReader();

      reader.onload = function (e) {
          document.body.style.backgroundImage = e.target.result;
      };

      reader.readAsDataURL(input.files[0]);
    }
  }

ご協力ありがとうございました！

4

1 に答える 1

27

url()次のURLを使用する必要があります。

document.body.style.backgroundImage = 'url(' + e.target.result + ')';
于 2011-07-12T18:35:28.290 に答える