6.12号整理(h5新特性-图片、文件上传)
<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新特性-图片、文件上传)的更多相关文章
- 中文乱码问题(使用Servlet3.0新特性实现文件上传——上传文件名中文乱码问题)
问题描述:就是文件传送过来的文件名等是乱码 解决方法:将传送的JSP页面(即含有表单的页面)的页面编码方式改为: <%@ page contentType="text/html; ch ...
- 重新想象 Windows 8.1 Store Apps (89) - 通信的新特性: 下载数据, 上传数据, 上传文件
[源码下载] 重新想象 Windows 8.1 Store Apps (89) - 通信的新特性: 下载数据, 上传数据, 上传文件 作者:webabcd 介绍重新想象 Windows 8.1 Sto ...
- springmvc图片文件上传接口
springmvc图片文件上传 用MultipartFile文件方式传输 Controller package com.controller; import java.awt.image.Buffer ...
- SpringMvc MultipartFile 图片文件上传
spring-servlet.xml <!-- SpringMVC上传文件时,需要配置MultipartResolver处理器 --> <bean id="multipar ...
- .Net Core 图片文件上传下载
当下.Net Core项目可是如雨后春笋一般发展起来,作为.Net大军中的一员,我热忱地拥抱了.Net Core并且积极使用其进行业务的开发,我们先介绍下.Net Core项目下实现文件上传下载接口. ...
- h5移动端实现图片文件上传
PC端上传文件多半用插件,引入flash都没关系,但是移动端要是还用各种冗余的插件估计得被喷死,项目里面需要做图片上传的功能,既然H5已经有相关的接口且兼容性良好,当然优先考虑用H5来实现. JS代码 ...
- PHP 图片文件上传代码
通过 PHP,可以把文件上传到服务器.里面加入一些图片的判断,如果不加判断文件的类型就可以上传任意格式的文件. 为了网站的安全,肯定不让上传php文件,如果有人进入你的后台,上传了一个php文件,你的 ...
- PHP 图片文件上传代码分享
分享下php上传图片文件的一段代码,挺不错的. 通过 PHP,可以把文件上传到服务器.加入一些图片的判断,如果不加判断文件的类型就可以上传任意格式的文件. 当然了,会禁止上传php文件,以及其它程序代 ...
- 利用Selenium实现图片文件上传的两种方式介绍
在实现UI自动化测试过程中,有一类需求是实现图片上传,这种需求根据开发的实现方式,UI的实现方式也会不同. 一.直接利用Selenium实现 这种方式是最简单的一种实现方式,但是依赖于开发的实现. 当 ...
- SpringMvc commons-fileupload图片/文件上传
简介 SpringMvc文件上传的实现,是由commons-fileupload这个jar包实现的. 需求 在修改商品页面,添加上传商品图片功能. Maven依赖包 pom.xml <!-- 文 ...
随机推荐
- Python模块安装方式
一.方法1: 单文件模块直接把文件拷贝到 $python_dir/lib/python3.4/site-packages/ 二.方法2: 多文件模块,带setup.py 下载模块包,进行解压,进入模块 ...
- Linux User and Group Management
linux is a multi-user and multitasking OS. In Linux, you can create any number of user account and g ...
- consul理解
假设consul软件安装在电脑ComputerA上,那么需要注册的服务ServiceA1也需要安装在电脑ComputerA上, 一个服务就是一个提供了ip+port(或者域名)的应用程序. 服务: 服 ...
- 使用requireJs进行模块化开发
requireJs使用 requireJs 使用require.js的第一步,是先去官方网站下载最新版本. 下载后,假定把它放在js子目录下面,就可以加载了. <script src=" ...
- 容斥原理学习(Hdu 4135,Hdu 1796)
题目链接Hdu4135 Co-prime Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
- mysql基础记录
1. 概念介绍 数据库:专门存储数据,存储数据的仓库,同时提供了对数据的操作方法,增删改查的方法 事务 事务:是作为一个单元的一组有序的数据库操作,如果组当中所有操作都成功,则事务执行成功,如果有一个 ...
- jnhs[未解决]无法使用选定的hibernate配置文件建立数据库连接.请验证hibernate.cfg.xml中的数据库连接详情信息
工程可以正常的使用读写数据库,当然model和model.hbm.xml文件是自己写的. 解决中
- Python操作数据库遇到的问题
网上教程很多,不多赘述,记录一下遇到的问题. 开始安装的是Python3.x最新版本,用的是pycharm,教程参考有 https://www.cnblogs.com/yufeihlf/p/60041 ...
- T2848 列车调度(二分或dp)
题目背景 自行脑补, 题目描述 有N辆列车,标记为1,2,3,…,N.它们按照一定的次序进站,站台共有K个轨道,轨道遵从先进先出的原则.列车进入站台内的轨道后可以等待任意时间后出站,且所有列车不可后退 ...
- Laravel5.5/6 报错call to undefined function openssl cipher iv length()
在安装laravel5.5后, 访问显示报错. call to undefined function openssl cipher iv length() 经查为php7.1的OpenSSL扩展加载失 ...