我想在将图像上传到服务器之前预览图像.我已经为它编写了一些代码,但由于某些安全原因,它只是在Internet Explorer中预览,而不是在Safari,Chrome,Firefox等其他浏览器中预览.有没有解决方案在这些浏览器中预览图像？
<body>
<form name="Upload" enctype="multipart/form-data" method="post">
Filename: <INPUT type="file" id="submit">
<INPUT type="button" id="send" value="Upload">
</form>
<div
id="div"
align="center"
style="height: 200px;width: 500px;border-style: ridge;border-color: red">
</div>
</body>
<script type="text/javascript">
var img_id=0
var image = new Array()
document.getElementById('send').onclick=function()
{
img_id++
var id="imgid"+img_id
image = document.getElementById('submit').value;
document.getElementById('div').innerHTML="<img id='"+id+"' src='"+image+"' width=500px height=200px>"
}
</script>
</html>
解决方法
对于Firefox.由于安全性,它有一个截断的路径.但是,他们提供了其他方法：
var img = document.createElement("IMG");
if(document.all)
img.src = document.getElementById('submit').value;
else
// Your solution for Firefox.
img.src = document.getElementById('submit').files.item(0).getAsDataURL();
document.getElementById('div').appendChild(img);
以下是在Internet Explorer 7和Firefox 3中工作.
<style type="text/css">
#prevImage {
border: 8px solid #ccc;
width: 300px;
height: 200px;
}
</style>
<script type="text/javascript">
function setimage(file) {
if(document.all)
document.getElementById('prevImage').src = file.value;
else
document.getElementById('prevImage').src = file.files.item(0).getAsDataURL();
if(document.getElementById('prevImage').src.length > 0)
document.getElementById('prevImage').style.display = 'block';
}
</script>
<pre>
IE8 needs a security settings change: internet settings,security,custom level :
[] Include local directory path when uploading files to a server
( ) disable
(o) Enable
</pre>
<form>
<input type="file" name="myImage" onchange="setimage(this);" />
</form>
<img id="prevImage" style="display:none;" />
Documentation of File List object on MDC