如何使用jQuery上传SVG并将其嵌入HTML而非仅以图片形式显示？

嘿，我明白你的需求啦——你现在能把SVG上传后显示成图片，但想要直接把SVG的源码嵌入到页面里，这样还能直接操作SVG的内部元素对吧？咱们可以通过调整FileReader的读取方式来实现，具体步骤如下：

核心思路调整 #

原来你用的是readAsDataURL()把文件转成Base64格式的图片地址，现在我们需要换成readAsText()来读取SVG的纯文本源码，然后直接把这段源码插入到HTML中，浏览器会自动解析成可交互的SVG元素。

修改后的代码实现 #

HTML部分 #

我们可以把原来的<img>标签换成一个容器（比如<div>），用来承载嵌入的SVG，同时添加文件类型限制提升用户体验：

<input type='file' accept="image/svg+xml" />
<div id="svgContainer"></div>

这里的accept="image/svg+xml"属性可以限制用户只能上传SVG文件，避免误传其他格式。

jQuery部分 #

修改文件读取逻辑，换成读取文本并直接插入SVG源码：

$(function () {
  $(":file").change(function () {
    if (this.files && this.files[0]) {
      // 先验证文件类型是否为SVG
      if (this.files[0].type !== "image/svg+xml") {
        alert("请上传SVG格式的文件哦！");
        return;
      }
      
      var reader = new FileReader();
      reader.onload = svgIsLoaded;
      // 以UTF-8编码读取文件为文本格式
      reader.readAsText(this.files[0], "UTF-8");
    }
  });
});

function svgIsLoaded(e) {
  // 将读取到的SVG源码直接插入到容器中
  $('#svgContainer').html(e.target.result);
}

额外说明 #

• 这样嵌入后，你可以直接通过jQuery或原生JS操作SVG内部的元素（比如修改图形颜色、添加动画效果等），这是img图片形式无法做到的。
• 如果你的SVG里引用了外部资源（比如外部字体、图片），可能会遇到跨域问题，这时候需要确保这些资源是可访问的，或者将资源内联到SVG文件里。
• readAsText()的第二个参数指定编码为UTF-8，能确保SVG里的特殊字符和中文内容正确解析。

内容的提问来源于stack exchange，提问作者Ali Kazmi