PHP jQuery实现上传图片时预览图片的功能实例
在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实现上传图片时预览图片的功能实例的更多相关文章
- uploadPreview上传图片前预览图片
uploadPreview.js是一款图片上传前的预览插件.谷歌.火狐.IE都可以兼容,但是不支持safari. 相关的html代码: <!DOCTYPE html PUBLIC "- ...
- angular +H5 上传图片 与预览图片
//index.html <form class="form-horizontal"> <div class="panel panel-default& ...
- jquery实现上传图片本地预览效果
html: <img id="pic" src="" ><input id="upload" name="fil ...
- 一个上传图片,预览图片的小demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比
在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...
- [js/jquery]移动端手势拖动,放大,缩小预览图片
摘要 有这样的需求需要在手机端预览图片的时候,实现图片的手势拖动,放大缩小功能.最终通过touch.js这个插件实现了效果. touch.js Touch.js是移动设备上的手势识别与事件库, 由百度 ...
- js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小
方法一: js: /** * 上传图片本地预览方法 * @param {Object} fileObj 上传文件file的id元素 fresh-fileToUpload * ...
- file上传图片,base64转换、压缩图片、预览图片、将图片旋转到正确的角度
/** * 将base64转换为文件对象 * (即用文件上传输入框上传文件得到的对象) * @param {String} base64 base64字符串 */ function convertBa ...
- 上传预览图片的插件jquery-fileupload
上传预览图片的插件jquery-fileupload github地址:https://github.com/blueimp/jQuery-File-Upload 中文文档:http://www.jq ...
随机推荐
- 20145218张晓涵 PC平台逆向破解_advanced
---恢复内容开始--- 20145218张晓涵 PC平台逆向破解_advanced shellcode注入 基础知识 shellcode就是在利用溢出攻击溢出时要值入的代码,也就是溢出后去执行的代码 ...
- Head First HTML与CSS、XHTML (中文版).(Elisabeth Freeman) PDF扫描版
面对那些晦涩的html书你不禁要问:“难道要成为专家之后才能读懂这些?”那么,你应该选择<head first html与css.xhtml(中文版)>真正来学习html.这本书对你来说, ...
- PLSA的EM推导
本文作为em算法在图模型中的一个应用,推导plsa的em算法. 1 em算法 em算法是解决一类带有隐变量模型的参数估计问题. 1.1 模型的定义 输入样本为,对应的隐变量为.待估计的模型参数为,目标 ...
- Mono for Android for Visual Studio 2010安装及试用
安装 Mono for Android for Visual Studio 2010 需要下面4个步骤: 1.安装 JDK 下载并安装 Java 1.6 (Java 6) JDK. 2.安装 Andr ...
- Job-Show Liang,你来掌管诺基亚王国,可好?
保留我一向高大上风格,开头当然来一个段子 在即将到来MWC(Mobile World Congress缩写,世界移动通信大会),很高兴能听到小诺来参展,我不得不给它32个赞,因为小诺已经好几届没有浮头 ...
- 解决dragsort鼠标拖动与onclick事件共存
- C#委托同步异步说明,并比较control调用Invoke和BeginInvoke的异同
一.委托的同步和异步: 1.同步 使用Invoke调用同步,或直接写fun1("func"),在fun1.Invoke这一步会明显的阻塞线程 使用: static void Mai ...
- 所谓IIS未注册引起的故障及解决
- SQL Server乱码处理(ASCII)
CREATE FUNCTION [dbo].[RegexReplace] ( @string VARCHAR(MAX), --被替换的字符串 @pattern VARCHAR(255), --替换模板 ...
- .Net Core .Net Core的学习
.Net Core 学习 一.什么是.net core? 百度百科: https://baike.baidu.com/item/.net%20core/20130686?fr=aladdin 个人总结 ...