这是ajaxfileupload.js js文件上传绿色版下载,无论是PHP,还是其他的(de)服务端脚本都提供了文件上传功能(néng),实(shí)现起来也比较简单。而利(lì)用JavaScript来(lái)配(pèi)合,即可实现Ajax方式的文(wén)件上传。虽然jQuery本身没有提供这样的简化(huà)函数(shù),但(dàn)有不少(shǎo)插件(jiàn)可以(yǐ)实现。其中,Phpletter.com提供的ajaxfileupload.js是一(yī)个(gè)轻量的插件,而且编(biān)写方式与jQuery提供的全局方法$.post()非常相似,简单易(yì)用。
ajaxfileupload.js js文件上(shàng)传绿色版(bǎn)是插件实在太简化了(le),除了可提(tí)供(gòng)需上传文件的(de)路径(jìng)外,也就不能传(chuán)递额(é)外的值到后台(tái)服务端(duān)。所(suǒ)以,我修改了一下该(gāi)脚(jiǎo)本,增加个一个data对象(xiàng)参(cān)数。
我这里使(shǐ)用(yòng)的是PHP作为(wéi)服务端脚本(běn),几乎在每本(běn)较少(shǎo)PHP的书上都会提到如(rú)何使用move_uploaded_file()方法(fǎ)来(lái)上传(chuán)文件,这里我就不再细说了。我想说的是,利(lì)用Ajax上传的原理。
因为(wéi)一直在使用(yòng)jQuery库,所以当想到Ajax时,第一反应就是试试$.post()方法,利用各选择器得到file文(wén)件框(kuàng)中的value值,然后提交到后台服务端(duān)。当然(rán),后来证(zhèng)明这是不行的。(正因为这问题,我还查了不少资料,网上还提供了不(bú)少ASP等方式的脚本,真不知道该说什(shí)么好(hǎo)。。)
回到(dào)正题,要实现Ajax方式上(shàng)传(chuán),其实(shí)并不难,方法也有不少。而本(běn)文提到的Phpletter.com的ajaxfileupload.js插件就是使(shǐ)用iframe的方式。这也是在不(bú)使用JavaScript脚本(běn)时(shí),要实现不刷新(xīn)页面上(shàng)传时常(cháng)见的方法(fǎ)。(本(běn)博客bo-blog后台撰写(xiě)日志就是用该方法)
而(ér)ajaxfileupload.js插件也很(hěn)简单,就是先(xiān)利用jQuery的(de)选(xuǎn)择(zé)器获得file文件上传框中(zhōng)的文(wén)件路径(jìng)值,然后动态(tài)的创建一个(gè)iframe,并(bìng)在里面建立(lì)一个新的(de)file 文件框,提供(gòng)post方(fāng)式提交到后(hòu)台(tái)。最后,返(fǎn)回结果到前台。
jquery ajaxfileupload.js 插件(jiàn)
通过动态添加(jiā)iframe表单提交方式,简单(dān)易用(yòng)。
其他插件有的用的flash方式,本人机子(zǐ)装(zhuāng)的火狐又没有安装flash,
考虑到类似情况,所以选(xuǎn)择(zé)纯(chún)js、ajax方式的(de)提交。
