上传前预览图片

作者:周星 发布:2017-10-07

        以前经常遇到这种需求,在用户点击上传按钮并选择图片后,在页面某处预览这张图片,之前我们的做法一般都是先上传图片到服务器,然后再显示到页面上预览,这样做有几个缺点:一是麻烦,ajax上传要用到插件或者flash来做,增加了前后端的工作量,二是未点击表单提交按钮前图片已经上传至服务器,如果用户此时不点击提交而是重新上传,会产生一些“脏”图片在服务器上,后期我们还需要专门针对这些图片做删除操作等。在HTML5时代,随着FileReader发布,图片预览操作变得非常简单,请看下面这个简单例子:

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
      $('#preview').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
}

$("#imgInp").change(function(){
    readURL(this);
});

对应的HTML代码:

<form id="form1" runat="server">
  <input type='file' id="imgInp" />
  <img id="preview" src="#" alt="avatar" />
</form>

注:FileReader 只能在 IE 10上使用

支付宝扫码赞助博主


评论(1)

Qq2

高老庄第1楼

我也是在 ST 上看到这种解法。

2016-03-03 23:13:02