0

ユーザーがドキュメントを閲覧し、背景画像として設定する画像を選択できるようにしようとしています。ユーザーがURLを使用して背景画像を変更する方法をすでに知っています。以下のデモをご覧ください。

デモ： http： //goo.gl/253IN

ユーザー名：デモ

パスワード：demo1

私はそれを動作させる方法がわかりません

ファイルフィールド

使用したい次の例を見つけました。ここで質問が見つかりました

JavaScript：

$(switchBackground);
var oFReader = new FileReader(),
    rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

oFReader.onload = function(oFREvent) {
    localStorage.setItem('b', oFREvent.target.result);
    switchBackground();
};

function switchBackground() {
  $('body').css('background-image', "url(" + localStorage.getItem('b') + ')');    
}

function loadImageFile(testEl) {
  if (! testEl.files.length) { return; }
  var oFile = testEl.files[0];
  if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
  oFReader.readAsDataURL(oFile);
}

HTML：

<input id="test" type="file" onchange="loadImageFile(this)" />

ただし、現在のコードで動作させることができません（デモを参照してください）

前もって感謝します

PS私はHTMLとJavascrpitの専門家ではないので（まだ：D）、本当に複雑なコードを理解することはできません

4

2 に答える 2

1

fileつまり、この方法で入力を使用することはできません。JavaScriptは、セキュリティ上の理由から、ユーザーの直接マシンにアクセスできません。POSTこの入力により、HTTPリクエストの本文でファイルをWebストリームに渡すことができます。

目的を達成するには、またはなどのサーバー側言語を使用してファイルサーバー側をアップロードする必要があります。次に、それを保存して保存し、ユーザーがアクセスするたびに背景として表示できるようにします。PHPASP.NET

于 2013-03-05T21:34:49.510 に答える
0

不可能ではありません！

このプラグインを使用して、実際にこの機能をWebサイトに追加できます

https://github.com/CybrSys/custom-background.js

于 2014-10-27T07:57:35.430 に答える