这是我开始学习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);