PHPを使用して複数の画像をアップロードして即時表示および即時削除する方法
- 墨辰丷オリジナル
- 2018-05-22 15:59:341526ブラウズ
この記事では、アップロードされた複数の画像の即時表示と即時削除を実現するための PHP の方法を主に紹介し、画像ファイルのプレビュー、アップロード、削除に関する PHP の関連操作スキルをサンプルの形式で分析します。この記事では、アップロードされた複数の画像の即時表示と即時削除を実現するためのPHPメソッドを開発した例について説明します。参考のためにみんなと共有してください。詳細は次のとおりです:
このように、写真を選択するたびに、すぐに表示されて右側に添付され、要素を自由に削除することもできます。
実際には、type=file===》》》投稿データの入力ボックスのonchangeイベントを隠しifram（フォームフォームのターゲット指定）===》》》ダイレクトエコースクリプトタグに送信すると、投稿データを受け取ります フロントエンド ページにデータを返し、値を割り当て、画像パスを保存するには、隠しフィールドを使用して実装することもできます。サーバー パス上の選択された画像 (アップロード済み) を返します):
<!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>最終的にフォーム データを受信してデータベースに保存する実際の関数:
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>";
}
}
}
関連する推奨事項:
javascript - Mobile wap station h5さらにアップロード UC Browser の画像
機能で複数の画像を選択できません。どうすれば解決しますか?モバイルwapステーションh5
複数の写真をアップロードUCブラウザの写真機能で複数の写真を選択できません、どうすれば解決しますか？
jquery - php複数の写真をアップロード写真の後に各写真を記述してmysqlに保存します
以上がPHPを使用して複数の画像をアップロードして即時表示および即時削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。