如何用网络 URL 替换 HTML 文件输入？

Question

我正在尝试使用 Zendesk API 将文件作为支持票的附件上传。我可以成功上传本地文件，但有时，我需要从其他工单中复制附件。

现在，我正在使用基本的 HTML 输入 type="file" 来允许用户从他们的本地机器 select 一个文件。有没有一种简单的方法可以让我以完全相同的格式从提供的网络 URL 获取文件？

我用文本输入替换实际输入没有问题，我只是不知道如何在 URL 处实际处理文件以获取我需要的格式。

谢谢！

我曾尝试在 XMLHttpRequest 函数上使用 fetch() 和 FileReader，但我不知道我究竟需要做什么来处理从这些函数返回给我的内容。

<body>
  <label for="data">Select file:</label>
  <input type="file" name="data[]" id="data" multiple>
  <button type="button" onclick="uploadfile()">Upload file now...</button>
  </br></br>
  <label>Token value:</label>
  <input type="text" id='token_value_from_upload' style="width: 220px;">

<script>
 function uploadfile() {
      //retrieve the uploaded file
      var file = data.files[0];

      console.log(file.type);

      $.ajax({
        url: "https://instance.zendesk.com/api/v2/uploads.json?filename=" + file.name,
        type: 'POST',
        data: file,
        dataType: 'json',
        processData: false,
        contentType: 'application/binary',
        headers: {
          "Authorization": TOKEN
        },
        success: function(response) {
          console.log(response);
          document.getElementById('token_value_from_upload').value = response.upload.token;
        }
      });
    }
</script>
</body>

uploadfile 函数应该为文件取一个 web URL，将文件上传到 Zendesk，并将返回的令牌放在 "token_value_from_upload" 框中。

Answer 1

您可以做的一件事是使用 JavaScript 从提供的网站 URL 下载文件，然后上传。 Zendesk's Attachments API here. When you call "https://instance.zendesk.com/api/v2/uploads.json的文档我查了下上传一个文件，你可以把你想要的文件内容放在数据区。

对于您的情况，您可以使用 $.get(url) 从提供的网站 URL 获取内容，然后将内容包含在 post 请求中。（我没有 Zendesk 帐户，所以我没有测试我的代码。）

function download(url) {
    $.get(url).success(function (data) {
        upload("test.txt", data);
    });
}

function upload(name, data) {
    $.ajax({
    url: "https://instance.zendesk.com/api/v2/uploads.json?filename=" + name,
    type: 'POST',
    data: data, // put the file content here
    dataType: 'json',
    processData: false,
    contentType: 'plain/text',
    headers: {
      "Authorization": TOKEN
    },
    success: function(response) {
      console.log(response);
      document.getElementById('token_value_from_upload').value = response.upload.token;
    }
});
}

但是请注意，由于 CORS 政策，可能很难通过 JavaScript 下载文件。

解决此问题的另一种方法，我注意到您提到要从其他工单复制附件。您可以尝试只将之前上传的文件的令牌包含到新案例中，而不是下载并重新上传文件。您可以查看 this post 了解详细信息。您需要做的就是找到文件的令牌并将其包含在新案例中。

如何用网络 URL 替换 HTML 文件输入？

How do I replace a HTML file input with a web URL?

html

javascript

zendesk-api