cari

Rumah >pembangunan bahagian belakang >masalah PHP >Bagaimana untuk memuat naik berbilang imej dalam php

Bagaimana untuk memuat naik berbilang imej dalam php

藏色散人
藏色散人asal
2021-11-01 09:21:063431semak imbas

Cara melaksanakan muat naik berbilang imej dalam PHP: 1. Buat kod HTML dan muatkan komponen swfupload dan kilat 2. Proses muat naik dalam PHP dan kembalikan alamat imej yang dimuat naik; ; 4. Simpan sahaja alamat imej ke pangkalan data.

Bagaimana untuk memuat naik berbilang imej dalam php

Persekitaran pengendalian artikel ini: sistem Windows 7, versi thinkphp v5.1, komputer DELL G3

Cara untuk memuat naik berbilang imej dengan php?

Cara memuat naik berbilang gambar dalam PHP:

Mula-mula muat naik gambar untuk menunjukkan kesannya, jika perlu, muat turun dan pelajari. Ia tidak semestinya dalam ThinkPHP, cuma saya sedang belajar menggunakan ThinkPHP untuk pembangunan.

Bagaimana untuk memuat naik berbilang imej dalam php

[Persediaan] Apa yang anda perlukan sekarang ialah memuat turun swfupload.js Terdapat banyak di Internet Anda boleh menggunakan Baidu sendiri. Terangkan idea atau proses dahulu, dan kemudian tambah kod.

Keseluruhan proses muat naik berbilang imej

1. Tulis kod html, termasuk kod html untuk kesan yang akan dipaparkan selepas memuat naik, dan memuatkan komponen swfupload dan kilat

2. Selepas menambah imej, muat naik ke php untuk memproses muat naik dan mengembalikan alamat imej yang dimuat naik, dan memuatkannya ke dalam kawasan pratonton.

3. Selepas mengklik X di sudut kanan atas setiap gambar, ajax memanggil kaedah php untuk memadam gambar dalam kawasan pratonton.

4. Apabila menambah gambar dan memadam gambar dalam kawasan pratonton, nilai medan tersembunyi akan ditukar, supaya alamat gambar boleh disimpan ke pangkalan data selepas melengkapkan keseluruhan borang penyerahan muat naik. (Bergantung kepada keperluan)

[Bahagian kod] Tulis kod html dahulu. (Fail css tidak akan disiarkan) 

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

Mari kita bercakap tentang item konfigurasi swfupload secara terperinci

upload_url ialah php alamat untuk memuat naik pemprosesan imej

had_saiz_failHad saiz_muat naik

had_muat naik_fail Hadkan bilangan gambar yang boleh dimuat naik oleh pengguna pada satu masa, 0 bermakna tiada had

fail_queue_error_handler

file_dialog_complete_handler Tambah kotak pilihan muat naik fail Kaedah untuk dilaksanakan selepas ditutup

upload_error_handler Kaedah untuk dilaksanakan apabila ralat muat naik fail berlaku

upload_success_handler Kaedah untuk dilaksanakan selepas muat naik fail berjaya

upload_complete_handler Kaedah untuk dilaksanakan selepas muat naik fail selesai

debug: false Jika anda ingin mengkaji swfupload, anda boleh menetapkan ini kepada benar dalam mod nyahpepijat

Langkah seterusnya ialah kod php untuk memuat naik imej. Kelas muat naik TP yang digunakan di sini adalah mudah dan mudah difahami

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

Selepas muat naik berjaya, bergema atau print_r mengeluarkan alamat kerana ia menggunakan ajax.

Pratonton kod setempat

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="Bagaimana untuk memuat naik berbilang imej dalam php" ><img  class=&#39;button&#39; src="+window.path+"/images/fancy_close.png alt="Bagaimana untuk memuat naik berbilang imej dalam php" ></li>";
$("#pic_list").append(newElement);
$("img.button").last().bind("click", del);
}

serverData ialah alamat imej yang dikembalikan dalam php Selepas kembali, hubungi terus kaedah addImage , muatkan alamat ke dalam ul. Pada masa yang sama, kemas kini nilai dalam medan tersembunyi

Padam tetapan imej

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

Kaedah Ajax, serahkan kepada kaedah php, jika berjaya, kemas kini val dalam medan tersembunyi dan memusnahkannya elemen. 

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

Kaedah pemadaman adalah sangat mudah, iaitu memadam fail dengan alamat yang dihantar oleh ajax dan mengembalikan alamat yang dipadamkan akan memproses dan mengemas kini val secara automatik medan tersembunyi

Keseluruhan kaedah swfupload ThinkPHP untuk memuat naik imej selesai, sangat mudah~

Pembelajaran yang disyorkan: "Tutorial Video PHP "

Atas ialah kandungan terperinci Bagaimana untuk memuat naik berbilang imej dalam php. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

php css ajax html thinkphp echo JS ul 数据库
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk menukar fail teks ke kelas tatasusunan dalam phpArtikel seterusnya：Bagaimana untuk menukar fail teks ke kelas tatasusunan dalam php

Artikel berkaitan

Lihat lagi