Cet article présente principalement la méthode PHP pour obtenir un affichage instantané et une suppression instantanée de plusieurs images téléchargées. Il analyse les techniques de fonctionnement de PHP pour prévisualiser, télécharger et supprimer des fichiers image sous forme d'exemples. 🎜>
L'exemple de cet article décrit la méthode PHP pour réaliser l'affichage instantané et la suppression instantanée de plusieurs images téléchargées. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Juste comme ça, chaque fois que vous sélectionnez une image, elle sera affichée immédiatement et attachée à droite. . Vous pouvez également supprimer un élément à volonté.
En fait, lorsque l'événement onchange de la zone de saisie de type=file===》》》post data est soumis à l'ifram caché (spécification cible du formulaire)===》》》post les données sont reçues Faites directement écho à la balise de script pour renvoyer les données à la page frontale et attribuer une valeur, puis stockez le chemin de l'image à l'aide de champs masqués :
HTML :
<!doctype html>
<html lang="cn">
<include file="Public/head"/>
<body>
<include file="Public/nav"/>
<iframe name="upload_url" style="display:none"></iframe>
<p class="wlog">
<p class="wlog_t cf">
<b>写日志</b>
</p>
<p class="wlog_c">
<form class="cf" id="myform" target="" enctype="multipart/form-data" action="" method="post">
<p class="wlog_l">
<textarea id="content" name="data[content]"></textarea>
<input type="hidden" id="step" value="1" name="data[step]" />
</p>
<p class="wlog_r">
<h2>选择装修阶段</h2>
<b class="cur" mine="1" style="line-height:20px;">准备开工</b>
<b mine="2" >水电</b>
<b mine="3">泥木</b>
<b mine="4">油漆</b>
<b mine="5">竣工</b>
<b mine="6">软装</b>
<!-- <input type="hidden" value="准备开工"> -->
</p>
<p class="wlog_f cf">
<h2><b>上传图片</b>选择装修过程中的照片，每张低于5M，支持JPG/JPEG/PNG格式，最多9张</h2>
<p class="wlog_p cf">
<a href="javascript:;" rel="external nofollow" ><img src="__PUBLIC__/home/images/2016-10-29_231703.png" alt=""><input onchange="submitimg()" type="file" name="thumb"/></a>
<p id="addimg"></p>
<!-- <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b>
<b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b>
<b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b>
<b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b>
<b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b>
<b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b>
<b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b>
<b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b> -->
</p>
</p>
<p class="wlog_sm"><input type="botton" onclick="return goods_form_submit()" readonly="readonly" value="发布日志"></p>
</form>
</p>
</p>
<include file="Public/footer"/>
<script type="text/javascript">
function submitimg(){
$("#myform").attr('target','upload_url');
$("#myform").attr('action',"{:U('Journal/submitimg')}");
$("#myform").submit();
}
function goods_form_submit()
{
if(!$('#content').val()){
alert('请填写日志');
return false;
}
$('#myform').attr('target','');
$('#myform').attr('action','');
$('#myform').submit();
}
function callblack_img(path,uid)
{ var html="";
var dir = "{:C(FILE_PATH)}";
var html ='<b><img src='+dir+path+'><i>x</i><input type="hidden" value="'+path+'" name="thumb['+uid+']"></b>';
$('#addimg').append(html);
}
</script>
<script type="text/javascript" src="__PUBLIC__/home/js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/home/js/basis.js"></script>
<script>
$(function(){
$('.wlog_r b').click(function(event) {
$(this).addClass('cur').siblings('b').removeClass('cur');
$('.wlog_r input[type=hidden]').val($(this).text());
});
$("#addimg").delegate("i","click",function () {
$(this).parent("b").remove();
})
})
$("b").click(function(){
var value =$(this).attr('mine');
$("#step").val(value);
})
</script>
</body>
</html>Copier après la connexion
Contrôleur (renvoie le chemin de l'image sélectionnée (déjà téléchargée) dans le serveur) :
public function submitimg(){
if(IS_POST){
$data = I('post.data');//获取post数据
$res = fab_upload($_FILES);//上传文件
$uid=uniqid();
$res=$res['thumb'];
if($res){
echo "<script>parent.callblack_img('{$res}','{$uid}');</script>";
}
}
}Copier après la connexion
La vraie fonction qui reçoit finalement les données du formulaire et les stocke dans la base de données :
public function add_journal(){
if(IS_POST){
var_dump($_POST);die;
}else{
$this->display();
}
}Copier après la connexion
Recommandations associées :
javascript - site wap mobile h5Télécharger plusieurs imagesLa fonction d'image ne peut pas sélectionner plusieurs images dans le navigateur UC, comment pour le résoudre ?
Station wap mobile h5Télécharger plusieurs imagesLa fonction image ne peut pas sélectionner plusieurs images dans le navigateur UC, comment le résoudre ?
jquery - php Télécharger plusieurs imagesDécrivez chaque image après l'image et enregistrez-la sur MySQL
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
