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 ...
随机推荐
- Django不能使用ip方式访问的解决办法
问题: 启动服务后,使用http://127.0.0.1:8000/showcase/或者http://localhost:8000/showcase/都能访问, 但是使用http://192.168 ...
- HtmlAgilityPack 使用
或.无属性.属性个数.属性值: var preceding_siblings = node.SelectNodes("preceding-sibling::input| preceding- ...
- git you need to resolve your current index first 解决办法
当使用git checkout 切换分支时会提示you need to resolve your current index first,使用如下命令即可解决. $ git reset --merge
- SpringMVC 入门程序
SpringMVC是什么 SpringMVC 是一种基于 Java 的实现 MVC 设计模型的请求驱动类型的轻量级 Web 框架,属于 Spring FrameWork 的后续产品,已经融合在 Spr ...
- python-列表增删改查、排序、两个list合并、多维数组等
一.list列表 数组 列表类型:list 下标从0开始,0,1,2... 二.列表增加元素 stus.append() 在列表末尾增加一个元素: stus.insert(,) 在指定位置添加一个元 ...
- leecode刷题(5)-- 只出现一次的数字
leecode刷题(5)-- 只出现一次的数字 只出现一次的数字 描述: 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. 说明: 你的算法应该具 ...
- Navicat 远程连接 MySQL
Navicat 远程连接 MySQL 相信大家都有在远程服务器上进行开发吧,其中 MySQL 的使用率应该也会挺高,如果使用 Navicat 等可视化工具来操作远程数据库不失为一种很好的选择,避免了在 ...
- leetcode-229.求众数(二)
题目: 给定一个大小为 n 的数组,找出其中所有出现超过 ⌊ n/3 ⌋ 次的元素. 说明: 要求算法的时间复杂度为O(n),空间复杂度为O(1). 示例 1: 输入: [3,2,3] 输出: [3 ...
- 20165224 陆艺杰 Exp3 免杀原理与实践
杀软是如何检测出恶意代码的? 识别代码特征码 监测像后门的行为 (2)免杀是做什么? 让后面程序不被安全软件发现 (3)免杀的基本方法有哪些? 多方式编码 半手工shellcode编程 完全自己写没有 ...
- [BZOJ 4488][Jsoi2015]最大公约数
传送门 不知谁说过一句名句,我们要学会复杂度分析 #include <bits/stdc++.h> using namespace std; #define rep(i,a,b) for( ...