這是ajaxfileupload.js js文件上傳綠色版下載，無(wú)論是PHP，還是其他的服務(wù)端腳本都提供了文件上傳功能，實(shí)現(xiàn)起來(lái)也比較簡(jiǎn)單。而利用JavaScript來(lái)配合，即可實(shí)現(xiàn)Ajax方式的文件上傳。雖然jQuery本身沒(méi)有提供這樣的簡(jiǎn)化函數(shù)，但有不少插件可以實(shí)現(xiàn)。其中，Phpletter.com提供的ajaxfileupload.js是一個(gè)輕量的插件，而且編寫(xiě)方式與jQuery提供的全局方法$.post()非常相似，簡(jiǎn)單易用。dHL紅軟基地

軟件介紹

ajaxfileupload.js js文件上傳綠色版是插件實(shí)在太簡(jiǎn)化了，除了可提供需上傳文件的路徑外，也就不能傳遞額外的值到后臺(tái)服務(wù)端。所以，我修改了一下該腳本，增加個(gè)一個(gè)data對(duì)象參數(shù)。dHL紅軟基地

軟件原理

我這里使用的是PHP作為服務(wù)端腳本，幾乎在每本較少PHP的書(shū)上都會(huì)提到如何使用move_uploaded_file()方法來(lái)上傳文件，這里我就不再細(xì)說(shuō)了。我想說(shuō)的是，利用Ajax上傳的原理。dHL紅軟基地
因?yàn)橐恢痹谑褂胘Query庫(kù)，所以當(dāng)想到Ajax時(shí)，第一反應(yīng)就是試試$.post()方法，利用各選擇器得到file文件框中的value值，然后提交到后臺(tái)服務(wù)端。當(dāng)然，后來(lái)證明這是不行的。（正因?yàn)檫@問(wèn)題，我還查了不少資料，網(wǎng)上還提供了不少ASP等方式的腳本，真不知道該說(shuō)什么好。。）dHL紅軟基地
回到正題，要實(shí)現(xiàn)Ajax方式上傳，其實(shí)并不難，方法也有不少。而本文提到的Phpletter.com的ajaxfileupload.js插件就是使用iframe的方式。這也是在不使用JavaScript腳本時(shí)，要實(shí)現(xiàn)不刷新頁(yè)面上傳時(shí)常見(jiàn)的方法。（本博客bo-blog后臺(tái)撰寫(xiě)日志就是用該方法）dHL紅軟基地
而ajaxfileupload.js插件也很簡(jiǎn)單，就是先利用jQuery的選擇器獲得file文件上傳框中的文件路徑值，然后動(dòng)態(tài)的創(chuàng)建一個(gè)iframe，并在里面建立一個(gè)新的file 文件框，提供post方式提交到后臺(tái)。最后，返回結(jié)果到前臺(tái)。dHL紅軟基地

相關(guān)介紹

jquery ajaxfileupload.js 插件dHL紅軟基地
通過(guò)動(dòng)態(tài)添加iframe表單提交方式，簡(jiǎn)單易用。dHL紅軟基地
其他插件有的用的flash方式，本人機(jī)子裝的火狐又沒(méi)有安裝flash，dHL紅軟基地
考慮到類(lèi)似情況，所以選擇純js、ajax方式的提交。dHL紅軟基地

軟件截圖

dHL紅軟基地