[关闭]
@markheng 2015-10-29T11:08:39.000000Z 字数 657 阅读 1704

JavaScript图片上传前先预览

前端技术


以前听说因为js的安全机制,禁止代码获得文件的路径,以为不能实现先上传再预览,今天找了找,有相关的示例。

以下内容参考自stackoverflow

1.利用FileReader对象MDN文档
注: IE10以下的版本不支持FileReader()构造函数.不过可以利用滤镜来兼容旧版本的IE:兼容IE的图片本地预览.

  1. function readURL(input) {
  2. if (input.files && input.files[0]) {
  3. var reader = new FileReader();
  4. reader.onload = function (e) {
  5. $('#blah').attr('src', e.target.result);
  6. }
  7. reader.readAsDataURL(input.files[0]);
  8. }
  9. }
  10. $("#imgInp").change(function(){
  11. readURL(this);
  12. });

2.利用URL.createObjectURL()

  1. <input type="file" accept="image/*" onchange="loadFile(event)">
  2. <img id="output"/>
  3. <script>
  4. var loadFile = function(event) {
  5. var output = document.getElementById('output');
  6. output.src = URL.createObjectURL(event.target.files[0]);
  7. };
  8. </script>
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注