Angular-文件上传不适用于 Internet Explorer

Question

我正在使用 Angular 文件上传库。

https://github.com/nervgh/angular-file-upload

并且我已经成功实施，适用于除 Internet Explorer 之外的所有浏览器。我使用的是 Internet Explorer 11，我已经实施了 nervgh/afu 网站上建议的修复程序，其中包括用于旧版浏览器的 shim 和伪文件。 IE 11 并不旧，但我想我会试一试。

该代码是库的标准代码，因此确实没有任何可显示的内容。我现在确实有这个错误，但我不知道它告诉我什么？

HTML1300: Navigation occurred.
File: precisionfarming
onAfterAddingAll [object Object]
"onAfterAddingAll"
[
  0: { },
  length: 1
]

onBeforeUploadItem [object Object]
"onBeforeUploadItem"
{
  [functions]: ,
  $$hashKey: "object:105",
  __proto__: { },
  _file: { },
  _input: null,
  alias: "file",
  disableMultipart: false,
  file: { },
  formData: [ ],
  headers: { },
  index: 1,
  isCancel: false,
  isError: false,
  isReady: true,
  isSuccess: false,
  isUploaded: false,
  isUploading: false,
  method: "POST",
  progress: 0,
  removeAfterUpload: false,
  uploader: { },
  url: "undefinedapi/UploadFiles",
  withCredentials: false
}

onProgressItem [object Object] 1
"onProgressItem"
{
  [functions]: ,
  $$hashKey: "object:105",
  __proto__: { },
  _file: { },
  _input: null,
  _xhr: { },
  alias: "file",
  disableMultipart: false,
  file: { },
  formData: [ ],
  headers: { },
  index: 1,
  isCancel: false,
  isError: false,
  isReady: true,
  isSuccess: false,
  isUploaded: false,
  isUploading: true,
  method: "POST",
  progress: 1,
  removeAfterUpload: false,
  uploader: { },
  url: "undefinedapi/UploadFiles",
  withCredentials: false
}
1

onProgressAll 1
onProgressItem [object Object] 100
"onProgressItem"
{
  [functions]: ,
  $$hashKey: "object:105",
  __proto__: { },
  _file: { },
  _input: null,
  _xhr: { },
  alias: "file",
  disableMultipart: false,
  file: { },
  formData: [ ],
  headers: { },
  index: 1,
  isCancel: false,
  isError: false,
  isReady: true,
  isSuccess: false,
  isUploaded: false,
  isUploading: true,
  method: "POST",
  progress: 100,
  removeAfterUpload: false,
  uploader: { },
  url: "undefinedapi/UploadFiles",
  withCredentials: false
}
100

onProgressAll 100
onCompleteItem [object Object] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>IIS 8.5 Detailed Error - 404.0 - Not Found</title> 
<style type="text/css"> 
<!-- 
body{margin:0;font-size:.7em;font-family:Verdana,Arial,Helvetica,sans-
serif;} 
code{margin:0;color:#006600;font-size:1.1em;font-weight:bold;} 
.config_source code{font-size:.8em;color:#000000;} 
pre{margin:0;font-size:1.4em;word-wrap:break-word;} 
ul,ol{margin:10px 0 10px 5px;} 
ul.first,ol.first{margin-top:5px;} 
fieldset{padding:0 15px 10px 15px;word-break:break-all;} 
.summary-container fieldset{padding-bottom:5px;margin-top:4px;} 
legend.no-expand-all{padding:2px 15px 4px 10px;margin:0 0 0 -12px;} 
legend{color:#333333;;margin:4px 0 8px -12px;_margin-top:0px; 
font-weight:bold;font-size:1em;} 
a:link,a:visited{color:#007EFF;font-weight:bold;} 
a:hover{text-decoration:none;} 
h1{font-size:2.4em;margin:0;color:#FFF;} 
h2{font-s
"onCompleteItem"
{
  [functions]: ,
  $$hashKey: "object:105",
  __proto__: { },
  _file: { },
  _input: null,
  _xhr: { },
  alias: "file",
  disableMultipart: false,
  file: { },
  formData: [ ],
  headers: { },
  index: null,
  isCancel: false,
  isError: true,
  isReady: false,
  isSuccess: false,
  isUploaded: true,
  isUploading: false,
  method: "POST",
  progress: 0,
  removeAfterUpload: false,
  uploader: { },
  url: "undefinedapi/UploadFiles",
  withCredentials: false
}
"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>IIS 8.5 Detailed Error - 404.0 - Not Found</title> 
<style type="text/css"> 
<!-- 
body{margin:0;font-size:.7em;font-family:Verdana,Arial,Helvetica,sans-
serif;} 
code{margin:0;color:#006600;font-size:1.1em;font-weight:bold;} 
.config_source code{font-size:.8em;color:#000000;} 
pre{margin:0;font-size:1.4em;word-wrap:break-word;} 
ul,ol{margin:10px 0 10px 5px;} 
ul.first,ol.first{margin-top:5px;} 
fieldset{padding:0 15px 10px 15px;word-break:break-all;} 
.summary-container fieldset{padding-bottom:5px;margin-top:4px;} 
legend.no-expand-all{padding:2px 15px 4px 10px;margin:0 0 0 -12px;} 
legend{color:#333333;;margin:4px 0 8px -12px;_margin-top:0px; 
font-weight:bold;font-size:1em;} 
a:link,a:visited{color:#007EFF;font-weight:bold;} 
a:hover{text-decoration:none;} 
h1{font-size:2.4em;margin:0;color:#FFF;} 
h2{font-size:1.7em;margin:0;color:#CC000"
404
{
  [functions]: ,
  __proto__: { },
  cache-control: "private",
  content-length: "4935",
  content-type: "text/html; charset=utf-8",
  date: "Mon, 11 Dec 2017 18:34:14 GMT",
  persistent-auth: "true",
  server: "Microsoft-IIS/8.5",
  x-powered-by: "ASP.NET"
}

onCompleteAll

我真的在寻找在 IE 中使用此库取得一些成功的人。我还在 GIT 网站上发布了一个问题，如果有人可以帮助我解决问题，我会很乐意更新这个问题。

Answer 1

好吧，事实证明这个问题与 Angular-File-Upload 库没有任何关系，它实际上是不同的浏览器如何获取主机 URL 我用来调用控制器。

定义文件上传器的 Angular-File-Upload JavaScript 代码看起来像这样...

var singleUploader = this.singleUploader = new FileUploader({
        url: baseURI + "api/UploadFiles",
        service: this.service,
        formValues: this.FormValues,            
    });

如您所见，您可以将多个属性从控制器传递到要使用的 FileUploader 对象。让我绊倒的属性是 "url"。

我Chrome 和 FireFox

document.baseURI;

will return “http://hostname:port/nameofsite/” 但是在 IE 中这不起作用所以我传递了 "undefined" 这显然不起作用。

我更改了我的代码如下...

var baseURI = document.baseURI;
    if (baseURI == undefined) {
        baseURI = window.location.protocol + "//" + window.location.hostname 
+ (window.location.port ? ':' + window.location.port : '') + "/MySiteName/";

    };

    var singleUploader = this.singleUploader = new FileUploader({
        url: baseURI + "api/UploadFiles",
        service: this.service,
        formValues: this.FormValues,

    });

现在一切顺利！！

Angular-文件上传不适用于 Internet Explorer

Angular-File-Upload does not work with Internet Explorer

angularjs

internet-explorer

angular-file-upload