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. jQuery的deferred对象详解(转载)

    本文转载自: jQuery的deferred对象详解(转载)

  2. gulp详细入门教程(转载)

    本文转载自: gulp详细入门教程

  3. Tomcat6性能优化

    1.内存设置      Windows环境下修改“%TOMCAT_HOME%\bin\catalina.bat”文件,在文件开头增加如下设置:set JAVA_OPTS=-Xms256m -Xmx51 ...

  4. apache 一域名下多个二级域名如何做设置?

    域名最新配置说明官网:http://apache.chinahtml.com/ 目的是在根目录,不同子域名可以访问不同目录下的网站: 第一步:打开 C:\Windows\System32\driver ...

  5. 基于.NET的微软ORM框架视频教程(Entity Framework技术)

    基于.NET的微软ORM框架视频教程(Entity Framework技术) 第一讲  ORM映射 第二讲 初识EntifyFramework框架 第三讲 LINQ表达式查询 第四讲 LINQ方法查询 ...

  6. 解决 .so文件64与32不兼容问题

    http://blog.csdn.net/vhawk/article/details/49964475 android64位机子兼容32位.so库文件 2016-11-25 19:39 5416人阅读 ...

  7. 用流从一个指定的网址抓取html代码

    package cn.bdqn.collect.test; import java.io.BufferedReader; import java.io.InputStream; import java ...

  8. eclipse https git

    open preferences via application menu Window => Preferences (or on OSX Eclipse => Settings). N ...

  9. XDocument 获取包括第一行的声明(版本、编码)的所有节点

    XDocument保存为xml文件的方法如下: XDocument doc = new XDocument( new XDeclaration("1.0","UTF-8& ...

  10. HDU 5832 A water problem(某水题)

    p.MsoNormal { margin: 0pt; margin-bottom: .0001pt; text-align: justify; font-family: Calibri; font-s ...