ThinkPHP+swfupload多圖上傳實(shí)例經(jīng)典實(shí)用的php多圖上傳
先上一張圖片給大家看看效果，有需要就下載學(xué)習(xí)。不一定非要在ThinkPHP里，只是我非常喜歡去用ThinkPHP做開發(fā)了。
創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站制作、網(wǎng)站建設(shè)、萬(wàn)年網(wǎng)絡(luò)推廣、成都小程序開發(fā)、萬(wàn)年網(wǎng)絡(luò)營(yíng)銷、萬(wàn)年企業(yè)策劃、萬(wàn)年品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供萬(wàn)年建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：jinyejixie.com
好了?，F(xiàn)在咱們需要的東西是，下載一個(gè)swfupload.js網(wǎng)上很多，自己百度吧.之前有人加我QQ說(shuō)我寫的博文大部分都是代碼,看不懂,我以后寫博文也先說(shuō)明思路,然后開始貼代碼分享
整個(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ù)庫(kù).(看需要)
好了。先寫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無(wú)刷新多圖片上傳</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_p_w_picpath_url : "__STYLE__/p_w_picpaths/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 >
<span id="spanButtonPlaceholder"></span>
<div id="divFileProgressContainer"></div>
<div id="thumbnails">
<ul id="pic_list" ></ul>
<div ></div>
</div>
</div>
<input type="hidden" name="s" id="" value=""/>
<input type="submit" value="提交" />
</form>
</body>
</html>詳細(xì)說(shuō)一下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)試模式
接下來(lái)就是上傳圖片的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+"/p_w_picpaths/fancy_close.png></li>";
$("#pic_list").append(newElement);
$("img.button").last().bind("click", del);
}serverData就是在php里返回的圖片地址，在返回以后，直接調(diào)用addImage方法，將地址加載到一個(gè)ul里。同時(shí)更新隱藏域里的值
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", //訪問(wèn)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提交過(guò)來(lái)的地址的文件，并且返回刪除的地址，ajax會(huì)處理并且自動(dòng)更新隱藏域的val整個(gè)ThinkPHP+swfupload上傳圖片的方法就完了。很簡(jiǎn)單。
<div></div>
當(dāng)前題目：ThinkPHP+swfupload多圖上傳實(shí)例經(jīng)典實(shí)用的php多圖上傳
瀏覽地址：http://jinyejixie.com/article48/ipiehp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、、軟件開發(fā)、ChatGPT、用戶體驗(yàn)、搜索引擎優(yōu)化
聲明：本網(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 挑選虛擬主機(jī)來(lái)做網(wǎng)站比較適宜 2023-04-10
- 哪的虛擬主機(jī)好？ 2022-07-20
- 怎么選擇好的便宜云虛擬主機(jī)？分享挑選便宜云虛擬主機(jī)的小技巧 2022-10-07
- 要買虛擬主機(jī)有什么原因？虛擬主機(jī)空間有什么用？ 2021-02-19
- 我理解的虛擬主機(jī) 2021-02-05
- 為你解決虛擬主機(jī)的疑惑？ 2022-06-13
- apache虛擬主機(jī)配置一例 2022-10-11
- 云服務(wù)器和虛擬主機(jī)的區(qū)別是什么？什么是云服務(wù)器？ 2022-10-22
- 虛擬主機(jī)哪家好 2022-07-23
- 云虛擬主機(jī)如何使用？ 2022-10-09
- 網(wǎng)站使用獨(dú)立IP虛擬主機(jī)有什么好處 2017-06-05
- 為什么說(shuō)虛擬主機(jī)已經(jīng)無(wú)法滿足網(wǎng)站建設(shè)運(yùn)營(yíng)需求 2022-05-24