简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  jquery实现图片上传之前预览的方法_jquery

jquery实现图片上传之前预览的方法_jquery

WBOY
WBOYOriginal
2016-05-16 15:50:42771Durchsuche

本文实例讲述了jquery实现图片上传之前预览的方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.1.min.js" type="text/javascript"></script>
<script>
/*
*参数说明: Img:图片ID;Width:预览宽度;Height:预览高度;ImgType:支持文件类型;Callback:选择文件显示图片后回调方法;
*使用方法: 
<div>
<img  id="ImgPr"    style="max-width:90%"  style="max-width:90%" / alt="jquery实现图片上传之前预览的方法_jquery" ></div>
<input type="file" id="up" />
把需要进行预览的IMG标签外 套一个DIV 然后给上传控件ID给予uploadPreview事件
$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () { }});
*/
jQuery.fn.extend({
  uploadPreview: function (opts) {
    var _self = this,
      _this = $(this);
    opts = jQuery.extend({
      Img: "ImgPr",
      Width: 100,
      Height: 100,
      ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
      Callback: function () {}
    }, opts || {});
    _self.getObjectURL = function (file) {
      var url = null;
      if (window.createObjectURL != undefined) {
        url = window.createObjectURL(file)
      } else if (window.URL != undefined) {
        url = window.URL.createObjectURL(file)
      } else if (window.webkitURL != undefined) {
        url = window.webkitURL.createObjectURL(file)
      }
      return url
    };
    _this.change(function () {
      if (this.value) {
        if (!RegExp("\.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
          alert("选择文件错误,图片类型必须是" + opts.ImgType.join("，") + "中的一种");
          this.value = "";
          return false
        }
        if ($.browser.msie) {
          try {
            $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
          } catch (e) {
            var src = "";
            var obj = $("#" + opts.Img);
            var div = obj.parent("div")[0];
            _self.select();
            if (top != self) {
              window.parent.document.body.focus()
            } else {
              _self.blur()
            }
            src = document.selection.createRange().text;
            document.selection.empty();
            obj.hide();
            obj.parent("div").css({
              'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
              'width': opts.Width + 'px',
              'height': opts.Height + 'px'
            });
            div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src
          }
        } else {
          $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
        }
        opts.Callback()
      }
    })
  }
});
$(function () {
$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120 });
});
</script>
</head>
<body>
<div style="width:500px;margin:0px auto;"><h2>图片上传预览演示</h2>
<div><img  id="ImgPr"    style="max-width:90%"  style="max-width:90%" / alt="jquery实现图片上传之前预览的方法_jquery" ></div>
<input type="file" id="up" />
</div>
</body>
</html>

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：javascript实现判断鼠标的状态_javascript技巧Nächster Artikel：javascript检查浏览器是否已经启用XX功能_javascript技巧

In Verbindung stehende Artikel

Mehr sehen