用于显示选择图像的JavaScript代码无效

时间:2016-11-27 00:43:39

标签: javascript html

我已经查看了其他问题并发现此代码正常运行,但它无效。我已尝试在浏览器中清除缓存,但仍无法正常工作。有谁能告诉我出了什么问题?

     <script>
         function showImage(input) {
          if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#pic').attr('src',e.target.result).width(200).height(200);                     

            };

            reader.readAsDataURL(input.files[0]);
         }
       }
  </script>

HTML代码

    <input type="file" name="fupload" onchange="showImage(this);"/>
    <img id="pic" src="#" alt="your image" width="200" height="200"/>

1 个答案:

答案 0 :(得分:0)

可能你没有包含jQuery!

<script>
     function showImage(input) {
         if (input.files && input.files[0]) {
            var reader = new FileReader();
            var preview = document.querySelector('#pic'); //-->Added line;

            reader.onload = function (e) {
                //---Correction is here---
                //$('#pic').attr('src',e.target.result).width(200).height(200);
                preview.src = reader.result;

        };

        reader.readAsDataURL(input.files[0]);
     }
   }

使用JsFiddle;

进行测试