【徹底跨域】異步上傳文件並得到返回值

時間 2019-11-08

標籤徹底跨域異步上傳文件得到返回简体版

原文原文鏈接

【徹底跨域】異步上傳文件並得到返回值javascript

做者：php-note.com 發佈於：2015-03-01 10:58 分類：JS/jQuery 瀏覽(595)php

AJAX能夠進行數據的異步請求，但對於文件和跨域問題卻一籌莫展。html

Jsonp能夠進行跨域數據的異步請求，但一樣不能使用於文件。前端

<form>表單能夠進行跨域數據和文件的上傳，但卻會使頁面跳轉。java

那麼如何同時實現「異步」+「跨域」+「文件」+「返回值」這幾個特性呢？方法以下：跨域

原理：瀏覽器

將<form>表單經過一個iframe來submit，也就是將<form>的target屬性設置爲一個iframe的id，這樣<form>的action URL就會在這個iframe中打開，那麼服務器的返回數據也就會輸出到iframe中了。最後再經過主頁面與iframe之間的交互完成對返回數據的讀取（這涉及到跨域問題，文章後面將介紹此問題的解決方法）。服務器

基本結構：dom

前端部分（當前域名：www.test.com，與form中的action域名相同）異步

1

<form action="http://www.test.com/io.php" method="POST" enctype="multipart/form-data" target="upload">

2

3

<input type="file" name="upload_file" />

4

5

<input type="submit" value="開始上傳" />

6

7

</form>

8

9

<iframe name="upload" style="display:none"></iframe> // 注意，是name="upload"，而不是id="upload"

後臺部分

1

<?php

2

3

move_uploaded_file($_FILES['upload_file']['tmp_name'],'upload/' . $_FILES['upload_file']['name']); // 存儲上傳的文件

4

5

echo 'This data is from server!'; // 返回數據，這行字將輸出到iframe的body中

6

7

?>

優化結構一：

前端部分（當前域名：a.test.com，與form中的action域名不一樣）

01

<form action="http://b.test.com/io.php" method="POST" enctype="multipart/form-data" target="upload">

02

03

<input type="file" name="upload_file" />

04

05

<input type="text" name="script" value="http://a.test.com/JS/iframe_control.src.js" style="display:none" /> // 注意這裏！

06

07

<input type="submit" value="開始上傳" />

08

09

</form>

10

11

<iframe name="upload" style="display:none"></iframe> // 注意，是name="upload"，而不是id="upload"

12

13

<script type="text/javascript">

14

15

document.domain="test.com"; // 解決與iframe之間的跨域問題

16

17

</script>

後臺部分

01

<?php

02

03

move_uploaded_file($_FILES['upload_file']['tmp_name'],'upload/' . $_FILES['upload_file']['name']); // 存儲上傳的文件

04

05

$html = '<html><head>'

06

07

. '<script src="' . $_POST['script'] .'" type="text/javascript"></script>' // 注意這裏！

08

09

. '</head><body>'

10

11

. 'This data is from server!' // 返回數據，這行字將輸出到iframe的body中

12

13

. '</body></html>';

14

15

echo $html;

16

17

?>

經過上面的優化，iframe從服務器接收到的內容中就多了一條<script>標籤，這個標籤的src是由<form>表單提交的，也就是說這個js文件可

以放在任何域名下，而且經過修改該js的內容來制定這個iframe的功能。好比，在其中調用document.domain="test.com"後，即可以與主頁面

互相通訊與控制了（主頁面中也調用了document.domain="test.com"，所以跨域限制被消除了）。

優化結構二：

前端部分（當前域名：www.a.com，與form中的action域名不一樣）

01

<form action="http://www.b.com/io.php" method="POST" enctype="multipart/form-data" target="upload">

02

03

<input type="file" name="upload_file" />

04

05

<input type="text" name="tmpurl" value="http://www.a.com/tmp.html" style="display:none" /> //注意這裏！

06

07

<input type="submit" value="開始上傳" />

08

09

</form>

10

11

<iframe name="upload" style="display:none"></iframe> //注意，是name="upload"，而不是id="upload"

此次咱們沒有看到<script>標籤，由於再也不須要了，請繼續看後臺代碼：

後臺部分

1

<?php

2

3

move_uploaded_file($_FILES['upload_file']['tmp_name'],'upload/' . $_FILES['upload_file']['name']); // 存儲上傳的文件

4

5

$data = 'This data is from server!' // 返回數據，這行字將經過URL返回給瀏覽器

6

7

header('Location:' . $_POST['tmpurl'] . '?data=' . $_data); // 上傳完成後使iframe直接跳轉至$_POST['tmpurl']

8

9

?>

與優化結構一不一樣的是，結構二中再也不使用「指定document.domain爲一級域名」來解除跨域限制，也不經過iframe的document內容來獲得返

回數據，而是經過使iframe直接跳轉至當前域名（經過$_POST['tmpurl']指定）來完全取消跨域限制而且經過url的search部分傳遞返回數據。

兩種結構的對比：

跨域：優化結構一隻可解決一級域名相同的狀況下的跨域狀況，而優化結構二可解決任何跨域，好比百度與google之間。

數據：優化結構一的返回數據無大小限制，而優化結構二的返回數據必須小於2K（由於數據是經過RUL傳輸的）。

相關文章

相關標籤/搜索

PHP-文件上傳

COS上傳文件

返回值狀態

PHP 7 新特性

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<