1.首先是javascript代码
/**
* 图片上传即时显示javascript
*/
var allowExt = [ ‘jpg‘, ‘gif‘, ‘bmp‘, ‘png‘, ‘jpeg‘ ];
var preivew = function(file, container) {
try {
var pic = new Picture(file, container);
} catch (e) {
alert(e);
}
};
// 缩略图类定义
var Picture = function(file, container) {
var height = 0, widht = 0, ext = ‘‘, size = 0, name = ‘‘, path = ‘‘;
var self = this;
if (file) {
name = file.value;
if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
file.select();
path = document.selection.createRange().text;
} else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
if (file.files) {
path = window.URL.createObjectURL(file.files[0]);
} else {
path = file.value;
}
}
} else {
throw "bad file";
}
ext = name.substr(name.lastIndexOf("."), name.length);
if (container.tagName.toLowerCase() != ‘img‘) {
throw "container is not a valid img label";
container.visibility = ‘hidden‘;
}
container.src = path;
container.alt = name;
container.style.visibility = ‘visible‘;
height = container.height;
widht = container.widht;
size = container.fileSize;
this.get = function(name) {
return self[name];
};
this.isValid = function() {
if (allowExt.indexOf(self.ext) !== -1) {
throw ‘the ext is not allowed to upload‘;
return false;
}
};
};
2.html代码，主要在于onchange方法调用上面的javascript方法，然后是一个用来显示图片的img标签
<body>
<input name="image"nchange="preivew(this,document.getElementById(‘img‘));"/>
<img id="img" style="visibility:hidden" height="150px" width="500px">
</body>
图片上传即时显示javascript代码
时间： 2024-12-22 15:52:31