美文网首页
利用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