karlew > js/jquery > 使用createObjectURL实现上传图片预览

使用createObjectURL实现上传图片预览

8-07 8,257 views

目前无刷新预览图片一般有以下兼容性高到低排序的三种方法：
1.ajax提交图片后获取返回路径；
2.通过canvas将图片绘制显示；
3.通过window.url.createObjectURL(blob)创建blob:url

下面上一个方法3的简单案例，供有需要的朋友了解

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>blobUpload</title>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <style>
  8.     #uploaderFiles{
  9.         width: 200px;
  10.         height: 200px;
  11.         margin-top: 10px;
  12.         background: no-repeat center center;
  13.         background-size: cover;
  14.     }
  15.     </style>
  16.     <script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.js"></script>
  17. </head>
  18. <body>
  19.     <input id="uploaderInput" type="file" accept="image/*">
  20.     <div id="uploaderFiles"></div>
  21.     <script type="text/javascript">
  22.         $(function(){
  23.             var $uploaderInput = $("#uploaderInput"),
  24.             $uploaderFiles = $("#uploaderFiles");
  26.             $uploaderInput.on("change", function(e){
  27.                 var src, url = window.URL || window.webkitURL || window.mozURL;
  28.                 var file = e.target.files[0];
  30.                 if (url) {
  31.                     src = url.createObjectURL(file);
  32.                 } else {
  33.                     src = e.target.result;
  34.                 }
  36.                 $uploaderFiles.attr("style","background-image:url("+src+")");
  37.             });
  38.         });
  39.     </script>
  40. </body>
  41. </html>

 

demo：http://wx.karlew.com/blobUpload/

值得注意的是，IE9及以下浏览器不支持createObjectURL方法和blob对象，故此方法只可用于手机浏览器

此外，在ios上竖屏拍照会有旋转90度的问题，需要用exif插件解决，下面附上优化demo

demo：http://wx.karlew.com/blobUpload/index2.html

版权属于: karlew

原文地址: https://www.karlew.com/archives/646

转载时必须以链接形式注明原始出处及本声明。

欢迎留言