通过两个上传按钮上传图像

Question

我有这个。这可以上传一个图像（或者更确切地说是一个输入按钮），我需要有两个。我尝试再次复制相同的内容，如下所示，但似乎没有给出我需要的预期结果。我需要单独上传以分别预览相应的图像。

你能给我一个解决方案吗？

代码：

        <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)?"50":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"]').uploadPreview({
                    callback: function(res){
                        res.after.empty()
                        if (res.img){
                            res.after.append($("<br>"),$('<img>',{"Src":res.img.src, "width": (res.img.width>200)?"50":res.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);