本地js文件上传服务器,原生JS实现前端本地文件上传

原生JS实现前端本地文件上传

2019-01-08

编程之家

https://www.jb51.cc

编程之家收集整理的这篇文章主要介绍了原生JS实现前端本地文件上传，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

本文实例为大家分享了JS实现前端本地文件上传的具体代码，供大家参考，具体内容如下

通过input type = file来选择本地文件

文件名:',this.value)

var formData = new FormData(this.form);

console.log(formData)

}

//打印出的结果是文件名: C:\fakepath\css.jpg然后在是一个空对象

使用formData无法得到文件的内容，那么就使用FileReader来读取整个文件的内容

从打印结果来看，能清楚的知道上传的文件信息是在

input type = ‘file'dom对象中的files[0]中。

filereader.readAsDataURL是将flies[0]里的信息转换成base64方式读取。

filereader的读取为以下格式：

readAsDataURL(this.files[0]) base64位读取

readAsBinaryString(this.files[0]) 以二进制方式读取读取结果是UTF-8形式(被废弃)

readAsArrayBuffer(this.flies[0]) 以二进制原始方法读取，读取结果可转换成整数的数组

文件选择框选择的文件对象数组

if(files.length == 0) return;

var form = new FormData(),url = 'http://.......',//服务器上传地址

file = files[0];

form.append('file',file);

var xhr = new XMLHttpRequest();

xhr.open("post",url,true);

//上传进度事件

xhr.upload.addEventListener("progress",function(result) {

if (result.lengthComputable) {

//上传进度

var percent = (result.loaded / result.total * 100).toFixed(2);

}

},false);

xhr.addEventListener("readystatechange",function() {

var result = xhr;

if (result.status != 200) { //error

console.log('上传失败',result.status,result.statusText,result.response);

}

else if (result.readyState == 4) { //finished

console.log('上传成功',result);

}

});

xhr.send(form); //开始上传

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

总结

以上是编程之家为你收集整理的原生JS实现前端本地文件上传全部内容，希望文章能够帮你解决原生JS实现前端本地文件上传所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

本地js文件上传服务器,原生JS实现前端本地文件上传相关推荐

js 封装ajax方法吗,原生JS封装ajax方法
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...
js文件本地上传服务器地址,js 本地文件同步服务器地址
js 本地文件同步服务器地址内容精选换一换用户可以将本地NAS存储中的数据,通过云专线迁移至云上SFS Turbo文件系统中,进行云上业务拓展.此方案通过在云上创建一台Linux操作系统的云服务 ...
js并发上传文件到不同服务器,simple-uploader.js 功能强大的上传组件 - 文章教程
simple-uploader.js(也称 Uploader)是一个上传库,支持多并发上传,文件夹.拖拽.可暂停继续.秒传.分块上传.出错自动重传.手工重传.进度.剩余时间.上传速度等特性:该上传库依 ...
本地文件上传服务器node插件,node 搭建本地文件上传服务器
一直想尝试使用node搭建个文件服务器,今天简单写了一下,后面会慢慢完善,一起学习哈首先,我们在做文件上传的时候,很多时候会使用到文件服务器. 从前端来说的话, 我们把数据上传到文件服务器上,然后文 ...
shell脚本上传文件到ftp服务器,shell脚本实现FTP自动上传文件
-----多个文件----- #!/bin/bash ftp -n< open 172.20.10.242 user logftp logftp binary cd /data/ftp/pcid ...
简单php web ftp服务器,php 上传文件到ftp服务器的简单示例（单文件）
搜索热词 PHP上传单个文件到ftp服务器的演示范例,感兴趣的小伙伴,下面一起跟随编程之家 jb51.cc的小编来看看吧. 经测试代码如下: /** * 上传文件到ftp服务器 * * @param ...
js异步请求php数据,原生JS发送异步数据请求实例详解
这篇文章主要为大家详细介绍了原生JS发送异步数据请求的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下在做项目的时候,有时候需要用到异步数据请求,但是如果这个时候没有框架的依赖,就需要用到 ...
vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
html原生js实现图片轮播,原生JS实现图片轮播切换效果
原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分 ...
原生js获取html元素高度,原生JS获取元素宽高实践详解
开篇的话任何不是亲身实践中求得的知识,都不是属于你的. 任何求得的知识不去时常温习运用,也不是属于你的. 记录由来在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才 ...

本地js文件上传服务器,原生JS实现前端本地文件上传

本地js文件上传服务器,原生JS实现前端本地文件上传相关推荐

最新文章

热门文章