Angular-File-Upload不适用于Internet Explorer

时间:2017-12-11 17:35:36

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

我正在使用Angular File Upload库。

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网站发布了一个问题,如果有人可以帮我解决问题,我很乐意更新这个问题。

2 个答案:

答案 0 :(得分:1)

//试试这个

<div class="material-hover-content padding-three">
<button type="button" class="file-upload btn btn-raised btn-secondary">
<input type="file" ngf-select ng-model="$ctrl.Logo" name="logo" ngf-pattern="'image/*'" ngf-accept="'image/*'" ngf-max-size="1MB" class="file-input"/>  Choose File
</button>
<img ng-if="$ctrl.Logo" class="logo-peek" ngf-src="$ctrl.Logo" width="70">
</div>

答案 1 :(得分:0)

好的,事实证明问题与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对象。绊倒我的财产是&#34; url&#34;。

我Chrome和FireFox

document.baseURI;

将返回&#34; http://hostname:port/nameofsite/&#34;但是在IE中这不起作用所以我传入了#34; undefined&#34;这显然是行不通的。

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

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,

    });

现在一切都快乐而且有效!!