How to upload multiple images in php-PHP Problem-php.cn

php method to implement multi-image upload: 1. Create html code and load swfupload component and flash; 2. Process the upload in php and return the address of the uploaded image; 3. Call php through ajax; 4. Just save the image address to the database.

How to upload multiple images in php

The operating environment of this article: Windows7 system, thinkphp v5.1 version, DELL G3 computer

How does php achieve multiple image uploads?

How to upload multiple pictures in php:

First upload a picture to show the effect. If necessary, download it and learn. It doesn’t have to be in ThinkPHP, it’s just that I’m currently learning to use ThinkPHP for development.

How to upload multiple images in php

[Preparation] What you need now is to download a swfupload.js. There are many online. Baidu. Explain the idea or process first, and then add the code.

The entire multi-image upload process

1. Write the html code, including the html code for the effect that will be displayed after uploading, and loading the swfupload component and flash

2. After adding the image, upload it to php to process the upload and return the address of the uploaded image, and load it into the preview area.

3. After clicking the X in the upper right corner of each picture, ajax calls the php method to delete the picture in the preview area.

4. When adding pictures and deleting pictures in the preview area, the value of a hidden field will be changed, so that the address of the picture can be saved to the database after completing the entire upload submission form. (Depending on need)

[Code part] Write the html code first. (The css file will not be posted)

<!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>

Copy after login

Let’s talk about the configuration items of swfupload in detail

upload_url is the php address for uploading image processing

file_size_limit Upload size limit

file_upload_limit Limits how many pictures a user can upload at one time, 0 means no limit

file_queue_error_handler

file_dialog_complete_handler After the file upload selection box is closed, it is added Method of execution

upload_error_handler Method of execution when file upload error

upload_success_handler Method of execution after file upload is successful

upload_complete_handler Method of execution after file upload is completed

debug: false If you want to study swfupload, you can set this to true, debug mode

The next step is the php code for uploading images. The TP upload class used here is simple and easy to understand

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

Copy after login

After the upload is successful, echo or print_r outputs the address because it uses ajax.

Preview regional setting code

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  class=&#39;content&#39;  src=&#39;" + src + "&#39; style=\"width:100px;height:100px;\" alt="How to upload multiple images in php" ><img  class=&#39;button&#39; src="+window.path+"/images/fancy_close.png alt="How to upload multiple images in php" ></li>";
$("#pic_list").append(newElement);
$("img.button").last().bind("click", del);
}

Copy after login

serverData is the image address returned in php. After returning, directly call the addImage method to add The address is loaded into a ul. Update the value in the hidden field at the same time

Delete image settings

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

Copy after login

ajax method, submit to php method, if successful, update the val in the hidden field, and destroy the element.

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

Copy after login

The deletion method is very simple, that is, delete the file with the address submitted by ajax, and return the deleted address. Ajax will process and automatically update the val of the hidden field

The entire ThinkPHP swfupload method of uploading images is completed, it is very simple~

Recommended learning: "PHP Video Tutorial"

The above is the detailed content of How to upload multiple images in php. For more information, please follow other related articles on the PHP Chinese website!