在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. MongoDB整理笔记のGridFS

    GridFS 是一种将大型文件存储在MongoDB 数据库中的文件规范.所有官方支持的驱动均实现了GridFS 规范. GridFS是MongoDB中的一个内置功能,可以用于存放大量小文件. 官网学习 ...

  2. 15分XX秒后订单自动关闭(倒计时)

    //订单记录 function get_order(){ //请求订单ajax方法 XX.send_api("method",{data},function(){ var date ...

  3. 百度离线地图API开发V2.0版本

    全面介绍,请看下列介绍地址,改写目前最新版本的百度V2.0地图,已全面实现离线操作,能到达在线功能的95%以上 http://api.jjszd.com:8081/apituiguang/gistg. ...

  4. Linux服务器其中一个磁盘满了怎么办?在不做磁盘扩容的情况下,一个软连接就搞定。

    适用环境要求:Linux系统及服务器.有管理员权限.存在多余空间的磁盘例如下图中"/home"在磁盘sda5中与"/"不属于同一块磁盘: 1.首先转移正在使用的 ...

  5. IO流-File,字节流,缓冲流

    1.1 IO概述 回想之前写过的程序,数据都是在内存中,一旦程序运行结束,这些数据都没有了,等下次再想使用这些数据,可是已经没有了.那怎么办呢?能不能把运算完的数据都保存下来,下次程序启动的时候,再把 ...

  6. docker概述及基础操作

    docker概述 容器技术已经成为应用程序封装和交付的核心技术容器技术的核心有以下几个内核组成CGroups-资源管理NamsSpace-进程管理SElinux-安全 由于是在物理机上实施隔离,启动一 ...

  7. 【离散数学】 SDUT OJ 谁是作案嫌疑人?

    谁是作案嫌疑人? Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description 刑侦大队对涉及六个嫌 ...

  8. 【离散数学】 SDUT OJ 哪款赛车最佳?

    哪款赛车最佳? Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description 四名专家对四款赛车进行 ...

  9. HBASE常用操作增删改查

    http://javacrazyer.iteye.com/blog/1186881 http://www.cnblogs.com/invban/p/5667701.html

  10. 条目四《用empty来代替检查size()是否为0》

    条目四<用empty来代替检查size()是否为0> 首先先说结论: empty()实现为内联函数.(众所周知, 优秀的内联函数的效率比一般函数是高的) 在stl标准库中,empty()对 ...