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 选择图片后马上展示出来的更多相关文章

  1. 微信js-sdk,选择图片,上传,下载到本地,php服务端

    //前端js代码<script> //客户端6.0.2 wx.config({ //debug:true, appId: "{pigcms:$signPackage.appId} ...

  2. 转:【微信小程序】 微信小程序-拍照或选择图片并上传文件

    调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=20161222#wxchooseimageobj ...

  3. cordova 选择图片并上传到服务器

    js navigator.camera.getPicture(function(imageURI){ var url=apiUrl+"/upload.aspx"; //alert( ...

  4. 项目总结07:JS图片的上传预览和表单提交(FileReader()方法)

    JS图片的上传预览和表单提交(FileReader()方法) 一开始没有搞明白下面这块代码的,今天有时间简单整理下 核心点:FileReader()方法 以下是代码(以JSP文件为例) <!DO ...

  5. 使用SSM框架实现图片的上传

    SSM实现图片上传功能 效果 在前端页面点击上传图片功能按钮,即弹出文件管理器,选择图片并上传: 思路 在前端页面添加 input 标签,type选择file. 在后端controller编写方法. ...

  6. 前端H5,点击选择图片控件,图片直接在页面上展示~

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 【转载】【JAVA秒会技术之图片上传】基于Nginx及FastDFS,完成图片的上传及展示

    基于Nginx及FastDFS,完成商品图片的上传及展示 一.传统图片存储及展示方式 存在问题: 1)大并发量上传访问图片时,需要对web应用做负载均衡,但是会存在图片共享问题 2)web应用服务器的 ...

  8. H5拍照、选择图片上传组件核心

    背景 前段时间项目重构,改成SSR的项目,但之前用的图片选择上传组件不支持SSR(server-side-render).遂进行了调研,发现很多的工具.但有的太大,有的使用麻烦,有的不满足使用需求.决 ...

  9. 移动端 H5 拍照 从手机选择图片,移动端预览,图片压缩,图片预览,再上传服务器

    前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...

随机推荐

  1. MergeSort(归并排序)算法Java实现

    归并排序  归并排序 (merge sort) 是一类与插入排序.交换排序.选择排序不同的另一种排序方法.归并的含义是将两个或两个以上的有序表合并成一个新的有序表.归并排序有多路归并排序.两路归并排序 ...

  2. RobotFrameWork http/https oauth接口测试 (一)

    感觉自己最近销声匿迹快一个月了,应该总结下自己这个月学习的东西了~~~折腾完公司私有协议的接口测试(c++接口),开始折腾公司的http/https接口和webservice接口的测试,想着把所有的这 ...

  3. Python之基础知识

    一.数据类型和变量 计算机顾名思义就是做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值.但是,计算机能处理的远不止数值,还可以处理文本.图形.音频.网页等各种各样的数据,不同的数据,需要定 ...

  4. win7下JDK环境变量设置方法

    来源于:http://jingyan.baidu.com/article/e9fb46e1b2b3347521f766c1.html

  5. QT开发实战精解

    无法打开包括文件<QApplication> No such file or directory  这一问题 解决办法,使用QApplication时必须在项目pro文件中添加一句 QT ...

  6. MySQL如何关联查询

    总的来说,mysql认为任何一个查询都是一次关联,并不仅仅是一个查询需要用到两个表匹配才叫关联,所以,在mysql中,每一个查询,每一个片段(包括子查询,甚至单表select)都可能是关联.所以,理解 ...

  7. Script 简单语句的练习题

    猜拳 <body>请输入剪刀或者石头或者布:<br /><input type="text" id="A"/><inp ...

  8. 2016年12月21日 星期三 --出埃及记 Exodus 21:16

    2016年12月21日 星期三 --出埃及记 Exodus 21:16 "Anyone who kidnaps another and either sells him or still h ...

  9. NavBarControl

    https://documentation.devexpress.com/#WindowsForms/clsDevExpressXtraNavBarNavBarControltopic Views h ...

  10. Hibernate不能自动建数据表解决办法

    首先自己要注意自己的MYSQL版本,然后设置对应的方言 兼容性模式 <property name="hibernate.dialect">org.hibernate.d ...