欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

javascript实现的图片预览和上传功能示例【兼容IE 9】

程序员文章站 2022-06-07 23:04:08
本文实例讲述了javascript实现的图片预览和上传功能。分享给大家供大家参考,具体如下:下载demo:https://github.com/captainliao/zujian/tree/mast...

本文实例讲述了javascript实现的图片预览和上传功能。分享给大家供大家参考,具体如下:

下载demo:https://github.com/captainliao/zujian/tree/master/upload

对于现代浏览器来说,要实现图片预览非常简单:

1、filereader.readasdataurl(file)

2、window.url.createobjecturl(file)

以上两种方法分别可以得到一个base64和一个blob对象的url地址,从而实现预览。但是,他们只支持在ie10+,显然这是不够的,如何实现低版本ie浏览器的图片预览呢?代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <script type="text/javascript" language="javascript">
    $('#preview_fake').change(function () {
      previewimg($(this), $('#preview'));

    });
    function previewimg($inputid, $previewid) {
      var inputid = $inputid[0],
        previewid = $previewid[0];
      $previewid.empty();
      if(/msie/.test(navigator.useragent.tolowercase())){
        if($.support.version == 6.0){
          $previewid.attr("src",inputid.value);
        }else{
          inputid.select();
          var reallocalpath = document.selection.createrange().text;
          previewid.style.filter = "progid:dximagetransform.microsoft.alphaimageloader(enabled=true, sizingmethod='scale',src=\"" + reallocalpath + "\")";
          // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
          previewid.src = 'data:image/gif;base64,r0lgodlhaqabaiaaap///waaach5baeaaaaalaaaaaabaaeaaaicraeaow==';
        }
      }else {
        $previewid.attr("src",window.url.createobjecturl(previewfake.files[0]));
      }
    }
 </script>

 </head>
 <body>
   <form id="form1" runat="server">
   <div>
     选择图片:<input type="file" size="20" id='preview_fake'" /> 
   </div>
    <div id="preview" style="width: 300px; height: 300px">
   </div>    
   </form>
 </body>
</html>

这样,我们就能够在ie10- 下预览上传的图片了。

在这里,有必要对几个参数说明一下,以免后人再入坑!

progid:dximagetransform.microsoft.alphaimageloader([enabled=benabled ,] [sizingmethod=ssize ,] src=surl)

enabled: 可选。布尔值(boolean)。设置或检索滤镜是否激活。

  • true:默认值。滤镜激活。
  • false:滤镜被禁止。

sizingmethod:可选。字符串(string)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。

  • crop:剪切图片以适应对象尺寸。
  • image:默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
  • scale:缩放图片以适应对象的尺寸边界。

src: 必选项。字符串(string)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。

以上,可以实现低版本ie浏览器的图片预览,但要上传到服务器还需要一番周折。对于单张图片,可以通过<form>表单提交,但对于多张图片,这需要flash技术的支持,实现起来相当麻烦。

这里,楼主推荐一个现有的*: 组件。