シーン：HTMLで直接プレビューすると、画像のファイルタイプに取得しますか？ここでは、HTML5の新機能の使用は、ある画像がBase64での形式で表示されて変換します。2つの方法があります。
方法1：使用URL.createObjectURL（）
<！DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>ベース</ TITLE>
</ HEAD>
<BODY>
の<input type = "ファイル"名= "" ID = "ファイル">
<IMG SRC = "" ID = "IMG">
ます。<script type = "text / javascriptの">
window.onload =関数（）{
ましょう$ IMG =のdocument.getElementById（ 'IMG'）
file.onchange =機能（E）{
はconsole.log（E。 target.files [0]）
ファイル= e.target.files [0]は聞かせて
みましょうfileUrl = window.URL.createObjectURL（ファイル）
$ img.src = fileUrl
img.onload =機能（）{
//手动回收
URL。revokeObjectURL（fileUrl）
}
}
}
</ SCRIPT>
</ BODY>
</ HTML>
あなたは、同様のimg srcを、その結果、画像を選択すると"blob:null/4304d4f3-c13b-43e8-83f6-8c80426520ff"、通常の表示画像を。
方法二: 利用FileReader.readAsDataURL()
<！DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>ベース</ TITLE>
</ HEAD>
<BODY>
の<input type = "ファイル"名= "" ID = "ファイル">
<IMG SRC = "" ID = "IMG">
ます。<script type = "text / javascriptの">
window.onload =関数（）{
ましょう$ IMG =のdocument.getElementById（ 'IMG'）
file.onchange =機能（E）{
はconsole.log（E。 target.files [0]）
させファイル= e.target.files [0]
CONST FR =新規FileReader（ファイル）
fr.readAsDataURL（ファイル）
fr.onload =関数（）{
$ img.src =この。結果
}
}
}
</ SCRIPT>
</ body>
</ HTML>
SRC imgタグは次のようになります："data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAA==正しく表示することができます。