html 选择图片后马上展示出来
document.getElementById('file4').onchange = function(evt) {
// 如果浏览器不支持FileReader,则不处理
if (!window.FileReader) return;
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
// img 元素
document.getElementById('pic4').src = e.target.result;
};
})(f);
reader.readAsDataURL(f);
}
}
jquery方法
$('.yyzz_a input').change(function(evt){
// 如果浏览器不支持FileReader,则不处理
if (!window.FileReader) return;
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
var obj = $(this).parent().children('label').children('img');//$(obj).remove();
reader.onload = (function(theFile) {
return function(e) {
// img 元素
$(obj).attr('src',e.target.result);
};
})(f);
reader.readAsDataURL(f);
}
})
html 选择图片后马上展示出来的更多相关文章
- 微信js-sdk,选择图片,上传,下载到本地,php服务端
//前端js代码<script> //客户端6.0.2 wx.config({ //debug:true, appId: "{pigcms:$signPackage.appId} ...
- 转:【微信小程序】 微信小程序-拍照或选择图片并上传文件
调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=20161222#wxchooseimageobj ...
- cordova 选择图片并上传到服务器
js navigator.camera.getPicture(function(imageURI){ var url=apiUrl+"/upload.aspx"; //alert( ...
- 项目总结07:JS图片的上传预览和表单提交(FileReader()方法)
JS图片的上传预览和表单提交(FileReader()方法) 一开始没有搞明白下面这块代码的,今天有时间简单整理下 核心点:FileReader()方法 以下是代码(以JSP文件为例) <!DO ...
- 使用SSM框架实现图片的上传
SSM实现图片上传功能 效果 在前端页面点击上传图片功能按钮,即弹出文件管理器,选择图片并上传: 思路 在前端页面添加 input 标签,type选择file. 在后端controller编写方法. ...
- 前端H5,点击选择图片控件,图片直接在页面上展示~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【转载】【JAVA秒会技术之图片上传】基于Nginx及FastDFS,完成图片的上传及展示
基于Nginx及FastDFS,完成商品图片的上传及展示 一.传统图片存储及展示方式 存在问题: 1)大并发量上传访问图片时,需要对web应用做负载均衡,但是会存在图片共享问题 2)web应用服务器的 ...
- H5拍照、选择图片上传组件核心
背景 前段时间项目重构,改成SSR的项目,但之前用的图片选择上传组件不支持SSR(server-side-render).遂进行了调研,发现很多的工具.但有的太大,有的使用麻烦,有的不满足使用需求.决 ...
- 移动端 H5 拍照 从手机选择图片,移动端预览,图片压缩,图片预览,再上传服务器
前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...
随机推荐
- elasticsearch基础
elastic使用lucene建立索引的步骤中,需要文件系统缓存需要同步到磁盘上.(多个segment->commit文件来维护) 当建立历史数据时,并不要求太高的实时性时,可以减小(默认1s) ...
- 说一下linux中shell的后台进程与前台进程
环境: 操作系统:archlinux; 终端模拟器:rxvt-unicode(urxvt); shell:bash; 这里所说的后台进程是指在命令行后面加一个 ampersand(&),前台进 ...
- 《zw版·Halcon-delphi系列原创教程》 Halcon分类函数·简明中文手册 总览
<zw版·Halcon-delphi系列原创教程> Halcon分类函数·简明中文手册 总览 Halcon函数库非常庞大,光HALCONXLib_TLB.pas文件,源码就要7w多行,但核 ...
- 改int非空自增列为int可为空列
) --声明读取数据库所有数据表名称游标mycursor1 open mycursor1 --从游标里取出数据赋值到我们刚才声明的数据表名变量中 fetch next from mycursor1 i ...
- 【C解毒】怎样写main()函数
[C解毒]怎样写main()函数(出处: CUNIX论坛)
- 161222、Bootstrap table 服务器端分页示例
bootstrap版本 为 3.X bootstrap-table.min.css bootstrap-table-zh-CN.min.js bootstrap-table.min.js 前端boot ...
- Effective_Python mapreduce
完全吊炸天构造器的写法... import os import threading,time class GenericInputData(object): def read(self): raise ...
- 《Java并发编程实战》读书笔记
Subsections 线程安全(Thread safety)锁(lock)共享对象对象组合基础构建模块任务执行取消和关闭线程池的使用性能与可伸缩性并发程序的测试显示锁原子变量和非阻塞同步机制 一.线 ...
- 用CSS3实现文字描边
CSS3作为新兴的前端技术可以实现很多复杂变化的效果,比如文字描边. 这里主要用到text-shadow属性,顾名思义就是为文字加上阴影效果.例: text-shadow:10px 5px 2px # ...
- JavaScript DOM 编程艺术(第2版)读书笔记 (9)
三位一体的网页 结构层:由HTML或XHTML之类的标记语言负责创建: 表示层:由CSS负责完成: 行为层:负责内容应该如何响应事件这一问题.这是由JavaScript语言和DOM主宰的领域. 分离 ...