javascript - 使用 chrome 扩展将文件从本地存储上传到服务器

Question

如何使用 Chrome 扩展将文件从用户本地存储上传到我的网络服务器。我使用了一个简单的文件类型输入标签，当用户单击它时，文件浏览器将打开，扩展名弹出窗口消失，并且不会上传任何内容。我在 Ubuntu 15.04 上使用 google chrome。

在我的 popup.html 中，单击图标时加载:

<form method="post" action="" id="smsCampForm">

  <input type="text" name="recipent_number" id="recipent_number" placeholder="Recipent numbers separated by commas" class="form-control" required>
  <input type="file" name="fileToUpload" class="form-control" placeholder="Upload Excel File">
  <select name="listToSendSms" id="listToSendSms"></select>
  <textarea name ="message_content" rows="5" maxlength="120"  id="message_content" placeholder="Message maximum 120 characters" class="form-control"  required></textarea>
  <input type="submit" id="smsSubmit" name="submit" value="Send SMS" class="btn btn-success"></input>
</form>

我有一个 JavaScript 文件:

$("#smsCampForm").submit(function(event){
document.getElementById("smsSubmit").value = "Sending SMS...";
var formData = new FormData(this);
formData.append("chromeExtensionRequest","1");
$.ajax({
  url : myurl,
  type : 'POST',
  data : formData,
  processData : false,
  contentType : false,
  success : function(data,status){
    $("#smsResponse").html("<div class='alert alert-info'>"+data+"</div>");
    document.getElementById("smsSubmit").value = "Send SMS";
  }
});
event.preventDefault();
});
});

Answer 1

由于弹出窗口在失去焦点时会被完全破坏，因此您的文件选择器基本上不会触发任何内容 - 所有代码都会被卸载。

没有办法阻止这种行为；因此，您应该将其卸载到其他内容，例如在选项卡或后台页面中加载的单独页面。