主页 / 网络编程 /

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

网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要介绍了javascript实现的图片预览和上传功能,结合实例形式分析了javascrpt图片预览和上传功能相关实现技巧与操作注意事项,需要的朋友可以参考下

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

下载DEMO

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

1、

2、window.URL.createObjectURL(file)

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

<html xmlns="http://.w3./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技术的支持，实现起来相当麻烦。

这里，楼主推荐一个现有的轮子 组件。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题《》、《》、《》、《》、《》、《》、《》及《》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：JS表单验证插件之数据与逻辑分离操作实例分析【 下一篇：jQuery实现的移动端图片缩放功能组件示例

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by