PHP jQuery实现上传图片时预览图片的功能实例

在PHP项目开发中,有时候经常需要做添加图片的功能。添加图片时,一般需要即时预览上传的图片。下面这个例子就是简单的预览上传图片功能,代码如下(分两部分):

1、HTML代码:

<div class="c-zt-pic">
   <img >

</div>
  <div style="margin-bottom: 20px;">
  <input type="file" name="image" >
  </div>

2、jQuery代码

$(function() {

     //预览上传图片
            $('#upload').change(function() {
                var f = document.getElementById('upload').files[0];
                var src = window.URL.createObjectURL(f);
                document.getElementById('preview').src = src;
            });

});

效果以及注意事项如下:

PHP jQuery实现上传图片时预览图片的功能实例

PHP jQuery实现上传图片时预览图片的功能实例