JavaScript 完成上传文件

126 阅读1分钟

HTML

       <div class="btnInputDIv">
            <span class="btnSpan">上传文件 </span>
            <input class="btnInput" type="file">
        </div>
     </div>

CSS

            color: #fff;
            background-color: #409eff;
            border-color: #409eff;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }

        .btnInput {
            display: none;
            padding: 9 px 15 px;
            font-size: 12px;
            border-radius: 3 px;
        }

javascript

        document.querySelector(".btnSpan").addEventListener('click', () => {
            document.querySelector("input[type='file']").value = "";
            document.querySelector("input[type='file']").click()

        })
        document.querySelector("input[type='file']").addEventListener('change', (e) => {
            console.log(e.target.files)
            startUpload(e.target.files);
        })
        function startUpload(file) {
            let url = 'http://10.16.241.49:9002'
            var uploadUrl =     `${url}/mcgjbw/AuthorizedPaymentImport/importDataFromText`;

            // 手工构造一个 form 对象
            var formData = new FormData();
            formData.append('files', file); // 'files' 为HTTP Post里的字段名, files 对浏览器里的File对象

            // 手工构造一个请求对象,用这个对象来发送表单数据
            // 设置 progress, load, error, abort 4个事件处理器
            var request = new XMLHttpRequest();
           
            request.upload.addEventListener("progress", window.evt_upload_progress, false);
            request.addEventListener("load", window.evt_upload_complete, false);
            request.addEventListener("error", window.evt_upload_failed, false);
            request.addEventListener("abort", window.evt_upload_cancel, false);
            request.open("POST", uploadUrl); // 设置服务URL
            request.setRequestHeader("Content-type","multipart/form-data; charset=utf-8");
            request.send(formData);  // 发送表单数据


            window.evt_upload_progress = function (evt) {
                if (evt.lengthComputable) {
                    var progress = Math.round(evt.loaded * 100 / evt.total);
                    Af.log("上传进度: " + progress);
                }
            };
            window.evt_upload_complete = function (evt) {
                if (evt.loaded == 0) {
                    Af.log("上传失败!");
                }
                else {
                    Af.log("上传完成!");
                    var response = JSON.parse(evt.target.responseText);
                    Af.log(response);
                }
            };
            window.evt_upload_failed = function (evt) {
                Af.log("上传出错");
            };
            window.evt_upload_cancel = function (evt) {
                Af.log("上传中止!");
            };
        };
    </script>