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. Ajax提交整个表单

    //view页面 <script> $(function () { $("#btnAdd").click(function () { var pars = $(&quo ...

  2. 解决ADB端口占用问题

    方式一5037为adb默认端口,若5037端口被占用,查看占用端口的进程PIDC:\Users\wwx229495>netstat -aon|findstr 5037   TCP    127. ...

  3. Cookie与Session的区别

    cookie机制 Cookies是服务器在本地机器上存储的小段文本并随每一个请求发送至同一个服务器.IETF RFC 2965 HTTP State Management Mechanism 是通用c ...

  4. [课程设计]Scrum 2.3 多鱼点餐系统开发进度 (订单一览设计)

    Scrum 2.3 多鱼点餐系统开发进度  (订单一览设计) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到店点餐系统 ...

  5. ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多

    ListView实现Item上下拖动交换位置  并且实现下拉刷新  上拉加载更多 package com.example.ListViewDragItem; import android.app.Ac ...

  6. 【Office Word】论文排版有关技巧

    本文分两部分,第一部分呢是Word中标题的编号以及图表的编号:第二部分是MathType中公式编号的右对齐方法.   1. word中标题的编号以及图表的编号   本部分转载自:http://blog ...

  7. Android first---放置在外存中的文件读取

    照样以登录案例举例: 第一步:界面绘制:跟之前写过的一个案例一样 第二步:逻辑代码 public class MainActivity extends Activity { //定义全局变量    p ...

  8. 我的android学习经历34

    用类对象作为ArrayAdapter绑定的基本数据类型(和SimpleAdater效果类似) 一般ArrayAdapter绑定的基本数据类型是String,接下来介绍一下类对象作为基本数据类型: 首先 ...

  9. Python 基础练习

    今天接触了python,了解了一下 python 的基础语法,于是想着手训练一下,在本习题集中,参考代码为提供的参考答案,前面的代码为自己思考的代码,最后每道题给出练习的时间. Python 基础练习 ...

  10. ConsensusClusterPlus根据基因表达量对样品进行分类

    #http://www.ncbi.nlm.nih.gov/pmc/articles/PMC2881355/ 一致聚类方法,采用重抽样方法来验证聚类合理性. library(ALL)data(ALL)d ...