PHP에서 여러 이미지를 업로드하는 방법-PHP 문제-php.cn

집

백엔드 개발

PHP 문제

PHP에서 여러 이미지를 업로드하는 방법

藏色散人

Nov 01, 2021 am 09:21 AM

php

PHP에서 다중 이미지 업로드를 구현하는 방법: 1. HTML 코드를 생성하고 swfupload 구성 요소 및 플래시를 로드합니다. 2. PHP에서 업로드를 처리하고 업로드된 이미지의 주소를 반환합니다. 3. ajax를 통해 PHP를 호출합니다. 이미지의 주소 데이터베이스로 이동하세요.

PHP에서 여러 이미지를 업로드하는 방법

이 기사의 운영 환경: Windows 7 시스템, thinkphp v5.1 버전, DELL G3 컴퓨터

PHP로 여러 이미지를 업로드하는 방법은 무엇입니까?

PHP에서 여러 장의 사진을 업로드하는 방법:

먼저 효과를 보여주기 위해 사진을 업로드하고 필요한 경우 다운로드하여 학습하세요. ThinkPHP에 있을 필요는 없습니다. 단지 제가 현재 개발을 위해 ThinkPHP를 사용하는 방법을 배우고 있다는 것뿐입니다.

PHP에서 여러 이미지를 업로드하는 방법

[준비] 지금 필요한 것은 Baidu에서 직접 다운로드하는 것입니다. 먼저 아이디어나 프로세스를 설명하고 코드를 추가하세요.

다중 이미지 업로드 전체 과정

1. 업로드 후 표시될 효과에 대한 html 코드를 포함하여 html 코드를 작성하고 swfupload 구성 요소 및 플래시를 로드합니다

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 파일 업로드가 완료된 후 실행됩니다. 메소드

debug: false swfupload를 공부하고 싶다면 이것을 디버그 모드로 설정할 수 있습니다

다음 단계는 이미지 업로드를 위한 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/imghw/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/imghw/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 메서드에 제출하고, 성공하면 숨겨진 필드의 값을 업데이트하고 요소를 삭제합니다.

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();
}