2017-12-11 21 views
1

角度ファイルアップロードライブラリを使用しています。Internet Explorerで角度ファイルアップロードが機能しない

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

と私は実装に成功していると、Internet Explorer以外のすべてのブラウザで動作します。私はInternet Explorer 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を取得する方法別のブラウザ実際にいた問題は、角-FILE-アップロードライブラリーとは何かを持っていなかったことが判明しますコントローラを呼び出すために使用します。

このlsikeファイルアップローダーの外観を定義する角度-FILE-アップロードJavaScriptコード...

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

あなたが使用することをFileUploaderオブジェクトにあなたのコントローラから複数のプロパティを渡すことができます見ることができるように。私を引きつけていたプロパティは "url"でした。

I ChromeとFirefoxの

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を使用しているようです。 –

関連する問題