2017-12-11 21 views
1

각도 파일 업로드 라이브러리를 사용하고 있습니다.Internet Explorer에서 각도 파일 업로드가 작동하지 않습니다.

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

내가 구현에 성공했다는 인터넷 익스플로러를 제외한 모든 브라우저에서 작동합니다. 인터넷 익스플로러 11을 사용하고 있으며 이전 브라우저의 shim 및 sham 파일을 포함하는 nervgh/afu 사이트에서 제안 된 수정 사항을 구현했습니다. 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 사이트에 질문을 올렸고이 문제를 해결할 수있는 사람이 있으면이 질문을 업데이트 해 드리겠습니다.

+0

코드 표시 – SelakaN

답변

0

좋아, 그것은 문제가 다른 브라우저가 호스트 URL을 얼마나 실제로이었다 각도 - 파일 업로드 라이브러리를 함께 할 아무것도하지 않았 음을 밝혀 시도하는 I 컨트롤러를 호출하는 데 사용합니다.

이 lsike 파일 업 로더 모양을 정의하는 각도-파일 업로드 자바 스크립트 코드 ...

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

당신이 사용되는 FileUploader 객체로 컨트롤러에서 여러 속성을 전달할 수 있습니다 볼 수 있습니다. 나를 걸려 넘어 뜨리는 속성은 "url"이었다.

내가 크롬과 파이어 폭스

document.baseURI; 

이 그래서 난 분명히 작동하지 않을 것이다 "정의되지 않은"전달 된 작동하지 않는 IE에서 그러나 "http://hostname:port/nameofsite/"를 반환합니다.

다음과 같이 내 코드를 변경

...

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, 

    }); 

지금 모든 행복과 작동합니다!

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> 
+0

컨트롤러에서 관련 모델을 사용하십시오. – SelakaN

+1

감사합니다. 그러나 사용중인 JavaScript 라이브러리와 다릅니다. ng-file-upload를 사용하고있는 것 같습니다. –