jquery ajax上传本地dwg文件到服务器.txt

admin管理员组

文章数量:1574121

<!--只接受.dwg文件-->
<input type="file" id="CADFile" accept=".dwg">
<button οnclick="upload()">上传</button>

function upload() {
    /*此函数用于，CAD文件的上传。*/
    // 获取文件对象。
    let file = document.getElementById("CADFile").files[0];
    if (file) {
        // console.log("file:", file);
        // name: "SⅥ-L03 平面图0402.dwg"
        // size: 4793696
        // 提示。
        $("#tooltips").html("上传中...");
        // 文件名，包含扩展名。
        let fileName = file.name;
        // 文件大小，单位：B（byte 字节）。
        fileSize = file.size;
        // 文件名（不包含扩展名及其路径）, 比如：Drawing5。
        let filenameWithoutPath = fileName.slice(0, fileName.lastIndexOf('.'));
        // 文件扩展名（比如：dwg）。
        let extension = fileName.slice(fileName.lastIndexOf('.') + 1);

        // 构造FileReader。
        let fileReader = new FileReader();
        // readAsDataURL 方法会读取指定的 Blob 或 File 对象。
        // 读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend 事件，
        // 同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容，
        // 类似这样：data:application/octet-stream;base64,QUM...。
        fileReader.readAsDataURL(file);
        // 处理load事件。该事件在读取操作完成时触发。
        fileReader.onload = function () {
            // console.log("fileReader:", fileReader);
            // 获取文件内容，字符串（base64编码）形式。
            let fileContent = fileReader.result;
            // 服务器约定：
            // base64string是纯string，不带readAsDataUrl里的“data:application/octet-stream;base64,”。
            // 去掉文件内容的开头（data:application/octet-stream;base64, data:;base64,）。
            let fileContent2 = fileContent.slice(fileContent.indexOf(",") + 1);
            // 根据服务提供的接口，构造要上传的数据（经测试，必须时json对象的形式）。
            let data = {
                base64string: fileContent2,
                filenameWithoutPath: filenameWithoutPath,
                extension: extension
            };
            // 上传文件，并获取服务器返回的内容（服务器上存储此文件的绝对路径，类似这样：
            // E:\NanZhan\CAD服务\WebServer\UploadFile\Drawing6_b408685f-b528-4cd2-ae92-2752789f7f70.dwg）。
            $.ajax({
                type: "post",  // 规定请求的类型（GET 或 POST）。
                url: "http://60.28.130.106:81/cadServer/DwgService.asmx/UploadFileBase64string", // 发送请求的地址。
                data: data, // 规定要发送到服务器的数据。
                dataType: 'json',  // 预期服务器返回的数据类型。
                beforeSend: function (xhr) {
                    /*发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。
                    * xhr, XMLHttpRequest 对象。*/
                    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                },
                error: function (xhr, status, error) {
                    /*如果请求失败要运行的函数。
                    * xhr, XMLHttpRequest 对象。
                    * status, 请求状态（parsererror）。
                    * error, 错误信息。比如：error: SyntaxError: Unexpected token N in JSON at position 29。*/
                    console.log("xhr:", xhr);
                    console.log("status:", status);
                    console.log("error:", error);
                },
                success: function (result, status, xhr) {
                    /*当请求成功时运行的函数。
                    * result, 服务器返回的内容。
                    * status, 请求状态（success）。
                    * xhr, XMLHttpRequest 对象。*/
                    // console.log("result:", result);
                    // result: {"localFileNameOnServer":"E:\NanZhan\CAD服务\WebServer\UploadFile\Drawing6_b408685f-b528-4cd2-ae92-2752789f7f70.dwg"}

                    // 清空提示。
                    $("#tooltips").html("");
                    localFileNameOnServer = result.localFileNameOnServer;
                    // console.log(localFileNameOnServer);
                    // E:/NanZhan/CAD服务/WebServer/UploadFile/Drawing5.dwg
                    getLayersFromDwgFile(localFileNameOnServer);
                }
            });
        };
    }
}

本文标签： 上传服务器文件jqueryajax