Question

我对javascript的使用相当新，并感谢任何帮助。我有一个应用程序，浏览器必须使用xmlhttprequest接收来自服务器的响应（出于测试目的，为true / false），并且根据响应，客户端将打开文件选择对话框，供用户选择要上载的本地文件。

当我创建XMLHttpRequest并将异步标志设置为FALSE时，当客户端收到＆＃34; true＆＃34;来自服务器的响应，将打开一个文件选择对话框（对于Chrome，IE）。

当我创建XMLHttpRequest并将async标志设置为TRUE（按照建议）时，当客户端收到＆＃34; true＆＃34;来自服务器的响应，遵循相同的代码路径，但是文件选择对话框永远不会打开，并且Chrome的调试器中不显示错误，但是它仍然可以在IE中工作。

以下是代码：

... 
// user has clicked button to upload a file
$scope.uploadFile = function () { 
   request = new XMLHttpRequest();
   request.open("GET", "some-url", true);// false
   request.onreadystatechange = $scope.checkUploadPermissions;
   request.send();    
}

// the callback
// If the user has permission (based on various factors not shown here)
//   we open the dialog
// Otherwise we inform them that they are not allowed
$scope.checkUploadPermissions = function () {
  // simplified for brevity
  if (request.readyState == 4 && request.status == 200) {
    // for this sample, we are only checking if the server returned true/false
    var hasPerms = request.responseText;
    if (hasPerms === "true") {
       $scope.openFileSelector();
    }
    else {
       alert("You do not have permission to upload a file.");
    }
  }
}

// if the user has permission to proceed, we trigger a click on a hidden element
$scope.openFileSelector = function () {       
   angular.element("#presentUpload").trigger("click");
}
...

我想重申，当async标志设置为FALSE时，此代码可以正常工作，但是当它设置为TRUE时则不行。

将标志设置为TRUE时，如何才能正常工作。

提前谢谢。

Answer 1

文件上传是浏览器中的一项功能，只能作为用户操作的直接结果启动（通常在您的JS代码处理鼠标单击或键盘事件时）。它不能由定时器或某些异步回调异步启动。

因此，当您将第一个Ajax调用设置为同步时，您的JS点击隐藏元素会出现在浏览器中，因为它仍然位于隐藏元素点击事件中，因此允许上传。当您的第一个Ajax调用设置为异步时，用户单击事件在您尝试单击隐藏元素时结束，浏览器将不会显示上载对话框。

有关详细信息，请参阅Trigger click on input=file on asynchronous ajax done()。

为什么当async标志设置为false时xmlhttprequest中的代码工作，但是当它设置为true时不能工作

1 个答案: