formdata和xmlhttprequest

最新推荐文章于 2024-03-20 19:19:49 发布

Jesson110221

最新推荐文章于 2024-03-20 19:19:49 发布

阅读量3.1k

点赞数

本文链接：https://blog.csdn.net/u010216786/article/details/53168079

版权

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="../webstorm/jquery-3.1.1.min.js"></script>
</head>

<body>
<form name="form1" id="form1" enctype="multipart/form-data">
    <input type="text" name="name" value="fdipzone">
    <input type="file" name="myfile[]" id="myfile" multiple="">
    <input type="button" value="开始上传" οnclick="upload()">
    <input type="button" value="取消上传" id="cancel" >
</form>

<span id="uptext"> </span>
<progress value="0" max="100" id="uploadpro"></progress>
</body>
<script type="text/javascript">
    function upload(){
        // 1. 准备formdata ，准备文件
        var fd1 = new FormData($("#form1")[0]);  // form 写法,
        var fd = new FormData();
        // 遍历文件列表，插入到表单数据中
        for (var i = 0, file; file = $("#myfile")[0].files[i]; i++) {
            fd.append(file.name, file);
        }
        // 创建xhr对象
        var xhr = new XMLHttpRequest();
        //监听状态  实时响应   upload.onprogress：上传进度 load.onprogress:下载进度
        xhr.upload.onprogress = function (event) {
            if (event.lengthComputable){  // 当文件大小总大小无法获取时，怎么计算进度呢
                var percent = Math.round(event.loaded * 100 / event.total);
                $("#uploadpro").val(percent);
                $("#uptext").text(percent);
            }
        };
        // 传输开始事件  send后就执行
        xhr.onloadstart = function (event) {
            console.log('load start');
        }
        $("#cancel").one('click',function(){
            xhr.abort();
        })
        // ajax过程传输成功完成事件
        xhr.onload = function (event) {
            console.log('load success');
            var ret = xhr.responseText; // 服务器返回
            console.log(ret);

        };
        // ajax 过程发生错误事件
        xhr.onerror = function (event) {
            console.log('传输错误');
        }
        xhr.onabort = function (event) {
            console.log('操作被取消');
        }
        // 不管上传失败或成功，都会触发
        xhr.onloadend = function (event) {
            console.log('load end');
        }
        xhr.open('post', 'save_file.php',true);  // true表示异步
        xhr.send(fd);
    }

</script>
</html>