在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-3481 Double Queue (splay)

    The new founded Balkan Investment Group Bank (BIG-Bank) opened a new office in Bucharest, equipped w ...

  2. C#@的用法

    string path = @"C:\Windows\"; // 如果不加 @,编译会提示无法识别的转义序列 // 如果不加 @,可以写成如下 string path2 = &qu ...

  3. 警惕C#事件使用过程中的GC陷阱

    关于C#中的事件,园里已经有大量的文章对其内在实现做过剖析,如果还不甚了解的可以阅读这篇文章 通过Demo来细看C#事件的内在机制 虽然比较早,但非常清楚地展示了事件的内部机制,总结一下就是 1.事件 ...

  4. [Win32::Console]Perl终端版生命游戏

    环境,WinXP/Win7  Perl 5.16 默认循环1000次,按ESC提前退出 use strict; use Term::ReadKey; use Win32::Console; use T ...

  5. [AGC005C]Tree Restoring 构造

    Description ​ 给出一个数组a,要求构造一颗树,使节点x距离最远的点的距离为\(a_x\). Input ​ 第一行一个正整数NN(2≤N≤1002≤N≤100) ​ 接下来一行,有NN个 ...

  6. bzoj1070【SCOI2007】修车(费用流)

    题目描述 同一时刻有N位车主带着他们的爱车来到了汽车维修中心.维修中心共有M位技术人员,不同的技术人员对不同的车进行维修所用的时间是不同的.现在需要安排这M位技术人员所维修的车及顺序,使得顾客平均等待 ...

  7. centos7 yum安装配置redis

    1.设置Redis的仓库地址 yum install epel-release 2.安装redis yum install redis 修改配置文件,监听所有的IP地址 vim /etc/redis. ...

  8. js闭包引起的事件注册问题

    背景:闲暇时间看了几篇关于js作用域链与闭包的文章,偶然又看到了之前遇到的一个问题,就是在for循环中为dom节点注册事件驱动,具体见下面代码: <!DOCTYPE html> <h ...

  9. 15、OpenCV Python 轮廓发现

    __author__ = "WSX" import cv2 as cv import numpy as np # 基于拓扑结构来发现和绘制(边缘提取) # cv.findConto ...

  10. 批量改ID 行形式

    update [Temp_Sql] set ID(字段) = (274+ID(字段))  字段+字段形式 可以以行形式批量修改