<input type="file" id='myFile' multiple>
<ul>
<li>
<img src="" alt="">
</li>
<li>
<img src="" alt="">
</li>
</ul>
<script>
//文件上传
//file 属性 this.files 可读属性:name type size
document.getElementById('myFile').onchange=function(){
console.log(this.files);//
for(var i=0;i<this.files.length;i++){
console.log(this.files[i]);
var file=this.files[i];
//读取
var fileReader=new FileReader();
//读取方式
fileReader.readAsDataURL(file);
//结果
fileReader.onload=function(){
console.log(this.result);
//追加插入页面 li-img
var img=document.createElement('img');
img.setAttribute('src',this.result);
var lis=document.createElement('li');
lis.appendChild(img);
document.querySelector('ul').appendChild(lis);
}
} }
</script>

6.12号整理(h5新特性-图片、文件上传)的更多相关文章

  1. 中文乱码问题(使用Servlet3.0新特性实现文件上传——上传文件名中文乱码问题)

    问题描述:就是文件传送过来的文件名等是乱码 解决方法:将传送的JSP页面(即含有表单的页面)的页面编码方式改为: <%@ page contentType="text/html; ch ...

  2. 重新想象 Windows 8.1 Store Apps (89) - 通信的新特性: 下载数据, 上传数据, 上传文件

    [源码下载] 重新想象 Windows 8.1 Store Apps (89) - 通信的新特性: 下载数据, 上传数据, 上传文件 作者:webabcd 介绍重新想象 Windows 8.1 Sto ...

  3. springmvc图片文件上传接口

    springmvc图片文件上传 用MultipartFile文件方式传输 Controller package com.controller; import java.awt.image.Buffer ...

  4. SpringMvc MultipartFile 图片文件上传

    spring-servlet.xml <!-- SpringMVC上传文件时,需要配置MultipartResolver处理器 --> <bean id="multipar ...

  5. .Net Core 图片文件上传下载

    当下.Net Core项目可是如雨后春笋一般发展起来,作为.Net大军中的一员,我热忱地拥抱了.Net Core并且积极使用其进行业务的开发,我们先介绍下.Net Core项目下实现文件上传下载接口. ...

  6. h5移动端实现图片文件上传

    PC端上传文件多半用插件,引入flash都没关系,但是移动端要是还用各种冗余的插件估计得被喷死,项目里面需要做图片上传的功能,既然H5已经有相关的接口且兼容性良好,当然优先考虑用H5来实现. JS代码 ...

  7. PHP 图片文件上传代码

    通过 PHP,可以把文件上传到服务器.里面加入一些图片的判断,如果不加判断文件的类型就可以上传任意格式的文件. 为了网站的安全,肯定不让上传php文件,如果有人进入你的后台,上传了一个php文件,你的 ...

  8. PHP 图片文件上传代码分享

    分享下php上传图片文件的一段代码,挺不错的. 通过 PHP,可以把文件上传到服务器.加入一些图片的判断,如果不加判断文件的类型就可以上传任意格式的文件. 当然了,会禁止上传php文件,以及其它程序代 ...

  9. 利用Selenium实现图片文件上传的两种方式介绍

    在实现UI自动化测试过程中,有一类需求是实现图片上传,这种需求根据开发的实现方式,UI的实现方式也会不同. 一.直接利用Selenium实现 这种方式是最简单的一种实现方式,但是依赖于开发的实现. 当 ...

  10. SpringMvc commons-fileupload图片/文件上传

    简介 SpringMvc文件上传的实现,是由commons-fileupload这个jar包实现的. 需求 在修改商品页面,添加上传商品图片功能. Maven依赖包 pom.xml <!-- 文 ...

随机推荐

  1. Maven实战02_Maven的安装和配置

    1:在Windows上安装Maven 本人系统环境:win10  + JDK1.8 + apache-maven-3.3.9 在安装Maven之前,首先要确定你的Java环境是否已经配置好了,你是否已 ...

  2. python-基础-字符串-列表-元祖-字典2

    接上:http://www.cnblogs.com/liu-wang/p/8973273.html 3 元组 4 字典 4.1 字典的介绍 <2>软件开发中的字典 变量info为字典类型: ...

  3. Docker(三)安装Mysql

    1.安装Mysql,以及常见的错误解决方法 https://blog.csdn.net/qq_19348391/article/details/82998391 2.使用SQLyog或者Navicat ...

  4. BZOJ2120&&2453 数颜色&&维护队列

    2453: 维护队列 Time Limit: 10 Sec Memory Limit: 128 MB Submit: 1442 Solved: 678 [Submit][Status][Discuss ...

  5. LuceneNet 搜索一

    1.引用读取PDF文件组件 FontBox-0.1.0-dev.dll IKVM.GNU.Classpath.dll IKVM.Runtime.dll PDFBox-0.7.3.dll 2.添加off ...

  6. bzoj 2662 [BeiJing wc2012]冻结——分层图

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2662 这种的都是分层图. #include<iostream> #include ...

  7. 使用koa-body中间件后DELETE请求中ctx.request.body内容为空

    gitbook浏览此随笔 出现场景 在使用koa-body 做文件上传的时候,发现使用DELETE请求时,request.body中的内容为空对象{} app.js //code... const K ...

  8. 利用Nginx轻松实现Ajax的跨域请求(前后端分离开发调试必备神技)

    利用Nginx轻松实现浏览器中Ajax的跨域请求(前后端分离开发调试必备神技) 前言 为什么会出现跨域? 造成跨域问题的原因是因为浏览器受到同源策略的限制,也就是说js只能访问和操作自己域下的资源,不 ...

  9. 8天入门wpf—— 第四天 模板

    今天说下wpf中的模板,前面一篇中我们讲到了style,但是style所能做的仅仅是在现有控件的基础上进行修修补补,但是如果我们想彻底颠覆控件样式,那么我们就必须使用这一篇所说的模板. 老外写书都喜欢 ...

  10. fedora input problem...

    davelv最近很郁闷,因为他在Fedora 下用Eclipse写程序的时候,一旦有Eclipse实现了自动提示.代码补齐等功能后,键盘就失去相应,必须根据点右键或者切换窗口才能输入.就上网查,发现是 ...