原生H5+JS文件上传

最新推荐文章于 2024-04-12 16:06:26 发布

AIm锁锁

最新推荐文章于 2024-04-12 16:06:26 发布

阅读量1.4k

点赞数 2

分类专栏： web前端 Html JS 文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/qq_41751237/article/details/121182887

版权

web前端同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

Html

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

最近，一个项目上使用到一些数据，这些数据必须要从本地导入，因此提供了相关的服务端上传接口，然鹅我是一个纯纯的后端，前端的各种框架都不太会使，并且我认为这样的小项目使用一个前端框架反而不好，比如LayUi，虽然很简单就可以引入，但是有时候我需要做些特殊操作，修改人家源码的底层方法还是不太方便，因一顿google后实现了纯H5+JS实现的方法，连ajax都使用的原生；记录一下：

一、单文件上传

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>上传文件Demo</title>
    </head>
    <body>
        qmfy文件管理
        <div style="padding: 4px; background-color: #FFECEC;">
            <form id="upload" method="POST" enctype="multipart/form-data">
                <input type="file" name="file"/>
                <input type="button" value="提交" onClick="uploadFile();"/>
            </form>
        </div>

        <script type="text/javascript" >

		  function uploadFile() {
            var form = document.getElementById('upload'),
            formData = new FormData(form);

            //这里使用ajax的原生方法实现
            var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function(){
                    if(xhr.readyState === 4){

                        if(xhr.status === 200){
                            var result = JSON.parse(xhr.responseText);
                            window.alert(result.message);
                        }else{
                            var result = JSON.parse(xhr.responseText);
                            window.alert("ERROR："+"\n"+result.message);
                        }
                    }
                }
                xhr.withCredentials = true;
                xhr.open('POST','http:hahaha.zz.com/upload');
                //这里可以设置请求头，注意setRequestHeader方法必须放在open之后
                //xhr.setRequestHeader('hahaha', '123123123sadfsdf');
                xhr.send(formData);
		    }
		</script>
    </body>  
</html>

二、多文件上传（循环上传）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>上传文件</title>
</head>
<body>
    qmfy文件管理
    <div style="padding: 4px; background-color: #FFECEC;">
    <form id="upload" method="POST" enctype="multipart/form-data">
        <input type="file" id="multifile" multiple size="50"/>
        <input type="button" value="提交" onClick="uploadFiles();"/>
    </form>
    </div>

    <script type="text/javascript" >
        //当前线程延时
        function sleep(numberMillis) {
            var now = new Date();
            var exitTime = now.getTime() + numberMillis;
            while (true) {
                now = new Date();
                if (now.getTime() > exitTime)
                    return;
            }
        }

        //单个文件上传（入参file，每次上传一个文件）
		function uploadFile(file) {
            var formData = new FormData();
            formData.append("file",file);
            var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function(){
                    if(xhr.readyState === 4){

                        if(xhr.status === 200){
                            var result = JSON.parse(xhr.responseText);
                            window.alert(result.message);
                        }else{
                            var result = JSON.parse(xhr.responseText);
                            window.alert("ERROR："+"\n"+result.message);
                        }
                    }
                }
                xhr.withCredentials = true;
                xhr.open('POST','http://hahahha.zz.com/upload');
                //这里可以设置请求头，注意setRequestHeader方法必须放在open之后
                //xhr.setRequestHeader('hahaha', '123123123sadfsdf');
                xhr.send(formData);
		    }

        //批量上传（循环调用单文件上传）
		function uploadFiles(){
            console.log(" FileList Demo:");
            var file;       //取得FileList取得的file集合
            for(var i = 0 ;i<document.getElementById("multifile").files.length;i++){
                file=document.getElementById("multifile").files[i];     //file对象为用户选择的某一个文件
                console.log(file.name);     //此时取出这个文件进行处理，这里只是显示文件名
                //这里可以调用单个文件上传方法
                //uploadFile(file);
                //这里为了方便看到每一个文件，进行了当前线程延时
                sleep(500);
            }
        }
    </script>
</body>
</html>

最后，注意：我这里是循环调用上传，其实还是单个上传，只不过是程序内部自动实现了循环调用，想要实现一次性并发上传的童鞋，可以查一下，方法太多，正式因为循环上传文章太少，我才写这篇文档，有人会说，并发多好，为什么要循环上传呢，其实这种情况大有存在，比如说服务端接口太垃圾不能支持高的并发调用（尤其单机服务），还有比如服务端数据解析要求文件的先后顺序以及入库的数据读写一致性等等，而我们循环调用往往能适合更多场景，虽然他并不如并发调用快速，其实底层对服务端接口压力是一样的（调用次数一致）；

AIm锁锁

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
原生H5+JS文件上传

最近，一个项目上使用到一些数据，这些数据必须要从本地导入，因此提供了相关的服务端上传接口，然鹅我是一个纯纯的后端，前端的各种框架都不太会使，并且我认为这样的小项目使用一个前端框架反而不好，比如LayUi，虽然很简单就可以引入，但是有时候我需要做些特殊操作，修改人家源码的底层方法还是不太方便，因一顿google后实现了纯H5+JS实现的方法，连ajax都使用的原生；记录一下：一、单文件上传<!DOCTYPE html><html> <head>
复制链接

扫一扫