本篇內(nèi)容介紹了“php實(shí)現(xiàn)多圖上傳的方法是什么”的有關(guān)知識(shí),在實(shí)際案例的操作過程中,不少人都會(huì)遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
10年積累的網(wǎng)站制作、成都網(wǎng)站制作經(jīng)驗(yàn),可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你,你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程,更有赤壁免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
php實(shí)現(xiàn)多圖上傳的方法:1、創(chuàng)建html代碼并加載swfupload組件和flash;2、在php里處理上傳并且返回上傳圖片的地址;3、通過ajax調(diào)用php;4、把圖片的地址保存到數(shù)據(jù)庫即可。
本文操作環(huán)境:Windows7系統(tǒng)、thinkphp v5.1版、DELL G3電腦
php怎么實(shí)現(xiàn)多圖上傳?
php實(shí)現(xiàn)多圖上傳的方法:
先上一張圖片給大家看看效果,有需要就下載學(xué)習(xí)。不一定非要在ThinkPHP里,只是我目前是去學(xué)習(xí)使用ThinkPHP做開發(fā)罷了。
【準(zhǔn)備工作】現(xiàn)在需要的東西是,下載一個(gè)swfupload.js網(wǎng)上很多,自己百度吧。先說明思路或流程,然后再上代碼。
整個(gè)多圖上傳的流程
1.寫好html代碼,包括上傳以后即顯示的效果的html代碼,以及加載swfupload組件和flash
2.在添加圖片以后上傳到php里處理上傳并且返回上傳圖片的地址,加載到預(yù)覽區(qū)域里。
3.點(diǎn)擊每張圖片右上角的 X 以后,ajax調(diào)用php的方法去刪除預(yù)覽區(qū)域的圖片。
4.在添加圖片和刪除預(yù)覽區(qū)域的圖片的同時(shí),都會(huì)更改一個(gè)隱藏域的值,這樣在完成整個(gè)上傳提交表單以后可以把圖片的地址保存到數(shù)據(jù)庫。(看需要)
【代碼部分】先寫html代碼。(css文件就不貼了)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Cache-control" content="private, must-revalidate" /> <title>flash無刷新多圖片上傳</title> <script type="text/javascript"> var path='__STYLE__'; var url='__URL__'; </script> <script type="text/javascript" src="__STYLE__/js/jquery.js"></script> <script type="text/javascript" src="__STYLE__/js/swfupload.js"></script> <script type="text/javascript" src="__STYLE__/js/handlers.js"></script> <link href="__STYLE__/css/default.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var swfu; window.onload = function () { swfu = new SWFUpload({ upload_url: "__URL__/uploadImg", post_params: {"PHPSESSID": "<?php echo session_id();?>"}, file_size_limit : "2 MB", file_types : "*.jpg;*.png;*.gif;*.bmp", file_types_description : "JPG Images", file_upload_limit : "100", file_queue_error_handler : fileQueueError, file_dialog_complete_handler : fileDialogComplete, upload_progress_handler : uploadProgress, upload_error_handler : uploadError, upload_success_handler : uploadSuccess, upload_complete_handler : uploadComplete, button_image_url : "__STYLE__/images/upload.png", button_placeholder_id : "spanButtonPlaceholder", button_width: 113, button_height: 33, button_text : '', button_text_style : '.spanButtonPlaceholder { font-family: Helvetica, Arial, sans-serif; font-size: 14pt;} ', button_text_top_padding: 0, button_text_left_padding: 0, button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT, button_cursor: SWFUpload.CURSOR.HAND, flash_url : "__STYLE__/swf/swfupload.swf", custom_settings : { upload_target : "divFileProgressContainer" }, debug: false }); }; </script> </head> <body> <form action="__URL__/s" method="post"> <div style="width: 610px; height: auto; border: 1px solid #e1e1e1; font-size: 12px; padding: 10px;"> <span id="spanButtonPlaceholder"></span> <div id="divFileProgressContainer"></div> <div id="thumbnails"> <ul id="pic_list" style="margin: 5px;"></ul> <div style="clear: both;"></div> </div> </div> <input type="hidden" name="s" id="" value=""/> <input type="submit" value="提交" /> </form> </body> </html>
詳細(xì)說一下swfupload的配置項(xiàng)
upload_url 是上傳圖片處理的php地址
file_size_limit 上傳大小限制
file_upload_limit 限制用戶一次性最多上傳多少?gòu)垐D片,0為不限制
file_queue_error_handler
file_dialog_complete_handler 添加文件上傳選擇框關(guān)閉以后執(zhí)行的方法
upload_error_handler 文件上傳錯(cuò)誤的時(shí)候執(zhí)行的方法
upload_success_handler 文件上傳成功以后執(zhí)行的方法
upload_complete_handler 文件上傳完成以后執(zhí)行的方法
debug: false 想研究swfupload的可以把這個(gè)設(shè)置為true,調(diào)試模式
接下來就是上傳圖片的php代碼,此處用的TP的上傳類,簡(jiǎn)單,容易懂
function uploadImg() { import('ORG.Net.UploadFile'); $upload = new UploadFile();// 實(shí)例化上傳類 $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()) {// 上傳錯(cuò)誤提示錯(cuò)誤信息 $this->error($upload->getErrorMsg()); }else{// 上傳成功 獲取上傳文件信息 $info = $upload->getUploadFileInfo(); } print_r(J(__ROOT__.'/'.$info[0]['savepath'].'/'.$info[0]['savename'])); }
上傳成功以后,echo或者print_r輸出地址,因?yàn)樗玫氖莂jax的方式。
預(yù)覽區(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 = "<li><img class='content' src='" + src + "' style=\"width:100px;height:100px;\"><img class='button' src="+window.path+"/images/fancy_close.png></li>"; $("#pic_list").append(newElement); $("img.button").last().bind("click", del); }
serverData就是在php里返回的圖片地址,在返回以后,直接調(diào)用addImage方法,將地址加載到一個(gè)ul里。同時(shí)更新隱藏域里的值
刪除圖片設(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方式請(qǐng)求 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(); }
刪除的方法很簡(jiǎn)單,就是刪除ajax提交過來的地址的文件,并且返回刪除的地址,ajax會(huì)處理并且自動(dòng)更新隱藏域的val
“php實(shí)現(xiàn)多圖上傳的方法是什么”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
文章標(biāo)題:php實(shí)現(xiàn)多圖上傳的方法是什么
當(dāng)前地址:http://chinadenli.net/article20/gesjco.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供服務(wù)器托管、網(wǎng)站營(yíng)銷、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站收錄、定制網(wǎng)站、網(wǎng)頁設(shè)計(jì)公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)