在JavaScript中更改预览图像大小图像上载

时间:2014-07-27 10:41:40

标签: javascript jquery html

这是我开始学习JS的时候在网上借来的。试图修改它以适应我的要求,所以我有两个上传按钮彼此相邻,预览工作正常。但我想要实现的是在上传图像后更改预览图像的尺寸。有人可以帮助指出我在哪里做出改变吗?谢谢。

这里是代码:

HTML

        <input type="file">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="jquery.image.upload.preview.js"></script>
        <script type="text/javascript">
            jQuery(document).ready(function($){
                $('input[type="file"]').uploadPreview({
                    callback: function(res){
                        res.after.empty()
                        if (res.img){
                            res.after.append($("<br>"),$('<img>',{"Src":res.img.src, "width": (res.img.width>200)?"200":res.img.width}));
                        }
                    }
                })
            })
        </script>

        <input type="file">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="jquery.image.upload.preview.js"></script>
        <script type="text/javascript">
            jQuery(document).ready(function($){
                $('input[type="file"]').uploadPreview1({
                    callback: function(res1){
                        res1.after.empty()
                        if (res1.img){
                            res1.after.append($("<br>"),$('<img>',{"Src":res1.img.src, "width": (res1.img.width>200)?"100":res1.img.width}));
                        }
                    }
                })
            })
        </script>

和JS文件

(function() {
  var __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };

  (function($) {
    $["fn"]["uploadPreview"] = function(o) {
      o = $["extend"]({
        "types": ["image/jpeg", "image/png", "image/gif", "image/vnd.microsoft.icon"],
        'callback': function() {}
      }, o);
      this["each"](function() {
        var after, before, wrapper;
        wrapper = $("<span>");
        before = $("<span>");
        after = $("<span>");
        $(this)["wrap"](wrapper);
        $(this)["before"](before);
        $(this)["after"](after);
        return $(this)["on"]("change", function() {
          var obj, reader, _ref;
          obj = [];
          obj["target"] = $(this);
          obj["wrapper"] = wrapper;
          obj["before"] = before;
          obj["after"] = after;
          if (this.files && this.files[0] && (_ref = this.files[0].type, __indexOf.call(o.types, _ref) >= 0)) {
            reader = new FileReader();
            reader.onload = function(e) {
              var img;
              img = new Image();
              img.onload = function() {
                return o["callback"](obj);
              };
              img.src = e.target.result;
              return obj["img"] = img;
            };
            return reader.readAsDataURL(this.files[0]);
          } else {
            return o["callback"](obj);
          }
        });
      });
      $(this)["trigger"]("change");
      return this;
    };
    return this;
  })(jQuery);

}).call(this);

0 个答案:

没有答案