ajax 上传文件实例,Ajax 之文件上传
FormData
简单的上传例子
/*
先在 html 里面准便好 标签
*/
var fileInput = document.querySelector('.file-input');
var formData = new FormData();
//添加 formData 上传文件
fileInput.onchange = function(e){
formData.append("fileIn", this.value);
}
//上传文件
var request = new XMLHttpRequest();
request.open("POST", "/ajax.php");
request.send(formData);
解读步骤
fileInput 的 dom 对象获取, FormData 对象生成;
使用 fileInput 的 onchange 事件来获取,文件的内容;
使用 formData 的 append 方法来添加一个新值到 formData 里面来;
使用 XMLHttpRequest 的 send 的方法来上传文件;
原理说明
FormData 对象其实不止是可以用来上传文件,如同其名,可以模拟一系列表单控件的键值对,然后用于 XMLHttpRequest 的提交,其最大的优点就是可以异步上传一个二进制文件;
FormData 是无法读取文件的,其核心就是通过 append(),将文件变成新增字段,来上传文件;
FileReader
简单的读取文件例子
/*
先在 html 里面准便好 标签
*/
var fileInput = document.querySelector('.file-input');
// 创建 FileReader 对象
var fileReader = new FileReader();
fileInput.onchange = function(e){
// 获取原声 File 对象
var file = event.target.files[0];
// 以二进制读取文件对象
fileReader.readAsArrayBuffer(file);
//fileReader.readAsDataURL(file); // 以data:URL 格式的字符串以表示读取文件的内容
//fileReader.readAsText(file); //以字符串形式表示读取到的文件内容
}
// 读取操作完成后
fileReader.onload = function (e) {
console.log(e)
}
解读步骤
创建 FileReader 对象;
通过 fileInput 的 dom 对象 onchange 的方法, 获取原始 File 对象;
通过 FileReader 中其中一种读取方式,读取原始 File 对象;
通过 FileReader 的 onload 方法获取来继续读取完成后的操作;
原理说明
一般来说,读取文件应用场景应该是需要作断点续存的时候,或者想要预览上传的图片;
预览图片例子
var fileInput = document.querySelector('.file-input');
var imgSrc = document.querySelector('.img')
// 创建 FileReader 对象
var fileReader = new FileReader();
fileInput.onchange = function(e){
// 获取原声 File 对象
var file = event.target.files[0];
fileReader.readAsDataURL(file); // 以data:URL 格式的字符串以表示读取文件的内容
}
// 读取操作完成后
fileReader.onload = function (e) {
console.log(e)
imgSrc.src = e.target.result
}
由于本人使用 FileReader 得并不多,所以这里不作详细讨论了,有兴趣的同学可以,直接去看MDN文档
总结
虽然上传文件很早就尝试过了,但是当时理解并不是很深入,而且加上最近几次在这方面知识的打击,有点不太能认了;
感谢 白白 的几次指导,(指导了好几次,本人还是忘了)
感谢 MDN 提供的文档给予我一定的灵感
感谢阅读,欢迎指出文章的不足之处,以及讨论更多的代码优化
ajax 上传文件实例,Ajax 之文件上传相关推荐
- ajax 上传文件实例,Ajax异步上传文件实例代码分享
非常不多说,直接给大家上干货,写的不好还请见谅. 具体代码如下所示: Index $(function() { $(':button').click(function () { var formDat ...
- 程序实现php文件上传,PHP实例:实现文件上传的程序源码_php
以下为引用的内容: 文件上传界面 http://www.gaodaima.com/48380.htmlphp实例:实现文件上传的程序源码_php if($UploadAction){ $UploadA ...
- ajax php 投票,PHP 实例 AJAX 投票
PHP 实例 - AJAX 投票 AJAX 投票 在下面的实例中,我们将演示一个投票程序,通过它,投票结果在网页不进行刷新的情况下被显示. 你喜欢 PHP 和 AJAX 吗? 是: 否: 实例解释 - ...
- ajax资料收集-Ajax文章(教程和实例)---Ajax资源下载(源码和教程)---Ajax规范标准
CSDN Blog Ajax文章搜索: http://search.csdn.net/search/ajax/1/blog/ 专题:Ajax技术应用开发 http://www.51cto.com/ht ...
- python读写文件实例_python读写文件的简单示例
这篇文章主要为大家详细介绍了python读写文件的简单示例,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编罗X来看看吧. 首先看一个例子: # 来自www.512 ...
- html ajax提交表单实例,Ajax提交表单并接收json实例代码
需求: 实现点击按钮后,数据以表单形式提交至服务器,并接收来自服务器的返回数据.过程中页面不刷新. html代码 xingming: nianling: ajax提交 js代码 function my ...
- php验证码大全(实例分享),php文件上传代码大全(实例分...-php验证码大全(实例分享)-php打印倒三角的实例代码_169IT.COM...
本节主要内容: php中的文件上传代码 在我们平时的php编程中,涉及文件上传的内容很多,无论是简单的留言本程序,还是复杂的新闻系统,甚至是功能完备的cms系统中,都少不了文件上传的功能与代码. 本文 ...
- asp.net ftp上传文件到服务器,.net 文件上传到服务器上
详解 Linux 下 SSH 远程文件传输命令 scp 3.将本地文件上传到服务器上 scp-P 2222/home/lnmp0.4.tar.gz root@www.vpser.net:/root/l ...
- php 异步进度条,PHP学习:PHP+Ajax异步带进度条上传文件实例
<PHP学习:PHP+Ajax异步带进度条上传文件实例>要点: 本文介绍了PHP学习:PHP+Ajax异步带进度条上传文件实例,希望对您有用.如果有疑问,可以联系我们. PHP应用前端引入 ...
- ajax 上传文件实例,jquery ajax实现文件上传功能实例代码
下面看下ajax实现文件上传 没有使用插件 一.单文件上传 文件: 上传文件 $(function () { $("#upload").click(function () { va ...
最新文章
- (chap1 网络基础知识)网络的构成要素
- VTK:绘图线3D用法实战
- Highcharts 配置语法;Highcharts 配置选项详细说明
- [转]Myeclipse9引入easy_ui时,其中的部分js文件报错
- Golang时间格式化
- Mysql用户访问工作原理
- flink job 提交模式
- linux双显卡自动切换,Deepin(Linux)双显卡之bumblebee(大黄蜂)、Prime及手动切换方案...
- flv网页播放器开源代码
- keras入门(三)搭建CNN模型破解网站验证码 1
- 论文的参考文献的英文间隔太大的解决方法
- 【正向偏置和反向偏置的区别】
- VS C++学习笔记
- php 没有后缀名下载,javascript - 没有后缀名的链接?
- 优雅的99乘法表以及format使用
- 游戏角色跟场景建模那个好一点?
- ROC及AUC计算方法及原理
- VMware虚拟机安装macos Big Sur 11.2.2 (20D80)镜像CDR/ISO下载
- WPF中的嵌入的资源与Resource
- 暴风魔镜SDK:MojingSDK For Unity V1.3.5112 (R).zip