jquery实现表单上传图片预览

最近有个小页面需要实现图片上传预览,自己还不擅长javascript,迷茫的看了好久文档之后算是利用File API实现了这个事情。 js代码:

    <script>
        function preview(files){
          for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var reader = new FileReader();
            reader.onload = (function(aImg) {
              return function(e) {
                //假设页面上的img元素id为showimg
                $('#showimg') . attr('src', e.target.result);
              };
            })();
            reader.readAsDataURL(file);
          }
        }
    </script>

调用只要在input元素上加上onchange="preview(this.files)"

相关链接 在web应用中使用文件 – Mozilla 文档 来自百度的一个上传组件http://fex.baidu.com/webuploader/

comments powered by Disqus