从此
📄文章 #️⃣专题 🌐酷站 👨‍💻技术 📺 📱

Web最佳实践、Fetch流式上传下载、SVG矢量图

综合/最新

Web编程开发

通用



Fetch API

下载:

上传:
  单文件最简示例:
    <input type="file" id="file" /><br /><br /><button onclick="execute(this)">上传</button>

    function execute(btn) {
        var files = document.querySelector("#fileTag").files;
        if (files.length === 0) { alert("您未选择任何文件!"); return; }
        console.log(files[0].size);
        var maxSize = 100; // 单位MiB。
        if (files[0].size <= maxSize * 1024 * 1024) {
            var fd = new FormData(); fd.append("file", files[0]);
            fetch("/upload", { method: "POST", body: fd
              //, headers: {"Authorization": "Bearer " + accessToken}
            }).then(r => {
                console.log(r);
                if (r.status === 413) {
                    alert("文件大小不能超过 " + maxSize + "MiB!(" + files[0].size+")");
                } else { alert("上传完成! - " + files[0].size); }
            });
         } else { alert("文件大小不能超过 " + maxSize + "MiB!"); return; }
    }

  多文件最简示例:
    <input type="file" id="fileTag" multiple="multiple" /><br /><br />
    <progress id="pbTag" value="0" max="1"></progress> <span id="pbtTag">0%</span><br /><br />
    <button onclick="execute(this)">上传</button>

矢量图

SVG:
  死记:
    text标签不会自动换行,且以其基线起点为定位点,而其他标签则是以左上角为准。

  <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 100' height='100px'><text text-anchor='start' dominant-baseline='text-before-edge' font-size='64px'>😀</text></svg>" />
  说明 - width/height决定最终渲染宽高,viewBox后两个参数则指内层宽高(参照svg宽高单位但不写上),根据preserveAspectRatio="xMidYMid meet"默认值,若比外层小则扩大填满外层,反之则缩小。

  大段文字自动换行:
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'> <foreignObject width='100%' height='100%' style='padding-left: 2px'>😀</foreignObject> </svg>

其他