在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. python 读取mysql存储的文件路径下载文件,内容解析,上传七牛云,内容入es

    #!/usr/bin/env python # -*- coding: utf-8 -*- import ConfigParser import json import os import re fr ...

  2. 快速获取.NET DLL文件编译时间

    当用户现场汇报问题给我们, 我们比较关心的就有用户现场的DLL是什么版本号,是什么时候编译的. 有没有什么办法得到呢?办法是有的. 在网上找了很久终端找到这个软件非常地好用. 直接把文件拖到软件里就行 ...

  3. struts2中错误提示:There is no Action mapped for namespace / and action name

    当在struts2中运行时出现如上所述错误时: 1.在src目录下创建struts.xml一定要注意拼写 2.struts.xml文件中引入和extend是否正确 3.在web.xml 中<we ...

  4. ASP.NET Core 一个Json返回类

    很多时候(如Ajax)我们需要从Web应用中得到标准的反馈以便进行数据分析. 为此,我将各类返回标准化封装,客户端将统一得到 JSON:[{"status":200,"m ...

  5. 洛谷P3358 最长k可重区间集问题(费用流)

    传送门 因为一个zz错误调了一个早上……汇点写错了……spfa也写错了……好吧好像是两个…… 把数轴上的每一个点向它右边的点连一条边,容量为$k$,费用为$0$,然后把每一个区间的左端点向右端点连边, ...

  6. [NOI2010]能量采集 BZOJ2005 数学(反演)&&欧拉函数,分块除法

    题目描述 栋栋有一块长方形的地,他在地上种了一种能量植物,这种植物可以采集太阳光的能量.在这些植物采集能量后,栋栋再使用一个能量汇集机器把这些植物采集到的能量汇集到一起. 栋栋的植物种得非常整齐,一共 ...

  7. wpa_supplicant

    一 函数接口介绍 wpa_ctrl_open接口用来打开wpa_supplicant的控制接口,在UNIX系统里使用UNIX domain sockets,而在Windows里则是使用UDP sock ...

  8. Linux 使用echo向文件末尾追加命令

    //echo后边用单引号包围要添加的内容 echo 'add content'>>/home/data/test.sh 注意>>表示在原来的文件末尾上进行追加,如果使用的是&g ...

  9. External Tools

    Preferences偏好设置-External Tools External Tools: External Script Editor:外部脚本编辑器,通过此项可以切换您所擅用的脚本的编辑器 Ed ...

  10. 1076 Wifi密码 (15 分)

    // 思路是网上以一位大神的,特简单直接采用字符串,判断长度,还有最后一个元素是否T,便可通过ASCll输出数字:#include <iostream> #include <stri ...