當前位置:首頁 » 網頁前端 » web上傳文件原理
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

web上傳文件原理

發布時間: 2023-08-30 11:18:23

Ⅰ WEB頁面如何實現拖拽文件夾上傳

目前用戶要通過Web上傳一個文件是通過 <input type="file /"> 這個標記。具體過程需要在一個很傻的對話框里定位文件夾 -> 在大量的文件里找到目標文件 -> 確定 -> 點「上傳」按鈕。我們能不能把這個步驟簡化,實現拖拽上傳呢?

比如說,
1. 在 資源管理器 里選擇一個圖片
2. 拖拽到一個網頁,比如說一個正在編輯的博客
3. 後台AJXJ自動上傳這個圖片
4. 在正在編輯的博客的當前位置直接插入並顯示圖片。

我想用javascript實現。(跟AJAX一樣,有一點hack的味道。)

原理很簡單。首先用戶拖拽一個圖片到瀏覽器,瀏覽器會自動跳轉到這個圖片。比如說我拖拽 D:\test\1.jpg 到瀏覽器,瀏覽器會跳轉當前頁面到 file:///D:/test/1.jpg。那麼我們要做的就是在瀏覽器跳轉之前:

1. 截獲body.onunload事件,並取消瀏覽器的跳轉
2. 獲知瀏覽器將要跳轉到的頁面
3. 自動填寫 <input type="file" />的地址
4. AJAX後台上傳圖片
5. 把圖片插入當前的正在編輯位置。

發這個帖子的目的,想跟大家探討這個設想的可能性。最後希望得出一個結論:可行,還是不可行。如果可行的話我希望深入探討出一個固定的模式。(像AJAX那樣)

Ⅱ 上傳的大文件

基於WEB的文件上傳可以使用FTP和HTTP兩種協議,用FTP的話雖然傳輸穩定,但安全性是個嚴重的問題,而且FTP伺服器讀用戶庫獲取許可權,這樣對於用戶使用來說還是不太方便。 剩下只有HTTP。在HTTP中有3種方式,PUT、WEBDAV、RFC1867,前2種方法不適合大文件上傳,基本上我們使用的web上傳都是基於RFC1867標準的HTML中基於表單的文件上傳。
RFC1867:
1.HTML表單
現有的HTML規范為INPUT元素的TYPE屬性定義了八種可能的值,分別是:CHECKBOX, HIDDEN,MAGE,PASSWORD,RADIO,RESET,SUBMIT,TEXT。 另外,當表單採用POST方式的時候,表單默認的具有「application/x-www-form-urlencoded」的ENCTYPE屬性。
RFC1867標准對HTML做出了兩處修改:
(1)為INPUT元素的TYPE屬性增加了一個FILE選項。
(2)INPUT標記可以具有ACCEPT屬性,該屬性能夠指定可被上傳的文件類型或文件格式列表。
另外,本標准還定義了一種新的MIME類型:multipart/form-data,以及當處理一個帶有ENCTYPE=multipart/form-data 並且/或含有<INPUT type=file>的標記的表單時所應該採取的行為。
舉例來說,當HTML表單作者想讓用戶能夠上傳一個或更多的文件時,他可以這么寫:
<FORM ENCTYPE=multipart/form-data ACTION=_URL_ METHOD=POST>
File to process:
<INPUT NAME=userfile1 TYPE=file>
<INPUT TYPE=submit VALUE=Send File>
</FORM>
HTML DTD里所需要做出的改動是為InputType實體增加一個選項。此外,我們也建議用一系列用逗號分隔的文件類型來作為INPUT標記的ACCEPT屬性。
... (其他元素) ...
<!ENTITY % InputType (TEXT | PASSWORD | CHECKBOX |
RADIO | SUBMIT | RESET |
IMAGE | HIDDEN | FILE )>
<!ELEMENT INPUT - 0 EMPTY>
<!ATTLIST INPUT
TYPE %InputType TEXT
NAME CDATA #IMPLIED -- required for all but submit and reset
VALUE CDATA #IMPLIED
SRC %URI #IMPLIED -- for image inputs --
CHECKED (CHECKED) #IMPLIED
SIZE CDATA #IMPLIED --like NUMBERS,
but delimited with comma, not space
MAXLENGTH NUMBER #IMPLIED
ALIGN (top|middle|bottom) #IMPLIED
ACCEPT CDATA #IMPLIED --list of content types
>
... (其他元素) ...
2.文件傳輸延遲
在某些情況下,在確實准備接受數據前,伺服器先對表單數據中的某些元素(比如說用戶名,賬號等)進行驗證是推薦的做法。但是,經過一定的考慮後,我們認為如果伺服器想這樣做的話,最好是採用一系列的表單,並將前面所驗證過的數據元素作為「隱藏」欄位傳回給客戶端,或者是通過安排表單使那些需要驗證的元素先顯示出來。這樣的話,那些需要做復雜的應用的伺服器可以自己維持事務處理的狀態,而那些簡單的應用的則可以實現得簡單些。
HTTP協議可能需要知道整個事務處理中的內容總長度。即使沒有明確要求,HTTP客戶端也應該提供上傳的所有文件的內容總長度,這樣一個繁忙的伺服器就能夠判斷文件的內容是否是過大以至於將不能完整地處理,從而返回一個錯誤代碼並關閉該連接,而不用等到接受了所有的數據才進行判斷。一些現有的CGI應用對所有的POST事務都需要知道內容總長度。
如果INPUT標記含有一個MAXLENGTH屬性,客戶端可以將這個屬性值看作是伺服器端所能夠接受的傳送文件的最大位元組數。在這種情況下,伺服器能夠在上傳開始前,提示客戶端在伺服器上有多少空間可以用來進行文件上傳。但是應該引起注意的是,這僅僅是一個提示,在表單被創建後和文件上傳前,伺服器的實際需求可能會發生改變。
在任何情況下,如果接受的文件過大的話,任何一個HTTP伺服器都有可能在文件傳輸的過程中中斷傳輸。
3.傳輸二進制數據的其他解決辦法
有些人曾經建議使用一種新的MIME類型aggregate,比如說aggregate/mixed 或是content-transfer-encoding 包來描述那些不確定長度的二進制數據,而不是靠分解為多個部分來表示。雖然我們並不反對這么做,但這需要增加額外的設計和標准化工作來讓大家接受並理解aggregate。 從另一方面來說,分解為多部分的機制工作得很好,能夠非常簡單的在客戶發送端和伺服器接受端加以實現,而且能像其他一些綜合處理二進制數據的方式一樣高效率地工作。
RFC上傳
1.一次性得到上傳的數據,然後分析處理。
看了N多代碼之後發現,無組件程序和一些COM組件都是使用Request.BinaryRead方法。一次性得到上傳的數據,然後分析處理。這就是為什麼上傳大文件很慢的原因了,IIS超時不說,就算幾百M文件上去了,分析處理也得一陣子。
2.一邊接收文件,一邊寫硬碟
了解了一下國外的商業組件,比較流行的有Power-Web,AspUpload,ActiveFile,ABCUpload,aspSmartUpload,SA-FileUp。其中比較優秀的是ASPUPLOAD和SA-FILE,他們號稱可以處理2G的文件(SA-FILE EE版甚至沒有文件大小的限制),而且效率也是非常棒,難道編程語言的效率差這么多?查了一些資料,覺得他們都是直接操作文件流。這樣就不受文件大小的制約。但老外的東西也不是絕對完美,ASPUPLOAD處理大文件後,內存佔用情況驚人。1G左右都是稀鬆平常。至於SA-FILE雖然是好東西但是破解難尋。然後發現2款.NET上傳組件,Lion.Web.UpLoadMole和AspnetUpload也是操作文件流。但是上傳速度和CPU佔用率都不如老外的商業組件。
做了個測試,LAN內傳1G的文件。ASPUPLOAD上傳速度平均是4.4M/s,CPU佔用10-15,內存佔用700M。SA-FILE也差不多這樣。而AspnetUpload最快也只有1.5M/s,平均是700K/s,CPU佔用15-39,測試環境: PIII800,256M內存,100M LAN。我想AspnetUpload速度慢是可能因為一邊接收文件,一邊寫硬碟。資源佔用低的代價就是降低傳輸速度。但也不得不佩服老外的程序,CPU佔用如此之低.....。
上傳問題
我們在上傳大文件時都遇到過這樣或那樣的問題。設置很大的maxRequestLength值並不能完全解決問題,因為會block直到把整個文件載入內存後,再加以處理。實際上,如果文件很大的話,我們經常會見到Internet Explorer顯示 The page cannot be displayed - Cannot find server or DNS Error,好像是怎麼也catch不了這個錯。為什麼?因為這是個client side錯誤,server side端的Application_Error是處理不到的。
解決的方法是利用隱含的HttpWorkerRequest,用它的GetPreloadedEntityBody 和 ReadEntityBody方法從IIS為建立的pipe里分塊讀取數據。Chris Hynes為我們提供了這樣的一個方案(用HttpMole),該方案除了允許你上傳大文件外,還能實時顯示上傳進度。
Lion.Web.UpLoadMole和AspnetUpload 兩個.NET組件都是利用的這個方案。
方案原理:
利用HttpHandler實現了類似於ISAPI Extention的功能,處理請求(Request)的信息和發送響應(Response)。
方案要點:
1. httpHandler or HttpMole
a.分塊讀取和寫入數據
b.實時跟蹤上傳進度更新meta信息
2. 利用隱含的HttpWorkerRequest用它的GetPreloadedEntityBody 和 ReadEntityBody方法處理文件流
3. 自定義Multipart MIME 解析器。
自動截獲MIME分割符。
將文件分塊寫如臨時文件。
實時更新Appliaction 狀態(ReceivingData, Error, Complete) 。

Ⅲ http文件上傳的原理

HTTP 協議定義伺服器端和客戶端之間文件傳輸的溝通方式。目前HTTP協議的版本是Http1.1。RFC 2616描述了HTTP協議的具體信息。

這個協議已經成為瀏覽器和Web站點之間的標准。

當我上網的時候底層是如何進行交互的?

訪問者點擊一個超鏈接的時候,將會給瀏覽器提交一個URL地址。通過這個URL地址,瀏覽器便知道去鏈接那個網站並去取得具體的頁面文件(也可能是一張圖片,一個pdf文件)。

HTTP工作的基礎就是,連接一個伺服器並開始傳輸文件到瀏覽器。

HTTP傳輸的基本過程

在http傳輸的過程中,被稱為客戶端的請求者向伺服器請求一個文件。

最基本的過程是:
1 客戶端連接一個主機;
2 伺服器接收連接,
3 客戶端請求一個文件,
4 伺服器發送一個應答.

Ⅳ 怎樣使用javaweb實現上傳視頻和下載功能

文件上傳就是將客戶端資源,通過網路傳遞到伺服器端。

因為文件數據比較大,必須通過文件上傳才可以完成將數據保存到資料庫端的操作。

文件上傳的本質就是IO流操作。

演示:文件上傳應該如何操作?

瀏覽器端:
1.method=post 只有post才可以攜帶大數據
2.必須使用<input type='file' name='f'>要有name屬性
3.encType="multipart/form-data"
伺服器端:
request對象是用於獲取請求信息。
它有一個方法 getInputStream(); 可以獲取一個位元組輸入流,通過這個流,可以讀取到
所有的請求正文信息.
文件上傳原理:
瀏覽器端注意上述三件事,在伺服器端通過流將數據讀取到,在對數據進行解析.
將上傳文件內容得到,保存在伺服器端,就完成了文件上傳。

注意:在實際開發中,不需要我們進行數據解析,完成文件上傳。因為我們會使用文件上傳的工具,它們已經封裝好的,提供API,只要調用它們的API就可以完成文件上傳操作.我們使用的commons-fileupload,它是apache提供的一套開源免費的文件上傳工具。

代碼演示文件上傳的原理:

在WebRoot下新建upload1.jsp

[html]view plain

  • <%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

  • <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

  • <html>

  • <head>

  • <title>MyJSP'index.jsp'startingpage</title>

  • </head>

  • <body>

  • <!--encType默認是application/x-www-form-urlencoded-->

  • <formaction="${pageContext.request.contextPath}/upload1"

  • method="POST"enctype="multipart/form-data">

  • <inputtype="text"name="content"><br>

  • <inputtype="file"name="f"><br><inputtype="submit"

  • value="上傳">

  • </form>

  • </body>

  • </html>

  • 新建Upload1Servlet 路徑:/upload1

    [java]view plain

  • packagecn.itcast.web.servlet;

  • importjava.io.IOException;

  • importjava.io.InputStream;

  • importjavax.servlet.ServletException;

  • importjavax.servlet.http.HttpServlet;

  • importjavax.servlet.http.HttpServletRequest;

  • importjavax.servlet.http.HttpServletResponse;

  • {

  • publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)

  • throwsServletException,IOException{

  • //System.out.println("upload1servlet......");

  • //通過request獲取一個位元組輸入流,將所有的請求正文信息讀取到,列印到控制台

  • InputStreamis=request.getInputStream();

  • byte[]b=newbyte[1024];

  • intlen=-1;

  • while((len=is.read(b))!=-1){

  • System.out.println(newString(b,0,len));

  • }

  • is.close();

  • }

  • publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)

  • throwsServletException,IOException{

  • doGet(request,response);

  • }

  • }

  • 在瀏覽器端訪問信息如下:


    文件上傳概述

    實現web開發中的文件上傳功能,需要完成如下二步操作:

  • 在web頁面中添加上傳輸入項。

  • 在Servlet中讀取上傳文件的數據,並保存在伺服器硬碟中。

  • 如何在web頁面中添加上傳輸入項?

    <input type="file">標簽用於在web頁面中添加文件上傳輸入項,設置文件上傳輸入項時注意:

  • 1、必須設置input輸入項的name屬性,否則瀏覽器將不會發送上傳文件的數據。

  • 2、必須把form的encType屬性設為multipart/form-data 設置該值後,瀏覽器在上傳文件時,並把文件數據附帶在http請求消息體內,並使用MIME協議對上傳的文件進行描述,以方便接收方對上傳數據進行解析和處理。

  • 3、表單的提交方式要設置為post。

  • 如何在Servlet中讀取文件上傳數據,並保存到本地硬碟中?

  • Request對象提供了一個getInputStream方法,通過這個方法可以讀取到客戶端提交過來的數據。但由於用戶可能會同時上傳多個文件,在servlet端編程直接讀取上傳數據,並分別解析出相應的文件數據是一項非常麻煩的工作,示例。

  • 為方便用戶處理文件上傳數據,Apache 開源組織提供了一個用來處理表單文件上傳的一個開源組件( Commons-fileupload ),該組件性能優異,並且其API使用極其簡單,可以讓開發人員輕松實現web文件上傳功能,因此在web開發中實現文件上傳功能,通常使用Commons-fileupload組件實現。

  • 使用Commons-fileupload組件實現文件上傳,需要導入該組件相應支撐jar包:Commons-fileupload和commons-io。commo-io不屬於文件上傳組件的開發jar文件,但Commons-fileupload組件從1.1版本開始,它工作時需要commons-io包的支持。

Ⅳ http中上傳文件的原理

http中上傳文件的原理如下:
在最初的http協議中,沒有上傳文件方面的功能。 rfc1867 ( http://www.ietf.org/rfc/rfc1867.txt ) 為 http 協議添加了這個功能。客戶端的瀏覽器,如 Microsoft IE, Mozila, Opera 等,按照此規范將用戶指定的文件發送到伺服器。伺服器端的網頁程序,如 php, asp, jsp 等,可以按照此規范,解析出用戶發送來的文件。Microsoft IE, Mozila, Opera 已經支持此協議,在網頁中使用一個特殊的 form 就可以發送文件。絕大部分 http server ,包括 tomcat ,已經支持此協議,可接受發送來的文件。各種網頁程序,如 php, asp, jsp 中,對於上傳文件已經做了很好的封裝。

超文本傳輸協議(HTTP,HyperText Transfer Protocol)是互聯網上應用最為廣泛的一種網路協議。所有的WWW文件都必須遵守這個標准。設計HTTP最初的目的是為了提供一種發布和接收HTML頁面的方法。1960年美國人Ted Nelson構思了一種通過計算機處理文本信息的方法,並稱之為超文本(hypertext),這成為了HTTP超文本傳輸協議標准架構的發展根基。

Ⅵ web 開發 有哪些上傳文件的技術

1、基於HTTP協議
該方法需要編程者利用第三方軟體,如DELPHI、VB等,在應用程序中先進行HTTP協議編程,然後將待上傳文件內容按HTTP協議的格式打包,最後向WEB伺服器發送上傳的請求報文,從而實現文件的上傳。因為DELPHI和VB不能編寫完整的WEB網路程序,只能編寫WEB小應用程序,因此,該方法只用於功能受限的網路應用。 2、基於VB(或DELPHI等)開發的文件上傳組件
該方法利用VB(或DELPHI等編程語言)開發ASP伺服器組件,實現特定的文件上傳服務。它首先利用ASP表單功能將文件(二進制格式)從用戶端上傳到伺服器端,然後使用VB開發的組件,對二進制文件進行處理,成為可以正常讀寫的文件。該方法要求編程者不僅掌握ASP語言,而且還能利用VB等第三方語言進行組件編程,增加了開發的難度。 3、基於資料庫技術
該方法和上個方法有類似之處。不同的地方在於對上傳的二進制文件的處理上。它使用資料庫來保存二進制文件。無論是小型資料庫還是大型資料庫都提供了存儲二進制數據的數據類型,只要以Append Chunk方式將數據存入相應的欄位就可以了。該方法雖然簡單可行,但是因為每次上傳的文件大小都是不一樣的,因此,會對資料庫的空間造成很大的浪費,降低了數據的訪問速度;並且使得文件只能在資料庫環境下進行訪問,造成了很大的不便。