php怎麼實作多圖上傳-PHP問題-PHP中文網

首頁

後端開發

PHP問題

php怎麼實作多圖上傳

藏色散人

Nov 01, 2021 am 09:21 AM

php

php實作多圖上傳的方法：1、建立html程式碼並載入swfupload元件和flash；2、在php裡面處理上傳並且回傳上傳圖片的位址；3、透過ajax呼叫php；4、把圖片的地址保存到資料庫即可。

php怎麼實作多圖上傳

本文操作環境：Windows7系統、thinkphp v5.1版、DELL G3電腦

php怎麼實作多圖上傳？

php實作多圖上傳的方法：

先上一張圖片給大家看看效果，有需要就下載學習。不一定要在ThinkPHP裡，只是我目前是去學習使用ThinkPHP做開發罷了。

php怎麼實作多圖上傳

【準備工作】現在需要的東西是，下載一個swfupload.js網路上很多，自己百度吧。先說明想法或流程，然後再上程式碼。

整個多圖上傳的流程

1.寫好html程式碼，包含上傳以後即顯示的效果的html程式碼，以及載入swfupload元件和flash

2.在新增圖片以後上傳到php裡處理上傳並且回到上傳圖片的地址，載入到預覽區域。

3.點選每張圖片右上角的 X 以後，ajax呼叫php的方法去刪除預覽區域的圖片。

4.在新增圖片和刪除預覽區域的圖片的同時，都會更改一個隱藏域的值，這樣在完成整個上傳提交表單以後可以把圖片的地址保存到資料庫。 (看需要)

【程式碼部分】先寫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=&#39;__STYLE__&#39;;
var url=&#39;__URL__&#39;;
</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 : &#39;&#39;,
button_text_style : &#39;.spanButtonPlaceholder { font-family: Helvetica, Arial, sans-serif; font-size: 14pt;} &#39;,
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>

詳細說明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 檔案上傳成功以後執行的方法

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

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

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

function uploadImg() {
import(&#39;ORG.Net.UploadFile&#39;);
$upload = new UploadFile();// 实例化上传类
$upload->maxSize  = 3145728 ;// 设置附件上传大小
$upload->allowExts  = array(&#39;jpg&#39;, &#39;gif&#39;, &#39;png&#39;, &#39;jpeg&#39;);// 设置附件上传类型
$savepath=&#39;./uploads/&#39;.date(&#39;Ymd&#39;).&#39;/&#39;;
if (!file_exists($savepath)){
mkdir($savepath);
}
$upload->savePath =  $savepath;// 设置附件上传目录
if(!$upload->upload()) {// 上传错误提示错误信息
$this->error($upload->getErrorMsg());
}else{// 上传成功 获取上传文件信息
$info =  $upload->getUploadFileInfo();
}
print_r(J(__ROOT__.&#39;/&#39;.$info[0][&#39;savepath&#39;].&#39;/&#39;.$info[0][&#39;savename&#39;]));
}

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

預覽區域設定的程式碼

function uploadSuccess(file, serverData){
addImage(serverData);
var $svalue=$(&#39;form>input[name=s]&#39;).val();
if($svalue==&#39;&#39;){
$(&#39;form>input[name=s]&#39;).val(serverData);
}else{
$(&#39;form>input[name=s]&#39;).val($svalue+"|"+serverData);
}
}
function addImage(src){
var newElement = "<li><img  src="/static/imghwm/default1.png"  data-src="+window.path+"  class="lazy"  class=&#39;content&#39;  src=&#39;" + src + "&#39; style=\"width:100px;height:100px;\" alt="php怎麼實作多圖上傳" ><img  src="/static/imghwm/default1.png"  data-src="+window.path+"  class="lazy"  class=&#39;button&#39; /images/fancy_close.png alt="php怎麼實作多圖上傳" ></li>";
$("#pic_list").append(newElement);
$("img.button").last().bind("click", del);
}

serverData就是在php裡傳回的圖片位址，在回傳以後，直接呼叫addImage方法，將地址載入到一個ul裡。同時更新隱藏域裡的值

刪除圖片設定

var del = function(){
//    var fid = $(this).parent().prevAll().length + 1;
var src=$(this).siblings(&#39;img&#39;).attr(&#39;src&#39;);
var $svalue=$(&#39;form>input[name=s]&#39;).val();
$.ajax({
type: "GET", //访问WebService使用Post方式请求
url: window.url+"/del", //调用WebService的地址和方法名称组合---WsURL/方法名
data: "src=" + src,
success: function(data){
var $val=$svalue.replace(data,&#39;&#39;);
$(&#39;form>input[name=s]&#39;).val($val);
}
});
$(this).parent().remove();
}

#ajax方式，提交到php方式，成功則更新隱藏域裡的val，並且銷毀元素。

function del() {
$src=str_replace(__ROOT__.&#39;/&#39;, &#39;&#39;, str_replace(&#39;//&#39;, &#39;/&#39;, $_GET[&#39;src&#39;]));
if (file_exists($src)){
unlink($src);
}
print_r($_GET[&#39;src&#39;]);
exit();
}

刪除的方法很簡單，就是刪除ajax提交過來的地址的文件，並且返回刪除的地址，ajax會處理並且自動更新隱藏域的val

整個ThinkPHP swfupload上傳圖片的方法就完成了，很簡單~推薦學習：《

PHP影片教學###》###

以上是php怎麼實作多圖上傳的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn