在軟件開(kāi)發(fā)或網(wǎng)站建設(shè)過(guò)程中，文件上傳是必不可少的一項(xiàng)。無(wú)論是上傳到服務(wù)器還是本地，JavaScript和jQuery都是最簡(jiǎn)便實(shí)用的技術(shù)來(lái)包裝上傳控件以及驗(yàn)證文件格式。 第一步：新建HTML文件

在軟件開(kāi)發(fā)或網(wǎng)站建設(shè)過(guò)程中，文件上傳是必不可少的一項(xiàng)。無(wú)論是上傳到服務(wù)器還是本地，JavaScript和jQuery都是最簡(jiǎn)便實(shí)用的技術(shù)來(lái)包裝上傳控件以及驗(yàn)證文件格式。

第一步：新建HTML文件

使用Dreamweaver CS6新建一個(gè)HTML文件并保存到桌面，然后在桌面放置一個(gè)測(cè)試用的文件（可以是圖片或文本文檔）。

第二步：編寫(xiě)HTML頁(yè)面代碼

在Dreamweaver中輸入以下頁(yè)面代碼：

lt;table width"958"gt;
  lt;trgt;
    lt;tdgt;
      lt;a href""gt;文件上傳lt;/agt;首頁(yè)
    lt;/tdgt;
  lt;/trgt;
lt;/tablegt;
lt;h1gt;amp;nbsp;lt;a href"" class"STYLE9"gt;文件上傳lt;/agt;lt;span class"STYLE7"gt;文件上傳lt;/spangt;lt;/h1gt;
lt;pgt;amp;nbsp;lt;/pgt;
lt;div style"width:180px; height:950px; float:left; border: #55AAFF 1px solid"gt;
  lt;pgt;文件上傳lt;brgt; 
    lt;form action"doUpload.jsp" method"post" name"form1" enctype"multipart/form-data"gt;
      lt;!-- 類(lèi)型enctype用multipart/form-data，這樣可以把文件中的數(shù)據(jù)作為流式數(shù)據(jù)上傳，不管是什么文件類(lèi)型，均可上傳。--gt;
      lt;input type"file" name"upfile" size"15"gt;
      lt;input type"submit" value"確定"gt;
    lt;/formgt;
  lt;/pgt;
lt;/divgt;

第三步：添加CSS樣式代碼

在lt;headgt;標(biāo)簽中輸入以下樣式代碼：

lt;style type"text/css"gt;
  .STYLE1 {color: #3399FF}
  .STYLE7 {font-size: 16px; font-weight: bold;}
  .STYLE9 {font-family: "華文彩云"; font-size: 48px; color: #FF0000;}
  .STYLE11 {font-size: 16px; color: #FF3300;}
lt;/stylegt;

第四步：檢查頁(yè)面樣式

用瀏覽器打開(kāi)HTML文件，查看頁(yè)面樣式，并進(jìn)行必要的修改和調(diào)整。

第五步：選擇文件

點(diǎn)擊頁(yè)面左邊的“選擇文件”按鈕，選中桌面上的文件，然后點(diǎn)擊“打開(kāi)”。文件名稱(chēng)將會(huì)顯示在頁(yè)面上。

第六步：上傳文件

點(diǎn)擊“確定”按鈕，文件將會(huì)被上傳到本地磁盤(pán)，并且上傳成功后會(huì)自動(dòng)跳轉(zhuǎn)到根目錄。

通過(guò)這些步驟，你可以輕松地使用JavaScript實(shí)現(xiàn)文件上傳，并驗(yàn)證文件格式。希望這篇文章對(duì)你有所幫助！