TA貢獻(xiàn)1982條經(jīng)驗(yàn) 獲得超2個(gè)贊
有幾種方法可以做到這一點(diǎn)。最有效的方法是使用URL.createObjectURL（）的文件從你的<input> 。將此URL傳遞給img.src，告訴瀏覽器加載提供的圖像。
這是一個(gè)例子：
<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
var loadFile = function(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
};
</script>
您還可以使用FileReader.readAsDataURL（）來(lái)解析<input>中的文件。這將在內(nèi)存中創(chuàng)建一個(gè)包含圖像的base64表示的字符串。
<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
var loadFile = function(event) {
var reader = new FileReader();
reader.onload = function(){
var output = document.getElementById('output');
output.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
};
</script>
舉報(bào)