1. <input type="file" id='myFile' multiple>
  2. <ul>
  3. <li>
  4. <img src="" alt="">
  5. </li>
  6. <li>
  7. <img src="" alt="">
  8. </li>
  9. </ul>
  10. <script>
  11. //文件上传
  12. //file 属性 this.files 可读属性:name type size
  13. document.getElementById('myFile').onchange=function(){
  14. console.log(this.files);//
  15. for(var i=0;i<this.files.length;i++){
  16. console.log(this.files[i]);
  17. var file=this.files[i];
  18. //读取
  19. var fileReader=new FileReader();
  20. //读取方式
  21. fileReader.readAsDataURL(file);
  22. //结果
  23. fileReader.onload=function(){
  24. console.log(this.result);
  25. //追加插入页面 li-img
  26. var img=document.createElement('img');
  27. img.setAttribute('src',this.result);
  28. var lis=document.createElement('li');
  29. lis.appendChild(img);
  30. document.querySelector('ul').appendChild(lis);
  31. }
  32. }
  33. }
  34. </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. iOS多线程方案总结及使用详解

    本篇文章整理了几种iOS中主要的多线程方案,提供了Swift和Objective-C两种语言的写法. 概述 iOS目前有四种多线程解决方案: NSThread GCD NSOperation Pthr ...

  2. KOA 学习(七) 路由koa-router

    一.基本用法 var app = require('koa')(); var router = require('koa-router')(); router.get('/', function *( ...

  3. 3.appium定位方法

    1.使用id定位: driver.find_element_by_id('id的名称').click() 2.使用className定位: driver.find_element_by_class_n ...

  4. Leetcode80. Remove Duplicates from Sorted Array II删除排序数组中的重复项2

    给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素最多出现两次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成. 示例  ...

  5. 生成中国地区随机IP

    #随机生成IP 中国区    public function randip($member){        if($member['user_ip']){            if($member ...

  6. JS---案例:大量字符串拼接效果实现

    案例:大量字符串拼接效果实现 按钮点击,字符串拼接,最后效果字符串,str input有很多,type来分就有button和text,需要找出inputs[i].value是text的 所以用!=&q ...

  7. 从页面获取form表单提交的数据

    1 使用HttpServletRequest,方便灵活 页面代码,使用action提交一个表单,里边有球的id,球的主人,球的颜色,所在省份,区域 <form action="ball ...

  8. hdu 1296 Polynomial Problem(多项式模拟)

    Problem Description We have learned how to obtain the value of a polynomial when we were a middle sc ...

  9. 【P3056】【USACO12NOV】笨牛Clumsy Cows

    P3056 [USACO12NOV]笨牛Clumsy Cows 题目描述 Bessie the cow is trying to type a balanced string of parenthes ...

  10. composer本地安装文档 - CSDN博客

    1.下载下图2个文件 2.将上图2个文件放到php根目录下与php.exe再同一目录 3.在composer.bat写 4.配置环境变量(将php目录复制到环境变量里) 5.将php.ini配置文件的 ...