uploadimage.html 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  4. <title>上传图片预览功能</title>
  5. <!--
  6. <link rel="stylesheet" href="style.css" />
  7. -->
  8. <script type="text/javascript" src="/static/js/jquery-1.7.2.min.js"></script>
  9. <script type="text/javascript">
  10. $(function () {
  11. $("#pic").change(function () {
  12. if ($.browser.msie) {
  13. alert('ccc');
  14. $("#img0").attr("src", $(this).val())
  15. $("#info").text("当前选择的文件:" + $(this).val())
  16. } else {
  17. alert('ddd');
  18. $("#info").text("当前选择的文件:" + $(this).val())
  19. var objUrl = getObjectURL(this.files[0]);
  20. console.log("objUrl=" + objUrl);
  21. if (objUrl) {
  22. $("#img0").attr("src", objUrl);
  23. }
  24. }
  25. })
  26. //建立一個可存取到該file的url
  27. function getObjectURL(file) {
  28. var url = null;
  29. if (window.createObjectURL != undefined) {
  30. url = window.createObjectURL(file);
  31. } else if (window.URL != undefined) {
  32. url = window.URL.createObjectURL(file);
  33. } else if (window.webkitURL != undefined) {
  34. url = window.webkitURL.createObjectURL(file);
  35. }
  36. return url;
  37. }
  38. })
  39. </script>
  40. </head>
  41. <body>
  42. <form action="" name="form0" id="form0">
  43. <input type="file" name="pic" id="pic" class="file0"/>
  44. <a href="">选择图像</a>
  45. <span id="info"></span>
  46. <img src="" alt="" id="img0" width="100"/>
  47. </form>
  48. </body>
  49. </html>