IT/프로그래밍

File up & download HTML

Collin 2020. 8. 7. 20:00
반응형

 

클라이언트 파일 업로드와 다운로드  ( HTML + javascript  )

<!DOCTYPE html>
<html>
<head>
<title>filemgmt</title>
</head>
<body>


    <script type="text/javascript">
        var serverHost = 'http://localhost:8080';
        function fileUpload(){
            let req = new XMLHttpRequest();
            req.onreadystatechange = function(){
                // callback
                if(req.readyState === req.DONE){
                    if(req.status === 200){
                        // {"code":"200","data":{"filePath":"2020/08","fileName":"abc.txt"}}
                        console.log(req.responseText);
                    }else{
                        console.log(req.responseText);
                    }
                }
            }

            let formData = new FormData();
            let uploadfile = document.getElementById("uploadfile").files[0]; 
            formData.append("uploadfile", uploadfile);
            let url = serverHost + '/file/upload';
            req.open("POST", url);
            req.send(formData);
        };

        function fileDownload(){
            let filePath = '2020/08';
            let fileName = 'abc.txt';
            const url= serverHost + '/file/download' + '?' + 'filePath='+filePath + '&' + 'fileName='+fileName;
            window.open(url);
        };
    </script>

    <input type="file" id="uploadfile"/>
    <button onclick='fileUpload()' class="btn btn-default">fileUpload</button>
    <button onclick='fileDownload()' class="btn btn-default">fileDownload</button>


</body>
</html>

 

 

반응형