1.使用FileReader
<!--html-->
<h3>选取一张图片，并预览</h3>
<input id="img_input" type="file" accept="image/*"/>
<!--
for对应input中的id,这样点击label就如同点击input了，
for只对表单元素有效，对div这样的标签无效
可以隐藏原生的上传文件样式，自定义上传文件的样式
<label for="img_input">
选择文件
<i class="fa fa-plus fa-lg"></i>
</label>-->
<div class="preview_box"></div>
<!--js-->
<script>
$("#img_input").on("change", function(e) {
var file = e.target.files[0];
if (!file.type.match('image.*')) {
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(arg) {
var img = '<img class="preview" src="' + arg.target.result + '" alt="preview"/>';
$(".preview_box").empty().append(img);
}
});
</script>
2.使用createObjectURL
$("#img_input").on("change", function(e) {
var file = e.target.files[0];
if (!file.type.match('image.*')) {
return false;
}
// 渲染文件
var url = URL.createObjectURL(file); //file对象继承Blob对象
var img = '<img class="preview" src="' + url + '" alt="preview"/>';
$(".preview_box").empty().append(img);
});
