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二次开发-UFUN设置透明度UF_OBJ_set_translucency
NX9+VS2012 #include <uf.h> #include <uf_modl.h> #include <uf_obj.h> UF_initialize( ...
- java排序算法之冒泡排序和快速排序
总结一下Java排序算法,以便记忆. 各类排序的时间复杂度: 排序方法 时间复杂度(平均) 时间复杂度(最坏) 时间复杂度(最好) 空间复杂度 稳定性 复杂性 直接插入排序 O(n2)O(n2) O( ...
- MySQL数据库迁移详细步骤
转载自:http://sofar.blog.51cto.com/353572/1598364 ===================================================== ...
- 27-Ubuntu-远程管理命令-01-关机和重启
关机和重启--shutdown 注: 不指定选项和参数,默认表示1分钟之后关闭电脑 远程维护服务器时,最好不要关闭系统而应该重启 实例1:立刻关机 shutdown -h now 实例2:未带任何参数 ...
- 解决OCX 在 非开发电脑上注册出错的问题
这几天遇到一个问题,就是在我自己电脑上开发的OCX 放在其他电脑上居然注册失败,管理员运行也不行,老是会蹦出这样的错误,最后呢终于让我找到一个线索就是在开发电脑上可以安装,在无开发环境上很大概率安装失 ...
- MongoDB + Spark结合使用方案
MongoDB上海的活动已经结束快1个月了,我们再来回顾一下TJ在大会上进行的精彩分享吧~ MongoDB + Spark: 完整的大数据计算解决方案. Spark介绍 按照官方的定义,Spark 是 ...
- iOS开发系列-weak与unsafe_unretained修饰符
概述 在iOS内存管理中,为防止循环引用,定义类的内部对象属性使用weak.unsafe_unretained修饰符,不产生强引用. 开发中一般使用的weak修饰符,那么接下来说下weak跟unsaf ...
- Linux内存 mem 和 swap
摘抄并用于自查 Linux mem/swap/buffers/cached区别 free命令相对于top,提供了更简洁的查看系统内存使用情况: # free -m mem:表示物理内存统计 buff/ ...
- 数据库MySQL--子查询
例子文件1:https://files.cnblogs.com/files/Vera-y/myemployees.zip 子查询:又称内查询,出现在其他语句中的select语句 主查询:又称外查询,内 ...
- linux 将子文件夹的文件复制到 当前目录中
linux 将子文件夹的文件复制到 当前目录中,如 目录结构大概是 -sh |__ db_backup |___ test |____ 2018_01_01_00_00_00 |_____ 2018_ ...