2012-02-14 50 views
1

我一直在尋找一個前端JS解決方案來解決這個問題/在瀏覽器中強制下載文件的概念。基本上,我想讓瀏覽器通過js事件下載文件。我知道在HTML5中我們有下載屬性,但它只在Chrome中受到支持,最終用戶仍然需要實際點擊鏈接,我無法觸發它。但缺乏瀏覽器支持對我的需求來說更成問題。強迫文件下載與PHP頭影響我的帶寬?

所以,我以爲我會使用PHP和「內容處置:附件」這是偉大的工作,但現在它的服務器端的代碼,我不知道是否會影響我的帶寬。下載的文件是外部文件,並不在我的服務器上。

此外,雖然「download.php?file = http://domain.com/image.jpg」爲我下載文件,我無法弄清楚如何通過ajax請求下載以「下載.php?file = http://domain.com/image.jpg「

任何想法?

這裏是PHP代碼的一部分:

header("Content-Disposition: attachment; filename=\"".basename($filename)."\";"); 
header("Content-Transfer-Encoding: binary"); 
readfile("$filename"); 

好,以及啓動對前端下載一個辦法是應用X-框架,選項報頭的download.php然後在iframe中打開圖像,作爲內容添加到的download.php:

header('X-Frame-Options: DENY'); 

然後做到這一點用JS/jQuery的:

$("body").append(<iframe src="download.php?file=http://domain.com/image.jpg"></iframe>); 

但是我仍然在使用download.php並且會得到一個帶寬成本,所以它並不理想。任何其他想法?我只想在頁面上顯示一堆圖像,並允許用戶單擊一個按鈕將它們全部下載。圖片不是由我託管的,我不想帶寬受到影響。

在下載HTML5屬性而言,不能夠觸發它,jQuery的點擊或觸發點擊失敗,但是這個代碼確實讓我來觸發程序下載:

var clickEvent = document.createEvent("MouseEvent"); 
clickEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 
$("a")[0].dispatchEvent(clickEvent); 

但是,這個下載屬性只在Chrome中支持,所以我越來越近,但還沒有。任何人?

+0

你能顯示一些代碼嗎?你的問題到底是什麼 - 我不太瞭解Ajax如何進入這裏 – 2012-02-14 17:32:16

+0

Ajax無法做文件下載 - 這是一個後臺操作。您需要使用'window.location ='download.php .....「來強制執行前臺操作。 – 2012-02-14 17:40:42

+0

我下載的php文件效果很好,你去它下載一個在查詢中指定的文件,當我去download.php?file = http://domain.com/image.jpg - 它下載http:// domain.com/image.jpg,但我正嘗試下載多個文件,因此我想爲每個文件的download.php調用(ajax調用)。我可以讓ajax調用返回圖像,但不能下載它。 – iwek 2012-02-14 17:42:59

回答

0

如果我去一個網頁,它啓動文件的自動下載,我點擊取消,並嘗試關閉瀏覽器了。我懷疑很多其他人會對瀏覽器的製造商有相同的看法和希望。如果我收到提示「我想要下載此文件」,我希望它。

要回答你的問題,如果文件被從服務器B下載那麼這將是對服務器B上的帶寬會受到影響。

+0

這是我的主要問題,該文件是從服務器B下載的,它肯定有帶寬成本,但是我的服務器呢?如果這是所有的JS我會確定我的服務器沒有使用帶寬,但因爲我有PHP代碼來獲取文件,我不知道它是否有所作爲。 – iwek 2012-02-14 17:46:12

+0

在我目前的工作場所,我們在CDN上有我們的JavaScript文件。有人訪問我們的網頁之一是從我們的網絡服務器那裏獲得的頁面,但是指向JavaScript的鏈接指向了CDN服務器。因此,Web服務器的帶寬不受影響。我重新閱讀了你的文章和其他人的評論,在我看來,你的代碼將文件從服務器B拉到服務器,然後再將這些文件推出。所以,這會影響兩臺服務器的帶寬。 – 2012-02-15 09:24:15

+0

感謝丹尼爾,你是對的,這就是爲什麼我想弄清楚一個完整的前端解決方案。不幸的是,只有Chrome支持HTML5下載屬性才能完成此操作。 – iwek 2012-02-15 15:57:31

1

看起來你正在使用PHP來獲取遠程文件,然後請求的Web瀏覽器會從你的PHP服務器下載。是的,它將影響帶寬,因爲必須將原始源的全部內容複製到服務器,並將複製的內容發送到瀏覽器。

從本質上講,你有可能被人們發送請求被濫用於大文件用盡你的數據傳輸限制,如果你不過濾鏈接到下載請求的基本代理。

另外,我不明白你爲什麼會想從一個AJAX請求開始下載,即使它是可能的。要下載的文件不應該影響加載的頁面。

+0

謝謝,是的,這是有道理的。我上面發佈了我的PHP代碼,我希望事實並非如此。 – iwek 2012-02-14 17:48:53