<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. https://github.com/ronggang/transmission-web-control

    首先需要保证你的电脑可以链接国际互联网 如果只能链接大型局域网,那么请您带着电脑出国以便于可以顺利安装https://github.com/ronggang/transmission-web-cont ...

  2. Django-rest Framework(五)

    把十大接口做完了才能更好的了解后面的视图类 1.(重点)二次封装Response;自定义APIResponse继承Response,重写 ____init____方法 from rest_framew ...

  3. Spring Cloud Security&Eureka安全认证(Greenwich版本)

    Spring Cloud Security&Eureka安全认证(Greenwich版本) 一·安全 Spring Cloud支持多种安全认证方式,比如OAuth等.而默认是可以直接添加spr ...

  4. Hdfs的列存储和行存储

    列可以分开存储,对于重复性高的数据压缩比会高,但是在元组(行shi)恢复会比较消耗性能 于传统列存储不同 是行组会存储于同一节点中,列扫描会比较快(因为只需扫描一个行组)

  5. idea2018.1.5永久破解过程

    可以根据官网推荐注册idea:http://idea.lanyus.com/ 步骤如下:1 下载破解(crack) jar 包 链接:https://pan.baidu.com/s/1-COPHVJi ...

  6. ASP.NET Core修改IOC为Autofac

    如下是我为了了解如何更换ASP.NET Core中的IOC而查找的文章,如果大家英文OK的,可以直接前往阅读,同时也已经有简单的github例子供大家参考. 参考文章: ASP.NET Core文档: ...

  7. Python程序的执行过程

    1. Python是一门解释型语言? 我初学Python时,听到的关于Python的第一句话就是,Python是一门解释性语言,我就这样一直相信下去,直到发现了*.pyc文件的存在.如果是解释型语言, ...

  8. 华为 Mate8 Emui 5.0 安卓 7.0 root 记录

    步骤: 0.备份手机全部资料 1.华为官网申请解锁码 (unlock password) http://emui.huawei.com/plugin/hwdownload/download 2.关闭手 ...

  9. 项目中的那些事---Java反射的应用

    最近工作中遇到一个这样的问题: 为某个项目中的所有接口做一个测试工具,使用java Swing技术,该项目有不同的版本,不是所有版本中的接口都是相同的,而我做的工具需要兼容所有版本. 于是就引入了这样 ...

  10. 在centos 6.3系统下安装java、tomcat环境的方法与步骤(方法经过验证,可安装成功)

    一.安装java1. 下载java二进制安装包 wget --no-cookies --no-check-certificate --header "Cookie: gpw_e24=http ...