上传文件并展示

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);
});