先上一張圖片給大家看看效果,有需要就下載學習。不一定非要在ThinkPHP里,只是我非常喜歡去用ThinkPHP做開發(fā)了。
創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務,包含不限于網(wǎng)站制作、網(wǎng)站建設(shè)、萬年網(wǎng)絡推廣、成都小程序開發(fā)、萬年網(wǎng)絡營銷、萬年企業(yè)策劃、萬年品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等,從售前售中售后,我們都將竭誠為您服務,您的肯定,是我們最大的嘉獎;創(chuàng)新互聯(lián)建站為所有大學生創(chuàng)業(yè)者提供萬年建站搭建服務,24小時服務熱線:18980820575,官方網(wǎng)址:www.cdcxhl.com
好了?,F(xiàn)在咱們需要的東西是,下載一個swfupload.js網(wǎng)上很多,自己百度吧.之前有人加我QQ說我寫的博文大部分都是代碼,看不懂,我以后寫博文也先說明思路,然后開始貼代碼分享
整個多圖上傳的流程
1.寫好html代碼,包括上傳以后顯示的效果的html,以及加載swfupload組件.和flash
2.在添加圖片以后上傳到php里處理上傳并且返回上傳圖片的地址,加載到預覽區(qū)域里.
3.點擊X以后,ajax調(diào)用php的方法去刪除預覽區(qū)域的圖片.
4.在添加圖片和刪除預覽區(qū)域的圖片的同時,都會更改一個隱藏域的值,這樣在完成整個上傳提交表單以后可以把圖片的地址保存到數(shù)據(jù)庫.(看需要)
好了。先寫html代碼吧。(css文件我就不貼了)
flash無刷新多圖片上傳
詳細說一下swfupload的配置項
upload_url 是上傳圖片處理的php地址
file_size_limit 上傳大小限制
file_upload_limit 限制用戶一次性最多上傳多少張圖片,0為不限制
file_queue_error_handler
file_dialog_complete_handler 添加文件上傳選擇框關(guān)閉以后執(zhí)行的方法
upload_error_handler 文件上傳錯誤的時候執(zhí)行的方法
upload_success_handler 文件上傳成功以后執(zhí)行的方法
upload_complete_handler 文件上傳完成以后執(zhí)行的方法
debug: false 想研究swfupload的可以把這個設(shè)置為true,調(diào)試模式
接下來就是上傳圖片的php代碼,我就用的TP的上傳類,簡單,容易懂
function uploadImg() { import('ORG.Net.UploadFile'); $upload = new UploadFile();// 實例化上傳類 $upload->maxSize = 3145728 ;// 設(shè)置附件上傳大小 $upload->allowExts = array('jpg', 'gif', 'png', 'jpeg');// 設(shè)置附件上傳類型 $savepath='./uploads/'.date('Ymd').'/'; if (!file_exists($savepath)){ mkdir($savepath); } $upload->savePath = $savepath;// 設(shè)置附件上傳目錄 if(!$upload->upload()) {// 上傳錯誤提示錯誤信息 $this->error($upload->getErrorMsg()); }else{// 上傳成功 獲取上傳文件信息 $info = $upload->getUploadFileInfo(); } print_r(J(__ROOT__.'/'.$info[0]['savepath'].'/'.$info[0]['savename'])); }
上傳成功以后,echo或者print_r輸出地址,因為他用的是ajax的方式。
預覽區(qū)域設(shè)置的代碼
function uploadSuccess(file, serverData){ addImage(serverData); var $svalue=$('form>input[name=s]').val(); if($svalue==''){ $('form>input[name=s]').val(serverData); }else{ $('form>input[name=s]').val($svalue+"|"+serverData); } } function addImage(src){ var newElement = ""; $("#pic_list").append(newElement); $("img.button").last().bind("click", del); }
serverData就是在php里返回的圖片地址,在返回以后,直接調(diào)用addImage方法,將地址加載到一個ul里。同時更新隱藏域里的值
http://pan.baidu.com/s/1i4gOR2H 密碼:sewg
刪除圖片設(shè)置
var del = function(){ // var fid = $(this).parent().prevAll().length + 1; var src=$(this).siblings('img').attr('src'); var $svalue=$('form>input[name=s]').val(); $.ajax({ type: "GET", //訪問WebService使用Post方式請求 url: window.url+"/del", //調(diào)用WebService的地址和方法名稱組合---WsURL/方法名 data: "src=" + src, success: function(data){ var $val=$svalue.replace(data,''); $('form>input[name=s]').val($val); } }); $(this).parent().remove(); }
ajax方式,提交到php方式,成功則更新隱藏域里的val,并且銷毀元素。
function del() { $src=str_replace(__ROOT__.'/', '', str_replace('//', '/', $_GET['src'])); if (file_exists($src)){ unlink($src); } print_r($_GET['src']); exit(); }
刪除的方法很簡單,就是刪除ajax提交過來的地址的文件,并且返回刪除的地址,ajax會處理并且自動更新隱藏域的val整個ThinkPHP+swfupload上傳圖片的方法就完了。很簡單。