Home >Backend Development >PHP Problem >How to upload multiple images in php
How to upload multiple images in php
- 藏色散人Original
- 2021-11-01 09:21:063430browse
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.
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.
[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='__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>
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('ORG.Net.UploadFile');
$upload = new UploadFile();// 实例化上传类
$upload->maxSize = 3145728 ;// 设置附件上传大小
$upload->allowExts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$savepath='./uploads/'.date('Ymd').'/';
if (!file_exists($savepath)){
mkdir($savepath);
}
$upload->savePath = $savepath;// 设置附件上传目录
if(!$upload->upload()) {// 上传错误提示错误信息
$this->error($upload->getErrorMsg());
}else{// 上传成功 获取上传文件信息
$info = $upload->getUploadFileInfo();
}
print_r(J(__ROOT__.'/'.$info[0]['savepath'].'/'.$info[0]['savename']));
}
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=$('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;\" alt="How to upload multiple images in php" ><img class='button' 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);
}
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('img').attr('src');
var $svalue=$('form>input[name=s]').val();
$.ajax({
type: "GET", //访问WebService使用Post方式请求
url: window.url+"/del", //调用WebService的地址和方法名称组合---WsURL/方法名
data: "src=" + src,
success: function(data){
var $val=$svalue.replace(data,'');
$('form>input[name=s]').val($val);
}
});
$(this).parent().remove();
}
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__.'/', '', str_replace('//', '/', $_GET['src']));
if (file_exists($src)){
unlink($src);
}
print_r($_GET['src']);
exit();
}
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!