单个文件:
<div>
<input value="上传" type="file" id="photos_upload">
<img src="" id="result" width="100px" height="100px"/>
</div>
<script>
$("#photos_upload").on("change",function () {
var file = $(this)[0].files[0]; //document.getElementById('photos_upload').files[0];
var reader = new FileReader();
reader.onload = function ( event ) {
var txt = event.target.result; //base64
document.getElementById("result").src = txt;
};
reader.readAsDataURL(file);
})
</script>
多个文件:(只需在单个文件的基础上添加递归)
<div>
<input value="上传" type="file" id="photos_upload" multiple>
<img src="" class="re1" width="100px" height="100px"/>
<img src="" class="re2" width="100px" height="100px"/>
</div>
$("#photos_upload").on("change",function (event) {
var i=0;
fileUpload(0,event);
})
function fileUpload(i,event){
var length = $(event.target)[0].files.length;
if(i>=length){
return;
}
var file = $(event.target)[0].files[i];
var reader = new FileReader();
reader.onload = function ( event ) {
var txt = event.target.result; //base64
$(".re"+i).attr("src",txt);
};
reader.readAsDataURL(file);
i++;
fileUpload(i,event);
}

												

文件上传原理--FileReader的更多相关文章

  1. Spring Boot 文件上传原理

    首先我们要知道什么是Spring Boot,这里简单说一下,Spring Boot可以看作是一个框架中的框架--->集成了各种框架,像security.jpa.data.cloud等等,它无须关 ...

  2. php文件上传原理详解(含源码)

    1.文件上传原理 将客户端的文件上传到服务器,再将服务器的临时文件上传到指定目录 2.客户端配置 提交表单 表单的发送方式为post 添加enctype="multipart/form-da ...

  3. 补习系列(11)-springboot 文件上传原理

    目录 一.文件上传原理 二.springboot 文件机制 临时文件 定制配置 三.示例代码 A. 单文件上传 B. 多文件上传 C. 文件上传异常 D. Bean 配置 四.文件下载 小结 一.文件 ...

  4. Java Web文件上传原理分析(不借助开源fileupload上传jar包)

    Java Web文件上传原理分析(不借助开源fileupload上传jar包) 博客分类: Java Web   最近在面试IBM时,面试官突然问到:如果让你自己实现一个文件上传,你的代码要如何写,不 ...

  5. HTTP文件上传原理

    前言 对于这块知识点,我一直都是模糊的,不是非常清楚的.在平时的工作中,遇到上传的问题,也没有深入的去研究过,也都是直接用别人封装好的类来完成自己的工作.某一天,看了本书,说到这个知识点,一脸茫然,觉 ...

  6. js文件上传原理(form表单 ,FormData + XHR2 + FileReader + canvas)

    目录 form表单上传 FormData + XHR2 + FileReader + canvas 无刷新本地预览压缩上传实例 目前实现上传的方式 浏览器小于等于IE9(低版本浏览器)使用下面的方式实 ...

  7. Struts2单文件上传原理及示例

    一.文件上传的原理 表单元素的enctype属性指定的是表单数据的编码方式,该属性有3个值: 1.application/x-www-form-urlencoded:这是默认编码方式,它只处理表单域里 ...

  8. 常见的文件上传方法有哪些?Ajax文件上传原理是什么?

    Ajaxfileupload,Ajaxupload,JqueryUploadify无刷新式的文件上传,在一个页面里嵌入一个Iframe,然后在Iframe使用原生的Post表单提交.

  9. Struts2多文件上传原理和示例

    一.创建上传文件的页面,代码如下所示     1.Struts2也可以很方便地实现多文件上传. 在输入表单域增加多个文件域:multifileupload.jsp    <%@ page lan ...

随机推荐

  1. 【转】在Oracle中查看各个表、表空间占用空间的大小

    查看当前用户每个表占用空间的大小:    select segment_name,sum(bytes)/1024/1024 from user_extents group by segment_nam ...

  2. Filters.h各种信号恢复滤波器头文件

    这篇文章有部分原理:http://blog.csdn.net/u013467442/article/details/41125473 代码下载地址:http://read.pudn.com/downl ...

  3. 安装ubuntu远程桌面xrdp可视化设置界面

    ubuntu 远程桌面的时候须要从系统-首选项-远程桌面 可是有的ubuntu远程桌面的应用须要自己安装.例如以下是安装命令: sudo apt-get install xrdp

  4. oc78--NSFileManager

    // main.m // NSFileManager #import <Foundation/Foundation.h> int main(int argc, const char * a ...

  5. oc77--结构体,NSNumber,NSValue,NSDate,NSCalendar

    // // main.m // OC中的常用结构体 // #import <Foundation/Foundation.h> int main(int argc, const char * ...

  6. 项目中如何使用NuGet添加类库

    在项目上右键-->Manage NuGet Packages Browse  可以去搜索想要添加到项目的类库 Installed  已经添加到项目的类库 Updates   需要更新的类库

  7. Poj2054 color a tree && [HNOI/AHOI2018]排列

    https://zybuluo.com/ysner/note/1120723 题面 原题 某省选强化题 大致意思是给你一颗树,选父亲后才能选儿子. 每个点对答案的贡献为你在第几次选这个点 × 该点权值 ...

  8. 2018.2.24Test总结

    T1(luogu3434) comment:水题,考试时我想的是开一个数组在读入时预处理出该长度什么时候会被拦住,但这样数组开不下,剩下只能模拟. 实际上应该把圆筒变成递减序列,再二分该长度即可. T ...

  9. 50.Ext_数字输入框_Ext.form.NumberField

    转自:https://blog.csdn.net/inflaRunAs/article/details/84033618 <mce:script type="text/javascri ...

  10. Complicated Expressions(表达式转换)

    http://poj.org/problem?id=1400 题意:给出一个表达式可能含有多余的括号,去掉多余的括号,输出它的最简形式. 思路:先将表达式转化成后缀式,因为后缀式不含括号,然后再转化成 ...