js显示本地图片

来源:互联网 发布:淘宝外卖红包免费领取 编辑:程序博客网 时间:2024/05/20 20:19
    jQuery(function() {
        jQuery("#photo").change(function(event) {
            // 根据这个 <input> 获取文件的 HTML5 js 对象
            var files = event.target.files, file;
            if (files && files.length > 0) {
              // 获取目前上传的文件
              file = files[0];
              // 来在控制台看看到底这个对象是什么
              console.log(file);
              // 那么我们可以做一下诸如文件大小校验的动作
              if(file.size > 1024 * 1024 * 2) {
                  Wap_alert('图片大小不能超过 2MB!');
                return false;
              }
              // !!!!!!
              // 下面是关键的关键,通过这个 file 对象生成一个可用的图像 URL
              // 获取 window 的 URL 工具
              var URL = window.URL || window.webkitURL;
              // 通过 file 生成目标 url
              var imgURL = URL.createObjectURL(file);
              // 用这个 URL 产生一个 <img> 将其显示出来
                jQuery("#hand_img").attr("src",imgURL);
             
            /*jQuery(".head_img_edit").find("img[id^=hand_img]").attr('src', imgURL);*/
              // 使用下面这句可以在内存中释放对此 url 的伺服,跑了之后那个 URL 就无效了
              // URL.revokeObjectURL(imgURL);
            }
          });

        });

    <li class="head_img_edit"><span class="info_name">头像:</span>
                    <input name="photo" id="photo" type="file" accept="image/*"><strong>
                        #if($!obj.photo.name)
                        <img
                            id="hand_img" src="$!imageWebServer/$!obj.photo.path/$!obj.photo.name">
                            #else
                            <img
                            id="hand_img" src="$!webPath/resources/style/common/images/member.jpg">
                            #end
                            </strong></li>

0 0
原创粉丝点击