美文网首页
利用FormData上传文件夹(前台)

利用FormData上传文件夹(前台)

作者: shaYanL | 来源:发表于2017-05-21 20:56 被阅读0次

在完成上传三维模型的功能的时候,考虑到一般的三维模型都是多个文件组成的文件夹,所以就试了试红宝书中提到的FormData方法。用了之后真心一点都不想写表单,当然也不用写表单 哈哈哈。

  1. FormData是什么?,我是链接

1.1 当然,如果你不想跳转一个新的页面:
这是XMLHttpRequest Level 2添加的新接口,利用FormData,我们就可以用js制造表单,完全可以不用写<form>;

1.2 不写<form>,那我们要上传的东西怎么写?写在哪里?
可以直接通过键值对的方式,用FormData的append方法写入FormData对象中。

栗子: FormData对象.append( "key", value );

1.3 那我该怎么生成FormData对象?或者我应该用什么参数初始化它?

//生成一个FormData对象,可以不用任何参数。
var formData = new FormData();

1.4 我已经有了一个表单了,还可以用FormData么?
当然可以。

//用表单元素初始化FormData
var formData = new FormData(一个表单元素);

1.5 用了表单元素还能通过append添加其他的数据到FormData对象么?
当然可以。而且这正是FormData的优点哦。

  1. FormData的运用(突然发现 1已经把该讲的讲完了,强行写个2)

//这是一个响应上传文件夹的函数
function handleUpload() {
//初始化一个FormData对象
var formData = new FormData();
//获取到<input>传过来的文件
var files = upload.querySelector('#file').files;
var modelName = upload.querySelector('.model-name').value.trim();

        if ( files.length === 0 ) {
            alert("请先选择文件夹");
            return;
        } else if ( !modelName ) {
            alert("请输入合法文件名");
            return;
        }
        
        for (var i = files.length - 1; i >= 0; i--) {
            formData.append( "file" + i,  files[i] );
            //循环添加文件到FormData对象中
        }

        formData.append('creat_edir', modelName );//添加任意键值对
        formData.append('files_len', files.length );
        var xhr = new XMLHttpRequest();
        xhr.open( "post", "upload.php", true );
        xhr.onreadystatechange = function() {

            if ( xhr.readyState === 4 ) {
                if ( Number(xhr.responseText) === 200 ) {
                    alert( "上传成功" );
                } else {
                    console.log( xhr.responseText )
                }
            }
        }

        xhr.send( formData );
    }
3. 后台怎么处理的?[看这里](http://www.jianshu.com/p/98a852d0392a)

相关文章

网友评论

      本文标题:利用FormData上传文件夹(前台)

      本文链接:https://www.haomeiwen.com/subject/ivsvxxtx.html