首先这里先讲一个比较low的
<input type="file" id="file1" οnchange="preview1()"/>
<img src="" id="img1" alt="图片预览" width="200"/>
</div>
</form>
<script type="text/javascript">
function preview1() {
var x = document.getElementById("file1");
var y = document.getElementById("img1");
if (!x || !x.value)
return;
//这里正则表达式中test()方法总是不存在!
/* var path = "//.jpeg$/.jpg$/.png$/.gif/i";
if (path.test(x.value)) {
y.src = "file://localhost/" + x.value;
} else {
alert("图片格式好像不正确!");
}*/
<img src="" id="img1" alt="图片预览" width="200"/>
</div>
</form>
<script type="text/javascript">
function preview1() {
var x = document.getElementById("file1");
var y = document.getElementById("img1");
if (!x || !x.value)
return;
//这里正则表达式中test()方法总是不存在!
/* var path = "//.jpeg$/.jpg$/.png$/.gif/i";
if (path.test(x.value)) {
y.src = "file://localhost/" + x.value;
} else {
alert("图片格式好像不正确!");
}*/
if (x.value.indexOf(".jpg") < 0 && x.value.indexOf(".jpeg") < 0 && x.value.indexOf(".gif") < 0 && x.value.indexOf(".png") < 0) {
alert("图片格式好像不正确!");
} else {
y.src = "file://localhost/" + x.value;
}
}
</script>
alert("图片格式好像不正确!");
} else {
y.src = "file://localhost/" + x.value;
}
}
</script>
这样就可以预览上传的图片,但是如果图片没有加载出来 将会有有一个死图在那里,不是很美观,所以下面我用XHTML 如下:
<form id="form" >
<input type="file" id="file"οnchange="preview()" /></form>
<script type="text/javascript">
function preview() {
var x = document.getElementById("file");
if (!x || !x.value) return;
if (x.value.indexOf(".jpg") < 0 && x.value.indexOf(".jpeg") < 0 && x.value.indexOf(".gif") < 0 && x.value.indexOf(".png") < 0) {
alert("图片格式好像不正确!");
} else {
var img = document.createElement('img');
img.setAttribute('src', 'file://localhost/' + x.value);
img.setAttribute('width', '120');
img.setAttribute('height', '90');
img.setAttribute('id', 'img');
document.getElementById('form').appendChild(img);
}
}
</script>
<input type="file" id="file"οnchange="preview()" /></form>
<script type="text/javascript">
function preview() {
var x = document.getElementById("file");
if (!x || !x.value) return;
if (x.value.indexOf(".jpg") < 0 && x.value.indexOf(".jpeg") < 0 && x.value.indexOf(".gif") < 0 && x.value.indexOf(".png") < 0) {
alert("图片格式好像不正确!");
} else {
var img = document.createElement('img');
img.setAttribute('src', 'file://localhost/' + x.value);
img.setAttribute('width', '120');
img.setAttribute('height', '90');
img.setAttribute('id', 'img');
document.getElementById('form').appendChild(img);
}
}
</script>
如果用正则表达式会很方便,但是我还不太会,只知道这个东西的存在,我会在后续更新关于正则表达式的学习。