コメント：この記事では、主にローカルファイルを読み取るHTML5の特定の実装を紹介します。 HTML構造スタイル、CSSスタイル、JSコードは次のとおりです。それを必要とする友達は見ることができます
HTML構造スタイルは次のとおりです。<div>
<ボタン>画像を追加</button>
<form>
<入力型= "ファイル"倍数compate = "image/*">
</form>
</div>
<img src = "">
スタイルの観点から、入力要素の入力ボックスを表示しないでください。この時点で、入力を透明なスタイルに設定し、ボタン要素の上に上書きする必要があります。その場合にのみ、ボタンをクリックして画像をアップロードできます。 Image/*に受け入れられたセット、画像ファイルのアップロードのみが許可されます。
CSSスタイルは次のとおりです
.addpic {
位置：相対;
マージン左：100px;
幅：95px;
高さ：30px;
}
.addlogo {
背景：繰り返しスクロール0 0 RGBA（0、0、0、0）;
カーソル：ポインター;
フォントサイズ：30px;
不透明：0;
位置：絶対;
右：0;
上：0;
z-index：10;
}
JSコード
function readfiles（evt）{
var files = evt.target.files;
if（！files）{
console.log（ "ファイルはinvaild"）;
戻る;
}
for（var i = 0、file; file = files [i]; i ++）{
var imgele = new Image（）;
var thesrc = window.url.createobjecturl（file）;
imgele.src = thesrc;
imgele.onload = function（）{
$（ "＃showlogo"）。attr（ "src"、this.src）;
}
}
}
$（document）.ready（function（）{
$（ "＃logoimg"）。変更（function（e）{
readfiles（e）
}）;
}）;