Angular-File-Upload 不适用于 Internet Explorer答案

【问题标题】：Angular-File-Upload does not work with Internet ExplorerAngular-File-Upload 不适用于 Internet Explorer
【发布时间】：2017-12-11 17:35:36
【问题描述】：

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

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

并且我已经成功实施，适用于除 Internet Explorer 之外的所有浏览器。我正在使用 Internet Explorer 11，并且我已经在 nervgh/afu 站点上实施了建议的修复，其中包括适用于旧浏览器的 shim 和 sham 文件。 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 网站上发布了一个问题，如果有人可以帮助我解决问题，我很乐意更新这个问题。

【问题讨论】：

请出示您的代码

标签： angularjs internet-explorer angular-file-upload

【解决方案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;

将返回“http://hostname:port/nameofsite/”，但在 IE 中这不起作用，所以我传入了“未定义”，这显然不起作用。

我将代码更改如下...

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,

    });

现在一切都很开心并且正常工作！

【讨论】：