08-05更新ThinkPHP+swfupload多圖上傳執行個體 經典實用的php多圖上傳

先上一張圖檔給大家看看效果，有需要就下載下傳學習。不一定非要在ThinkPHP裡，隻是我非常喜歡去用ThinkPHP做開發了。

    好了。現在咱們需要的東西是，下載下傳一個swfupload.js網上很多，自己百度吧.之前有人加我QQ說我寫的博文大部分都是代碼,看不懂,我以後寫博文也先說明思路,然後開始貼代碼分享

     整個多圖上傳的流程

    1.寫好html代碼,包括上傳以後顯示的效果的html,以及加載swfupload元件.和flash

    2.在添加圖檔以後上傳到php裡處理上傳并且傳回上傳圖檔的位址,加載到預覽區域裡.

    3.點選X以後,ajax調用php的方法去删除預覽區域的圖檔.

    4.在添加圖檔和删除預覽區域的圖檔的同時,都會更改一個隐藏域的值,這樣在完成整個上傳送出表單以後可以把圖檔的位址儲存到資料庫.(看需要)

     好了。先寫html代碼吧。(css檔案我就不貼了)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

<code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</code>

<code>&lt;</code><code>html</code> <code>xmlns</code><code>=</code><code>"http://www.w3.org/1999/xhtml"</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"Content-Type"</code> <code>content</code><code>=</code><code>"text/html; charset=utf-8"</code> <code>/&gt;</code>

<code>&lt;</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"Cache-control"</code> <code>content</code><code>=</code><code>"private, must-revalidate"</code> <code>/&gt;</code>

<code>&lt;</code><code>title</code><code>&gt;flash無重新整理多圖檔上傳&lt;/</code><code>title</code><code>&gt;</code>

<code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;</code>

<code>var path='__STYLE__';</code>

<code>var url='__URL__';</code>

<code>&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"__STYLE__/js/jquery.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"__STYLE__/js/swfupload.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"__STYLE__/js/handlers.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;</code><code>link</code> <code>href</code><code>=</code><code>"__STYLE__/css/default.css"</code> <code>rel</code><code>=</code><code>"stylesheet"</code> <code>type</code><code>=</code><code>"text/css"</code> <code>/&gt;</code>

<code>var swfu;</code>

<code>window.onload = function () {</code>

<code>swfu = new SWFUpload({</code>

<code>upload_url: "__URL__/uploadImg",</code>

<code>post_params: {"PHPSESSID": "&lt;?</code><code>php</code> <code>echo session_id();?&gt;"},</code>

<code>file_size_limit : "2 MB",</code>

<code>file_types : "*.jpg;*.png;*.gif;*.bmp",</code>

<code>file_types_description : "JPG Images",</code>

<code>file_upload_limit : "100",</code>

<code>file_queue_error_handler : fileQueueError,</code>

<code>file_dialog_complete_handler : fileDialogComplete,</code>

<code>upload_progress_handler : uploadProgress,</code>

<code>upload_error_handler : uploadError,</code>

<code>upload_success_handler : uploadSuccess,</code>

<code>upload_complete_handler : uploadComplete,</code>

<code>button_image_url : "__STYLE__/images/upload.png",</code>

<code>button_placeholder_id : "spanButtonPlaceholder",</code>

<code>button_width: 113,</code>

<code>button_height: 33,</code>

<code>button_text : '',</code>

<code>button_text_style : '.spanButtonPlaceholder { font-family: Helvetica, Arial, sans-serif; font-size: 14pt;} ',</code>

<code>button_text_top_padding: 0,</code>

<code>button_text_left_padding: 0,</code>

<code>button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,</code>

<code>button_cursor: SWFUpload.CURSOR.HAND,</code>

<code>flash_url : "__STYLE__/swf/swfupload.swf",</code>

<code>custom_settings : {</code>

<code>upload_target : "divFileProgressContainer"</code>

<code>},</code>

<code>debug: false</code>

<code>});</code>

<code>};</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>&lt;</code><code>form</code> <code>action</code><code>=</code><code>"__URL__/s"</code> <code>method</code><code>=</code><code>"post"</code><code>&gt;</code>

<code>&lt;</code><code>div</code> <code>style</code><code>=</code><code>"width: 610px; height: auto; border: 1px solid #e1e1e1; font-size: 12px; padding: 10px;"</code><code>&gt;</code>

<code>&lt;</code><code>span</code> <code>id</code><code>=</code><code>"spanButtonPlaceholder"</code><code>&gt;&lt;/</code><code>span</code><code>&gt;</code>

<code>&lt;</code><code>div</code> <code>id</code><code>=</code><code>"divFileProgressContainer"</code><code>&gt;&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;</code><code>div</code> <code>id</code><code>=</code><code>"thumbnails"</code><code>&gt;</code>

<code>&lt;</code><code>ul</code> <code>id</code><code>=</code><code>"pic_list"</code> <code>style</code><code>=</code><code>"margin: 5px;"</code><code>&gt;&lt;/</code><code>ul</code><code>&gt;</code>

<code>&lt;</code><code>div</code> <code>style</code><code>=</code><code>"clear: both;"</code><code>&gt;&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"hidden"</code> <code>name</code><code>=</code><code>"s"</code> <code>id</code><code>=</code><code>""</code> <code>value</code><code>=</code><code>""</code><code>/&gt;</code>

<code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"submit"</code> <code>value</code><code>=</code><code>"送出"</code> <code>/&gt;</code>

<code>&lt;/</code><code>form</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

詳細說一下swfupload的配置項

upload_url   是上傳圖檔處理的php位址

file_size_limit   上傳大小限制

file_upload_limit    限制使用者一次性最多上傳多少張圖檔，0為不限制

file_queue_error_handler

file_dialog_complete_handler   添加檔案上傳選擇框關閉以後執行的方法

upload_error_handler     檔案上傳錯誤的時候執行的方法

upload_success_handler   檔案上傳成功以後執行的方法

upload_complete_handler    檔案上傳完成以後執行的方法

debug: false     想研究swfupload的可以把這個設定為true，調試模式

接下來就是上傳圖檔的php代碼，我就用的TP的上傳類，簡單，容易懂

<code>function</code> <code>uploadImg() {</code>

<code>import(</code><code>'ORG.Net.UploadFile'</code><code>);</code>

<code>$upload</code> <code>= </code><code>new</code> <code>UploadFile();</code><code>// 執行個體化上傳類</code>

<code>$upload</code><code>-&gt;maxSize  = 3145728 ;</code><code>// 設定附件上傳大小</code>

<code>$upload</code><code>-&gt;allowExts  = </code><code>array</code><code>(</code><code>'jpg'</code><code>, </code><code>'gif'</code><code>, </code><code>'png'</code><code>, </code><code>'jpeg'</code><code>);</code><code>// 設定附件上傳類型</code>

<code>$savepath</code><code>=</code><code>'./uploads/'</code><code>.</code><code>date</code><code>(</code><code>'Ymd'</code><code>).</code><code>'/'</code><code>;</code>

<code>if</code> <code>(!</code><code>file_exists</code><code>(</code><code>$savepath</code><code>)){</code>

<code>mkdir</code><code>(</code><code>$savepath</code><code>);</code>

<code>}</code>

<code>$upload</code><code>-&gt;savePath =  </code><code>$savepath</code><code>;</code><code>// 設定附件上傳目錄</code>

<code>if</code><code>(!</code><code>$upload</code><code>-&gt;upload()) {</code><code>// 上傳錯誤提示錯誤資訊</code>

<code>$this</code><code>-&gt;error(</code><code>$upload</code><code>-&gt;getErrorMsg());</code>

<code>}</code><code>else</code><code>{</code><code>// 上傳成功 擷取上傳檔案資訊</code>

<code>$info</code> <code>=  </code><code>$upload</code><code>-&gt;getUploadFileInfo();</code>

<code>print_r(J(__ROOT__.</code><code>'/'</code><code>.</code><code>$info</code><code>[0][</code><code>'savepath'</code><code>].</code><code>'/'</code><code>.</code><code>$info</code><code>[0][</code><code>'savename'</code><code>]));</code>

上傳成功以後，echo或者print_r輸出位址，因為他用的是ajax的方式。

預覽區域設定的代碼

<code>function</code> <code>uploadSuccess(file, serverData){</code>

<code>addImage(serverData);</code>

<code>var</code> <code>$svalue=$(</code><code>'form&gt;input[name=s]'</code><code>).val();</code>

<code>if</code><code>($svalue==</code><code>''</code><code>){</code>

<code>$(</code><code>'form&gt;input[name=s]'</code><code>).val(serverData);</code>

<code>}</code><code>else</code><code>{</code>

<code>$(</code><code>'form&gt;input[name=s]'</code><code>).val($svalue+</code><code>"|"</code><code>+serverData);</code>

<code>function</code> <code>addImage(src){</code>

<code>var</code> <code>newElement = </code><code>"&lt;li&gt;&lt;img class='content'  src='"</code> <code>+ src + </code><code>"' style=\"width:100px;height:100px;\"&gt;&lt;img class='button' src="</code><code>+window.path+</code><code>"/images/fancy_close.png&gt;&lt;/li&gt;"</code><code>;</code>

<code>$(</code><code>"#pic_list"</code><code>).append(newElement);</code>

<code>$(</code><code>"img.button"</code><code>).last().bind(</code><code>"click"</code><code>, del);</code>

serverData就是在php裡傳回的圖檔位址，在傳回以後，直接調用addImage方法，将位址加載到一個ul裡。同時更新隐藏域裡的值

删除圖檔設定

<code>var</code> <code>del = </code><code>function</code><code>(){</code>

<code>//    var fid = $(this).parent().prevAll().length + 1;</code>

<code>var</code> <code>src=$(</code><code>this</code><code>).siblings(</code><code>'img'</code><code>).attr(</code><code>'src'</code><code>);</code>

<code>$.ajax({</code>

<code>type: </code><code>"GET"</code><code>, </code><code>//通路WebService使用Post方式請求</code>

<code>url: window.url+</code><code>"/del"</code><code>, </code><code>//調用WebService的位址和方法名稱組合---WsURL/方法名</code>

<code>data: </code><code>"src="</code> <code>+ src,</code>

<code>success: </code><code>function</code><code>(data){</code>

<code>var</code> <code>$val=$svalue.replace(data,</code><code>''</code><code>);</code>

<code>$(</code><code>'form&gt;input[name=s]'</code><code>).val($val);</code>

<code>$(</code><code>this</code><code>).parent().remove();</code>

ajax方式，送出到php方式，成功則更新隐藏域裡的val，并且銷毀元素。

<code>function</code> <code>del() {</code>

<code>$src</code><code>=</code><code>str_replace</code><code>(__ROOT__.</code><code>'/'</code><code>, </code><code>''</code><code>, </code><code>str_replace</code><code>(</code><code>'//'</code><code>, </code><code>'/'</code><code>, </code><code>$_GET</code><code>[</code><code>'src'</code><code>]));</code>

<code>if</code> <code>(</code><code>file_exists</code><code>(</code><code>$src</code><code>)){</code>

<code>unlink(</code><code>$src</code><code>);</code>

<code>print_r(</code><code>$_GET</code><code>[</code><code>'src'</code><code>]);</code>

<code>exit</code><code>();</code>

删除的方法很簡單，就是删除ajax送出過來的位址的檔案，并且傳回删除的位址，ajax會處理并且自動更新隐藏域的val

整個ThinkPHP+swfupload上傳圖檔的方法就完了。很簡單。 ThinkPHP+swfupload多圖上傳執行個體下載下傳連結: http://pan.baidu.com/s/1dD8avap 密碼: 7idq

本文轉自 3147972 51CTO部落格，原文連結：http://blog.51cto.com/a3147972/1381136，如需轉載請自行聯系原作者