首先这里先讲一个比较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("图片格式好像不正确！");
}*/
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>
这样就可以预览上传的图片，但是如果图片没有加载出来 将会有有一个死图在那里，不是很美观，所以下面我用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>
如果用正则表达式会很方便，但是我还不太会，只知道这个东西的存在，我会在后续更新关于正则表达式的学习。
转载请注明原文地址: https://ju.6miu.com/read-1303458.html
