如何在通过JavaScript上传之前上传预览图像

前端之家收集整理的这篇文章主要介绍了如何在通过JavaScript上传之前上传预览图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在将图像上传到服务器之前预览图像.我已经为它编写了一些代码,但由于某些安全原因,它只是在Internet Explorer中预览,而不是在Safari,Chrome,Firefox等其他浏览器中预览.有没有解决方案在这些浏览器中预览图像?
  1. <body>
  2. <form name="Upload" enctype="multipart/form-data" method="post">
  3. Filename: <INPUT type="file" id="submit">
  4. <INPUT type="button" id="send" value="Upload">
  5. </form>
  6. <div
  7. id="div"
  8. align="center"
  9. style="height: 200px;width: 500px;border-style: ridge;border-color: red">
  10. </div>
  11. </body>
  12.  
  13. <script type="text/javascript">
  14. var img_id=0
  15. var image = new Array()
  16. document.getElementById('send').onclick=function()
  17. {
  18. img_id++
  19. var id="imgid"+img_id
  20. image = document.getElementById('submit').value;
  21. document.getElementById('div').innerHTML="<img id='"+id+"' src='"+image+"' width=500px height=200px>"
  22. }
  23. </script>
  24. </html>

解决方法

对于Firefox.由于安全性,它有一个截断的路径.但是,他们提供了其他方法
  1. var img = document.createElement("IMG");
  2. if(document.all)
  3. img.src = document.getElementById('submit').value;
  4. else
  5. // Your solution for Firefox.
  6. img.src = document.getElementById('submit').files.item(0).getAsDataURL();
  7. document.getElementById('div').appendChild(img);

以下是在Internet Explorer 7和Firefox 3中工作.

  1. <style type="text/css">
  2. #prevImage {
  3. border: 8px solid #ccc;
  4. width: 300px;
  5. height: 200px;
  6. }
  7. </style>
  8. <script type="text/javascript">
  9. function setImage(file) {
  10. if(document.all)
  11. document.getElementById('prevImage').src = file.value;
  12. else
  13. document.getElementById('prevImage').src = file.files.item(0).getAsDataURL();
  14. if(document.getElementById('prevImage').src.length > 0)
  15. document.getElementById('prevImage').style.display = 'block';
  16. }
  17. </script>
  18. <pre>
  19. IE8 needs a security settings change: internet settings,security,custom level :
  20.  
  21. [] Include local directory path when uploading files to a server
  22. ( ) Disable
  23. (o) Enable
  24. </pre>
  25. <form>
  26. <input type="file" name="myImage" onchange="setImage(this);" />
  27. </form>
  28. <img id="prevImage" style="display:none;" />

Documentation of File List object on MDC

猜你在找的JavaScript相关文章