//html代码片段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多图上传即时显示</title>
<script src="xxxxxx/js/jquery1.42.min.js"></script>
</head>
<body>
<iframe name="ifr" style="display: none"></iframe>
<div class="sd-bobo">
<div class="upload_pic">
<form action="/index.php/index/index/moreUpload" target="ifr" method="post" enctype="multipart/form-data">
<span><input type="button" onclick="do_do()" value="图片上传" style="background-color: deepskyblue;border-radius: 10px"></span>
<span hidden><input id="weblogo_file" onchange="do_do1()" type="file" name="pic"></span>
<span hidden><input id="weblogo_submit" type="submit" value="上传"></span>
</form>
</div>
<div id="tui_tu" style="margin-top: 10px"></div>
</div>
</body>
</html>
<script type="text/javascript">
function tui_pic_img(id){
$(id).remove();
}
function do_do(id){
var num = $('.tui_pic_i');
if(num.length>8){
alert('只允许添加九张图');
return false;
}
$("#weblogo_file").click();
}
function do_do1(id){
$("#weblogo_submit").click();
}
</script>
//页面渲染
public function morePic(){
return $this->fetch();
}
//多图片上传方法
public function moreUpload(){
$file = request()->file('pic');
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads/tu');
$name = $info->getSaveName();
//将反斜杠替换成正斜杠
$name = str_replace('\\', '/', $name);
$images = '/uploads/tu/'.$name;
$img = "<img onclick='tui_pic_img(this)' src='".$images."' style='width: 65px;height: 70px;margin-right:10px'/>";
echo '
<script type="text/javascript" src="https://www.shizhanzhe.com/js/jquery1.42.min.js"></script>
<script>
$("#tui_tu",window.parent.document).html($("#tui_tu",window.parent.document).html()+"'.$img.'");
</script>';
}
thinkphp5多图上传即时显示
猜你喜欢
转载自blog.csdn.net/luoangen/article/details/82863641
今日推荐
周排行