HTML5 上传图片预览
html5出现之前如果需要上传图片预览 一般都是先上传到服务器然后远程预览
html5出现之后 有个filereader 解决了这问题
//选中图片之后
$("#fileAddPic").on('change', function (e) {
var files = e.target.files || e.dataTransfer.files;
onSelect(files);
}) //选中图片之后
function onSelect(file) {
file = file[0]; var html = '', i = 0;
$("#preview").html('<div class="upload_loading"></div>');
var funAppendImage = function () {
if (file) {
var reader = new FileReader();
reader.onload = function (e) {
$("#upimgBox").attr('src', e.target.result)
}
reader.readAsDataURL(file);
}
};
funAppendImage();
}
HTML5 上传图片预览的更多相关文章
- HTML5上传图片预览
<!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...
- HTML5上传图片预览功能
HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...
- jquery实现上传图片预览(需要浏览器支持html5)
jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- 通过HTML5 FileReader实现上传图片预览功能
原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...
- HTML5可预览多图片ajax上传(使用formData传递数据)
HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...
- JS 上传图片 + 预览功能(一)
JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...
- js兼容火狐显示上传图片预览效果
js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...
- 去除ckeditor上传图片预览中的英文字母
去除ckeditor上传图片预览中的英文字母 CKEDITOR.replace('text', { filebrowserImageUploadUrl : 'upload_img.do', langu ...
- 【小月博客】用HTML5的File API做上传图片预览功能
前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(P ...
随机推荐
- NX二次开发-NXOpen读取工程图注释note1->GetText();
NX9+VS2012 #include <uf.h> #include <uf_drf.h> #include <NXOpen/Annotations_Note.hxx& ...
- javascript html jquery 入门
就开发难易程度来说,现在普遍使用jquery,本人学习jquery html css时间不长,以前写过Flex. CSS+JS+HTML组成HTML开发三驾马车.学习js开发我认为怎么入门十分重要.根 ...
- Java 并发总结(三)
锁优化及注意事项 有助于提高锁的性能 减小所持有时间:例如不要对方法直接加锁,而是在方法中对具体访问临界资源的代码加锁 减小锁粒度:如ConcurrentHashMap 用读写锁代替独占锁 锁分离:如 ...
- error-Java-web:20190618
ylbtech-error-Java-web:20190618 1.返回顶部 1. org.springframework.beans.factory.UnsatisfiedDependencyExc ...
- 实时查询系统架构:spark流式处理+HBase+solr/ES查询
最近要做一个实时查询系统,初步协商后系统的框架 1.流式计算:数据都给spark 计算后放回HBase 2.查询:查询采用HBase+Solr/ES
- tcp_tw_recycle和tcp_timestamps的一些知识(转)
现在很多公司都用LVS做负载均衡,通常是前面一台LVS,后面多台后端服务器,这其实就是NAT,当请求到达LVS后,它修改地址数据后便转发给后端服务器,但不会修改时间戳数据,对于后端服务器来说,请求的源 ...
- pytong下安装安装SK-Learn
安装SK-Learn需要依赖的Python安装包有: Python (>= 2.6), NumPy (>= 1.3), SciPy (>= 0.7), 下载python的各种包的地址 ...
- 2018湘潭大学程序设计竞赛【H】
题目链接:https://www.nowcoder.com/acm/contest/105/H 题意:两个操作,一个在[l,r]区间放颜色为c的球,一个统计在[l,r]里有多少不同颜色的球. 题解:哎 ...
- 事务和JDBC事务隔离级别
与事务相关的理论 mysql事物隔离级别:http://mj4d.iteye.com/blog/1744276 事务(Transaction): 是并发控制的单元,是用户定义的一个操作序列.这些操作要 ...
- Spring Security 自定义登录页面
SpringMVC + Spring Security,自定义登录页面登录验证 学习参考:http://www.mkyong.com/spring-security/spring-security-f ...