Jquery AjaxUpload實現檔案上傳

2022-02-22 23:32:38 字數 2794 閱讀 7387

以下是本人實現ajax上傳時參考的文章,希望能對大家有幫助。

在php**開發中,檔案上傳功能時常用到,之前我已介紹過如何利用php實現檔案上傳功能。隨著web技術的發展,使用者體驗成為衡量**成功與否的關鍵,今天和大家分享如何在php中利用jquery實現ajax方式檔案上傳功能的例子,其中使用到了jquery外掛程式ajaxupload,其可以實現單個檔案和多檔案上傳功能。

ajaxupload

jquery外掛程式ajaxupload實現檔案上傳功能時無需建立form表單,即可實現ajax方式的檔案上傳,當然根據需要也可以建立form表單。

準備工作

ajaxupload.3.5.js  檔案原始碼:

docelem.scrolltop/zoom || body.scrolltop/zoom) - clienttop,

left = box.left/zoom + (window.pagexoffset|| docelem &&

2、建立uploadfile.html,並引入jquery開發包和ajaxupload外掛程式12

3、根據jquery外掛程式ajaxupload的需要,建立乙個觸發ajax檔案上傳功能的div12

3456

檔案上傳div>

已上傳的檔案列表:p>

ol>

ul>

注釋:由下面的**我們可以看到jquery外掛程式ajaxupload是根據upload_button這個div觸發檔案上傳功能。 

前台js**

在**中我設定了開關,根據需要可以匹配上傳檔案型別,同時也可以設定是以ajax方式實現單個檔案上傳還是多個檔案上傳。12

3456

78910

1112

1314

1516

1718

1920

2122

2324

2526

2728

2930

3132

注釋

第1行:$(document).ready()函式,jquery中的函式,類似於window.load,使用這個函式可在dom載入就緒能夠讀取並操縱時立即呼叫繫結的函式。

第3行:filetype和filenum引數代表上傳檔案的型別和數量,預設值為可上傳所有型別檔案,同一時間只能上傳乙個檔案,如想上傳檔案或同時上傳多個檔案,可將這兩個變數值變為pic和more。

第6~8行:post到伺服器的資料,你可以設定靜態值也可以通過jquery的dom操作函式獲得一些動態值,比如form表單中input的值等。

第9行:等同於前端

1伺服器端$_files['userfile']

第10~36行:檔案上傳前觸發的功能。

第11~21行:檔案型別的過濾功能,jquery setdata函式用來設定post至伺服器端的值。

第25~26行:設定同時只上傳乙個檔案還是多個檔案,如果只上傳乙個檔案,則將觸發按鈕禁掉。如果要多傳輸幾個檔案,請在伺服器端php檔案上傳程式中設定maxsize的值,當然上傳檔案的大小限制同時和php.ini檔案中的設定也有關。

第28~35行:在檔案上傳過程中每隔200毫秒動態更新一次按鈕的文字,已實現動態提示的效果。window.setinterval函式用來每隔指定的時間就執行一次內建的函式,互動時間單位為豪秒。

第37~49行:檔案上傳功能完成後觸發的功能,根據返回值如果伺服器端報錯,則前端通過alert方式提示出錯資訊。

伺服器端php檔案上傳**

大體上是根據之前介紹的php檔案上傳功能**例項教程改編,涉及到的檔案上傳大小的設定,出錯資訊等說明都已在此文中詳細說明。12

3456

78910

1112

1314

1516

1718

1920

2122

2324

2526

2728

2930

3132

3334

3536

3738

3940

$upload_dir = '../file/';

$file_path = $upload_dir . $_files['userfile']['name'];

$max_size = 20000000;

echo $_post['buttoninfo'];

if(!is_dir($upload_dir))

if($_files['userfile']['size']>$max_size)

echo "上傳的檔案大小超過了規定大小";

if($_files['userfile']['size'] == 0)

echo "請選擇上傳的檔案";

if(!move_uploaded_file( $_files['userfile']['tmp_name'], $file_path))

echo "複製檔案失敗,請重新上傳";

switch($_files['userfile']['error'])

總結

基本上前端ajax檔案上傳觸發功能和伺服器端php檔案上傳功能的原型就介紹完畢了,你可以根據自身需要對前後端

**進行補充,也可以將一些

功能獨立出來,比如檔案型別、單個檔案或者多檔案上傳功能。總的來說jquery外掛程式ajaxupload實現檔案上傳功能的應用還是比較容易的。

原始連線(

jQuery Mobile PHP實現檔案上傳

很簡單的乙個小例子 jquery mobile php 通過超全域性 files 上傳,然後用move uploaded file 方法把上傳的移動到到本地伺服器下的資料夾,下面是html和php的 複製 如下 css 首頁 nbs程式設計客棧p 複製 如下 if files file error ...

ubuntu上實現遠端訪問和ftp檔案上傳

1.sudo apt get install openssh server 2.cd etc ssh 3.sudo vim sshd config 4.修改 permitrootlogin yes 5.重啟服務 service sshd restart 6.ifconfig 檢視ip 遠端連線 7....

用FileUpload實現多個檔案同時上傳

使用fileupload實現多個檔案同時上傳的例子,方法很多,這是乙個簡單一點的方法。下面就是主要的介面,大家可以參考一下。下面我們來解釋他的實現方法 首先我們看一下介面,開始介面上有個panel1,裡面有個fileupload控制項,然後在panel1外面有個textbox控制項,乙個button...