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

1、HTML代码:

<div class="c-zt-pic">
   <img id="preview" src="">

</div>
  <div style="margin-bottom: 20px;">
  <input type="file" name="image" id="upload" class="btn btn-edc" value="添加图片">
  </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实现上传图片时预览图片的功能实例的更多相关文章

  1. uploadPreview上传图片前预览图片

    uploadPreview.js是一款图片上传前的预览插件.谷歌.火狐.IE都可以兼容,但是不支持safari. 相关的html代码: <!DOCTYPE html PUBLIC "- ...

  2. angular +H5 上传图片 与预览图片

    //index.html <form class="form-horizontal"> <div class="panel panel-default& ...

  3. jquery实现上传图片本地预览效果

    html: <img id="pic" src="" ><input id="upload" name="fil ...

  4. 一个上传图片,预览图片的小demo

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比

    在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...

  6. [js/jquery]移动端手势拖动,放大,缩小预览图片

    摘要 有这样的需求需要在手机端预览图片的时候,实现图片的手势拖动,放大缩小功能.最终通过touch.js这个插件实现了效果. touch.js Touch.js是移动设备上的手势识别与事件库, 由百度 ...

  7. js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小

    方法一: js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * ...

  8. file上传图片,base64转换、压缩图片、预览图片、将图片旋转到正确的角度

    /** * 将base64转换为文件对象 * (即用文件上传输入框上传文件得到的对象) * @param {String} base64 base64字符串 */ function convertBa ...

  9. 上传预览图片的插件jquery-fileupload

    上传预览图片的插件jquery-fileupload github地址:https://github.com/blueimp/jQuery-File-Upload 中文文档:http://www.jq ...

随机推荐

  1. POJ - 3984 迷宫问题 BFS求具体路径坐标

    迷宫问题 定义一个二维数组: int maze[5][5] = { 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, ...

  2. WinForm 中使用 Action 子线程对主线程 控制进行访问

    /// <summary> /// 开启新线程执行 /// </summary> /// <param name="sender"></p ...

  3. 基于zookeeper实现高性能分布式锁

    实现原理:利用zookeeper的持久性节点和Watcher机制 具体步骤: 1.创建持久性节点 zkLock 2.在此父节点下创建子节点列表,name按顺序定义 3.Java程序获取该节点下的所有顺 ...

  4. javaee--学生成绩录入与显示--Struts2标签的使用

    类Score.java:各课程的成绩及平均成绩 类Student.java:学生姓名.学号及Score类 类ScoreAction.java:将Student类存在一个List对象中, execute ...

  5. Python3之XML模块

    一.简介 xml是实现不同语言或程序之间进行数据交换的协议,可扩展标记语言,标准通用标记语言的子集.是一种用于标记电子文件使其具有结构性的标记语言.xml格式如下,是通过<>节点来区别数据 ...

  6. Linux crontab定时任务命令使用记录

    安装crontab 使用 crontab -v 如果提示没有该命令,则需要安装.安装也很简单,推荐使用yum安装.一条命令即可(yum install crontab),这里不多介绍. 下面是一些基础 ...

  7. Flume自定义拦截器(Interceptors)或自带拦截器时的一些经验技巧总结(图文详解)

    不多说,直接上干货! 一.自定义拦截器类型必须是:类全名$内部类名,其实就是内部类名称 如:zhouls.bigdata.MySearchAndReplaceInterceptor$Builder 二 ...

  8. caffe/proto/caffe.pb.h: No such file or director

    caffe编译过程中遇到的为问题: fatal error: caffe/proto/caffe.pb.h: No such file or directory 解决方法: 用protoc从caffe ...

  9. Linux下指定线程的名字

    为了能方便的区分一个进程中的每个线程,可以通过prctl()给每个线程取个名字.这样在会创建多个线程的程序执行过程中,就能知道一个pid或tid对应的是哪个线程,对调试程序有一定帮助. prctl是个 ...

  10. Apache 配置 http 转 https

    <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteCond %{SERVER_PORT} !^443$ Rewr ...