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 ...
随机推荐
- maven配置私服中可能遇到的问题
文章目录 之前要写一个hsf的demo,maven的依赖是需要alibaba的私服的,所以出现了下面的错误. 具体参看另一篇文章:https://blog.csdn.net/dataiyangu/ar ...
- Git 学习(三)Git 创建版本库
获取 Git 仓库 什么是 Git 仓库呢,仓库又名版本库,我们可以把他理解为一个文件夹.这个文件夹里的所有东西都需要被 Git 给管理起来,对立面每个文件的修改.编辑.删除都将被 Git 记录,以便 ...
- Lombok 常用注解
Lombok Lombok 能以简单的注解形式来简化 java 代码,提高开发人员的开发效率.例如开发中经常需要写的 javaBean,都需要花时间去添加相应的 getter/setter,也许还要去 ...
- USACO 2011 February Silver Cow Line /// 康拓展开模板题 oj22713
题目大意: 输入n k,1-n的排列,k次操作 操作P:输入一个m 输出第m个排列 操作Q:输入一个排列 输出它是第几个排列 Sample Input 5 2P3Q1 2 5 3 4 Sample O ...
- 记录一次MySQL数据库CPU负载异常高的问题
1.起因 某日下午18:40开始,接收到滕讯云短信报警,显示数据库CPU使用率已超过100%,同时慢查询日志的条数有1500条左右. 正常情况下:CPU使用率为30%-40%之间,慢查询日志条数为0. ...
- pop&dismiss
//dismiss到根视图 - (void)dismissToRootViewController{ UIViewController *vc = self; while (vc.presenting ...
- 【笔记篇】(理论向)快速傅里叶变换(FFT)学习笔记w
现在真是一碰电脑就很颓废啊... 于是早晨把电脑锁上然后在旁边啃了一节课多的算导, 把FFT的基本原理整明白了.. 但是我并不觉得自己能讲明白... Fast Fourier Transformati ...
- Android Studio Gradle无法获取pom文件
错误提示: Error:Execution failed for task ':app:lintVitalRelease'. > Could not resolve all artifacts ...
- 【JZOJ2867】Contra
description 偶然间,chnlich 发现了他小时候玩过的一个游戏"魂斗罗",于是决定怀旧.但是这是一个奇怪的魂斗罗 MOD. 有 N 个关卡,初始有 Q 条命. 每通过 ...
- 廖雪峰Java16函数式编程-2Stream-1Stream简介
1. Stream Java8引入全新的Stream API 位于java.util.stream包 1.1 Stream API不同于java.io的InputStream/OutputStream ...