文档章节

使用formdata()的原生js文件上传

SupKylin
 SupKylin
发布于 2017/07/07 10:07
字数 777
阅读 242
收藏 0

在本次的项目中,需要使用到本地文件上传这个功能,但是现在市面上的各上传文件的插件,不是太过于臃肿,就是不符合实际的项目需求场景,所以自己封装了一个原生的js上传附件。

我们知道,原生的js上传附件,我们大部分采用input框的file进行上传,但是在提交表单的时候,页面会舒心,那么此时我们只能采用ajax的方式与后台进行交互,但是ajax如何能够上传文件呢,大部分的做法是将文件进行二级制或者其他的转换,但是此时更简单的做法则是使用Formdata()来进行表单提交数据的序列化做法。

我们的页面布局:

<form enctype="multipart/form-data;charset=utf-8" method="post" id="fileinfo">
    <span class="col-xs-2 popBold">上传:</span>
    <input class="col-xs-6 col-sm-6" type="file" id="file" name="file" multiple="multiple">
    <input id="uploadBtn" class="col-xs-1 col-sm-1" type="button" value="上传" />
</form>

此时我们使用input的自带file属性将他设置成一个文件上传的选择框,下面是js代码:

// 修改页面
// 上传文件
// 1、参数为发送隐藏参数的表单的input框的选择器  string
// 3、参数为上传文件的input框的id string
// 4、参数为上传form表单的id string
function uploadUpdata(randSlect, rand, uploadSlect, formSlect, target_table, target_col, file_type, showSlect, deletetarget_uidSlect, delVar, showFilesUpdata) {
    $(randSlect).val(rand);
    // 获取上传的文件
    var files = document.getElementById(uploadSlect);
    // 禁止exe文件
    var choseExe = ".exe";
    if (files.files.length == 0) {
        alert("请选择文件");
        return false
    } else {
        // 循环便利文件列表判断文件类型
        for (var i = 0; i < files.files.length; i++) {
            if (files.files[i].name.indexOf(choseExe) !== -1) {
                alert(files.files[i].name + "为不支持的文件类型");
                return false
            }
        }
        var form = document.getElementById(formSlect);
        var oData = new FormData(form);
        var oReq = new XMLHttpRequest();
        oReq.open("POST", ctx + "/FileUploadServlet?target_table=" + target_table + "&target_col=" + target_col + "&file_type=" + file_type + "&target_uid=" + rand, true)
        oReq.send(oData);
        oReq.onreadystatechange = function () {
            if (oReq.status == 200 && oReq.readyState == 4) {
                alert("上传成功");
                files.value = "";
                //此处是我接下来的处理函数,开发过程中可以将其定义成一个callback
                iploadListUpdata(showFilesUpdata, rand, file_type, deletetarget_uidSlect, delVar);
            } else if (oReq.status !== 200 && oReq.readyState !== 4) {
                alert("上传失败,请检查网路设置")
            } else {
                // alert("yizhizaizhixing")
            }
        };
    }
}

如上代码,我们使用formdata()进行参数传递到后台,后台可以直接通过这个form表单的提交而获取道我们上传的文件,而我们可以通过“files.files”获取到我们上传的文件,注意,此时获取到的是一个文件的数组,里面包含了这个文件的各种属性。

当然,在实际的项目需求中,我们可能还要同时传递各种不同的参数到后台,此时我们可以使用formdata()的append的方法,将我们需要的参数也封装到formdata对象中一起传递到后台,代码如下:
 

formdata.append('key','value');  

其实此时添加进去的就是一个key:value的键值对,但是此时在后台想要获取这个参数,在springMVC中好像还要经过一些处理,具体的我也不是很清除,各位JAVA大佬可以自行研究。

© 著作权归作者所有

SupKylin
粉丝 0
博文 8
码字总数 5094
作品 0
虹口
程序员
私信 提问
HTML5 FormData+Ajax上传文件表单

文件表单的数据类事multipart/form-data,因此,formData需要特殊处理. 文件上传 参考文章: HTML5 + AJAX ( 原生JavaScript ) 异步多文件上传 [HTML5] Blob对象 通过Ajax方式上传文件,使用...

IamOkay
2017/10/31
0
0
FormData以及原生Ajax上传图片

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/baidu_35085676/article/details/80752254 Ajax对于表单提交来说,是一个很好的工具,他提供了异步提交的效果...

岚漾忆雨
2018/06/20
0
0
FormData在IE下上传文件报unexpected end of stream的一种解法

利用FormData可以直接提交一个Form表单,甚至异步上传文件,非常便利,IE10+好不容易支持这个特性了,但还是麻烦不断:expressionless: 一、IE10下必须通过Append方法添加字段,即: 二、IE下...

一点灵犀
2015/11/17
0
1
使用js FormData传文件流,传json(重点)

先介绍js的FormData,FormData是XMLHttpRequest Level 2新增的一个接口,利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用ajax方法来异步的提交这个...

李佳明同学
2018/07/01
0
0
用于进行 AJAX 调用的顶级 JavaScript 库

AJAX 是由客户端框架和库用来对服务器进行异步 HTTP 调用的一组 Web 开发技术。 AJAX 是代表异步 JavaScript 和 XML 的一种技术。 AJAX 曾经是 Web 开发界的一个常见名称,许多流行的 JavaSc...

oschina
2018/01/29
3.6K
4

没有更多内容

加载失败,请刷新页面

加载更多

0.01-Win10安装linux子系统

一、安装Debian子系统 -1、控制面板设置: -1.1、打开“控制面板” —— “程序” —— “启用或关闭Windows功能” —— 勾选 “适用于Linux的Windows子系统” -2、设置: -2.1、打开“设置”...

静以修身2025
昨天
1
0
init 0-6 (启动级别:init 0,1,2,3,4,5,6)

启动级别: init 0,1,2,3,4,5,6 这是个很久的知识点了,只是自己一直都迷迷糊糊的,今天在翻出来好好理解下。。 0: 停机 1:单用户形式,只root进行维护 2:多用户,不能使用net file system...

圣洁之子
昨天
2
0
Android Camera HAL浅析

1、Camera成像原理介绍 Camera工作流程图 Camera的成像原理可以简单概括如下: 景物(SCENE)通过镜头(LENS)生成的光学图像投射到图像传感器(Sensor)表面上,然后转为电信号,经过A/D(模数转...

天王盖地虎626
昨天
2
0
聊聊Elasticsearch的ProcessProbe

序 本文主要研究一下Elasticsearch的ProcessProbe ProcessProbe elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/monitor/process/ProcessProbe.java public class ProcessProb......

go4it
昨天
2
0
mysql PL(procedure language)流程控制语句

在MySQL中,常见的过程式SQL语句可以用在存储体中。其中包括IF语句、CASE语句、LOOP语句、WHILE语句、ITERATE语句和LEAVE语句,它们可以进行流程控制。 IF语句相当于Java中的if()...else if(...

edison_kwok
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部