实现上传多张图片即时显示和即时删除的PHP方法

阐述了用PHP实时显示和删除上传的多幅图像的方法。分享给大家参考，如下：

就像这样，每次选择一张图片，就会立刻显示出来，贴在右边，或者可以随意删除一个元素。

实际上，当type=file=="""post数据的输入帧的onchange事件提交到隐藏的ifram(由ifram(form)==="的目标指定)时，接收post数据的直接回显脚本标记将数据返回到前端页面并赋值，然后存储图片路径也是用隐藏字段实现的：

HTML:

！doctype html html lang=' cn ' include file=' Public/head '/body include file=' Public/nav '/iframe name=' upload _ URL ' style=' display : none '/iframe div class=' wlog ' div class=' wlog _ t cf '写日志/div class=' wlog _ c ' form class=' cf ' id=' my form ' target=' enctype=' multipart/form-data ' action=' method=' post ' div class=' wlog _ l ' textarea id=' content ' name=' data[content]'/textarea输入类型=' hidden ' id=' step ' value=' 1 ' name=' data[step]'//div class=' wlog _ r ' H2选择装修阶段/H2 b类=' cur ' mine=' 1 ' style='行高：20 px' 准备开工b我的=2水电b矿山='3 '泥木b矿山='4 '油漆b我的=5竣工b矿山='6 '软装！-输入类型='隐藏'值='准备开工div class=' wlog _ f cf ' h2上传图片选择装修过程中的照片，每张低于5M，支持JPG/JPEG/巴布亚新几内亚格式，最多9张/H2 div=' wlog _ p cf ' a href=' JavaScript :rel=' external no follow ' img src=' http : _ _ PUBLIC _ _/home/images/2016-10-29 _ 231703。png ' alt='变更时输入=' submit img()' type=' file ' name=' thumb '/a div id=' add '/div！-img src=' http : _ _ PUBLIC _/home/images/2016-10-18 _ 094906。png ' alt=' IX/I img src=' http : _ _ PUBLIC _/home/images/2016-10-18 _ 094906。png ' alt=' IX/I img src=' http 3360 _ _ PUBLIC _/home/images/2016-10-18 _ 18发布日志/div/form/div/divinclude文件=' Public/footer '/脚本类型=' text/JavaScript '函数submitimg(){ $('#myform ').attr('target '，' upload _ URL ')；$(“# my form”).attr('action '，' { : u(' Journal/submit img ')} ')；$(“# my form”).submit()；} function goods _ form _ submit(){ if(！$('#content ').val()){ alert('请填写日志');返回false } $(“# my form”).attr('target '，' ')；$(“# my form”).attr('action '，' ')；$(“# my form”).submit()；}函数callblack_img(路径，uid){ var html=' '；var dir=' { : c(FILE _ PATH)} '；var html=' img src=' dir path ' IX/iinput type=' hidden ' value=' path ' ' name=' thumb[' uid ']' '；$(' # add ').追加(html)；}/脚本脚本类型=' text/JAVAScript ' src=' http : _ _ PUBLIC _ _/home/js/jquery-1。10 .1 .量滴js /脚本脚本类型=' text/JAVAScript ' src=' http : _ _ PUBLIC _ _/home/js/basis。js /脚本脚本$(函数(){ $().wlog _ r ' b ' .click(函数(事件)){ $(this).addClass('cur ').兄弟姐妹(' b ').移除CLaSS(' cur ')；$('.wlog_r输入[type=hidden]').瓦尔($(这个).text())；});$(' # add ').委托(' I '，' click '，function () { $(this).父代(' b ').移除();}) }) $('b ').单击(函数(){ var值=$(this)).attr(' mine ')；$('#step ').val(值);})/脚本/正文/html控制器（返回被选中的图片（已经上传)在服务器之中的路径):

公共函数提交img(){ if(IS _ POST){ $ data=I(' POST。数据')；//获取邮政数据$ RES=fab _ upload($ _ FILES)；//上传文件$ uid=uniqid()；$ RES=$ RES['拇指']；if($ RES){ echo '脚本父级。调用black _ img(' { $ RES } '，' { $ uid } ')；/script '；} }}真正的最后接收表单数据并且存入数据库的函数：

公共函数add _ journal(){ if(IS _ POST){ var _ dump($ _ POST)；死去；} else { $ this-display()；}}更多对PHP相关内容感兴趣的读者可以查看本网站专题：《php文件操作总结》、《PHP图形与图片操作技巧汇总》、《PHP网络编程技巧总结》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》、《php常见数据库操作技巧汇总》、0103010

希望本文对PHP编程有所帮助。