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点比较 ...
随机推荐
- paper 96:计算机视觉-机器学习近年部分综述
计算机视觉和机器学习领域 近两年部分综述文章,欢迎推荐其他的文章,不定期更新. [2015] [1]. E.Sariyanidi, H. Gunes, A. Cavallaro, Aut ...
- My roadway of compilers principles.
龙书学习过程代码记录--Python3.5(毕竟第一遍看书,书里面的例子全用python写的) One 将中缀表达式翻译成后缀表达式↓ class Parser(object): def __init ...
- retain,copy,assign及autorelease ,strong,weak
一,retain, copy, assign区别 1. 假设你用malloc分配了一块内存,并且把它的地址赋值给了指针a,后来你希望指针b也共享这块内存,于是你又把a赋值给(assign)了b.此时a ...
- 白话LINQ系列1---什么是LINQ?
一.本系列目标 1.理解LINQ: 2.能写得复杂的LINQ语句(比如:动态查询): 3.理解表达式树及相关概念: 4.熟练运用LINQ写出优美的代码(希望一起努力,最终达到): 二.LINQ为何物? ...
- HTML5 UI框架Kendo UI Web自定义组件(一)
Kendo UI Web包含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等.在Kendo UI Web中如何创建自定义组件呢,在下面的文章中 ...
- Auty自动化测试框架第七篇——添加动作库和常量文件库
[本文出自天外归云的博客园] 添加动作库 因为有很多调用的action类如果一直保存在utils中会让utils库不可维护,所以规定utils库中只放和框架本身有关的工具类,和脚本内容相关的工具类都放 ...
- 动态创建的DOM元素进行事件绑定
http://files.cnblogs.com/files/xsmhero/jquery.livequery.js <script type="text/javascript&quo ...
- 理解JS回调函数
我们经常会用到客户端与Web项目结合开发的需求,那么这样就会涉及到在客户端执行前台动态脚本函数,也就是函数回调,本文举例来说明回调函数的过程. 首先创建了一个Web项目,很简单的一个页面,只有一个bu ...
- 从零开始HTML(二 2016/9/20)
1.布局 ① 使用 <div> 元素的 HTML 布局,<div> 元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位. <!DOCTYPE html> ...
- CSS3中的2D转换
通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 转换是使元素改变形状.尺寸和位置的一种效果. 注:Internet Explorer 10.Firefox 以及 Opera 支 ...