Dieser Artikel stellt hauptsächlich die Methode von PHP vor, um mehrere hochgeladene Bilder sofort anzuzeigen und sofort zu löschen. Er analysiert die Betriebsfähigkeiten von PHP zum Anzeigen, Hochladen und Löschen von Bilddateien in Form von Beispielen.
Das Beispiel in diesem Artikel beschreibt die Methode von PHP, um die sofortige Anzeige und sofortige Löschung mehrerer hochgeladener Bilder zu implementieren. Teilen Sie es als Referenz mit allen:
Jedes Mal, wenn Sie ein Bild auswählen, wird es sofort angezeigt und rechts angehängt . Sie können ein Element auch nach Belieben löschen.
In der Tat, wenn das Onchange-Ereignis des Eingabefelds vom Typ=Datei===》》》die Postdaten an das versteckte IFRAM (Zielspezifikation des Formularformulars)===》》》übermitteln Post-Daten werden empfangen. Geben Sie das Skript-Tag direkt wieder, um Daten an die Front-End-Seite zurückzugeben und einen Wert zuzuweisen, und speichern Sie dann den Bildpfad mithilfe ausgeblendeter Felder:
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>Nach dem Login kopieren
Controller (gibt den Pfad des ausgewählten Bildes (bereits hochgeladen) auf dem Server zurück):
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>";
}
}
}Nach dem Login kopieren
Die eigentliche Funktion, die schließlich die Formulardaten empfängt und in der Datenbank speichert:
public function add_journal(){
if(IS_POST){
var_dump($_POST);die;
}else{
$this->display();
}
}Nach dem Login kopieren
Verwandte Empfehlungen:
Javascript - Mobile Wap-Site h5Mehrere Bilder hochladenDie Bildfunktion kann im UC-Browser nicht mehrere Bilder auswählen. Wie kann ich das Problem lösen?
Mobile Wap-Station h5Mehrere Bilder hochladenDie Bildfunktion kann im UC-Browser nicht mehrere Bilder auswählen. Wie kann ich das Problem lösen?
jquery - php Mehrere Bilder hochladenBeschreiben Sie jedes Bild nach dem Bild und speichern Sie es in MySQL
Das obige ist der detaillierte Inhalt vonSo zeigen Sie mehrere mit PHP hochgeladene Bilder sofort an und löschen sie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
