1、路由
Route::rule('fileUpload/:dir','index/FileUpload/index');
2、页面主要内容
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var imgpath = button.data('imgpath')
var title = button.data('imgtitle')
var info = button.data('productinfo')
var productid = button.data('productid')
if (productid === undefined) {
window.alert("productid 未定义");
}
var modal = $(this)
modal.find('.modal-title').text(title)
//单图
//modal.find('.modal-body img').attr('src',imgpath)
modal.find('.modal-footer .info').text(info)
//设置当前 productid
modal.find('#productid').attr('value', productid)
//设置上传表单productid
modal.find('#productid').attr('value', productid)
//清空元素
modal.find('.carousel-indicators').empty()
modal.find('.carousel-inner').empty()
var productid = $('#productid').attr('value');
var formData = new FormData();
formData.append('productid', productid);
formData.append('refresh', 1);
$.ajax({
type: 'post',
cache: false,
url: '/index.php/fileUpload/product',
data: formData,
processData: false, // 不处理数据
contentType: false, // 不设置内容类型
dataType: "json",
success: function (data) {
if (data['status'] == 1) {
var modal = $('#exampleModal')
var images = data['images']// button.data('images')
var init = true;
//重新添加图片
for (var key in images) {
if (init) {
modal.find('.carousel-indicators').append("<li data-target=\"#carouselExampleIndicators\" data-slide-to=\"" + key + "\" class=\"active\"></li>")
modal.find('.carousel-inner').append(" <div class=\"carousel-item active\"> <center><img class=\"ProductImages\" src=\"" + images[key]['file_path'] + "\"/></center> </div>")
init = false;
} else {
modal.find('.carousel-indicators').append("<li data-target=\"#carouselExampleIndicators\" data-slide-to=\"" + key + "\"></li>")
modal.find('.carousel-inner').append(" <div class=\"carousel-item\"> <center><img class=\"ProductImages\" src=\"" + images[key]['file_path'] + "\"/></center> </div>")
}
}
} else {
alert("更新出错")
}
},
error: function (data) {
alert('更新出错');
}
})
})
$('#submit').on('click', function (event) {
var formData = new FormData();
formData.append('image', $('#file')[0].files[0]);
formData.append('productid', $('#productid').attr('value'));
formData.append('refresh', 0);
$.ajax({
type: 'post',
cache: false,
url: '/index.php/fileUpload/product',
data: formData,
processData: false, // 不处理数据
contentType: false, // 不设置内容类型
dataType: "json",
success: function (data) {
if (data['status'] == 1) {
var modal = $('#exampleModal')
var images = data['images']// button.data('images')
//清空元素
modal.find('.carousel-indicators').empty()
modal.find('.carousel-inner').empty()
//重新添加图片
for (var key in images) {
//确保刚上传的文件被激活
if (key == (images.length - 1)) {
modal.find('.carousel-indicators').append("<li data-target=\"#carouselExampleIndicators\" data-slide-to=\"" + key + "\" class=\"active\"></li>")
modal.find('.carousel-inner').append(" <div class=\"carousel-item active\"> <center><img class=\"ProductImages\" src=\"" + images[key]['file_path'] + "\"/></center> </div>")
} else {
modal.find('.carousel-indicators').append("<li data-target=\"#carouselExampleIndicators\" data-slide-to=\"" + key + "\"></li>")
modal.find('.carousel-inner').append(" <div class=\"carousel-item\"> <center><img class=\"ProductImages\" src=\"" + images[key]['file_path'] + "\"/></center> </div>")
}
}
// alert('上传完成！')
} else {
alert('上传错误')
}
},
error: function (data) {
alert('上传错误');
}
})
})
})
//...
<div class="ProductPreview">
{notempty name='$product.qrcode.file_path')}
<img src="{$product.qrcode.file_path}" data-toggle="modal" data-target="#exampleModal" data-imgpath="{$product.qrcode.file_path}"
data-imgtitle="{$product.name}" data-productinfo="{$product.type.name} / {$product.model}" data-images="{$product.images}"
data-productid="{$product.id}">
</a>
{else/}
<img data-toggle="modal" data-target="#exampleModal" data-imgpath="{$product.qrcode.file_path}" data-imgtitle="{$product.name}"
data-productinfo="{$product.type.name} / {$product.model}" data-images="{$product.images}" data-productid="{$product.id}">
</a>
{/notempty}
</div>
//...
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- 单图 -->
<!--
<center><img src="" style="width:auto;height:auto;max-height:300px;max-width:100%;" /></center>
-->
<!-- 多图 -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<!--
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
-->
</ol>
<div class="carousel-inner">
<!-- 原案例 -->
<!--
<div class="carousel-item active">
<img class="d-block w-100" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164b27b1eb7%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164b27b1eb7%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.921875%22%20y%3D%22217.7%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164b27b1eb7%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164b27b1eb7%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.921875%22%20y%3D%22217.7%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164b27b1eb7%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164b27b1eb7%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.921875%22%20y%3D%22217.7%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Third slide">
</div>
-->
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="PrevIcon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="NextIcon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<center>
<form id="uploadForm" enctype="multipart/form-data">
<div class="input-group">
<input type="file" name="image" class="form-control" id="file" />
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon">
<input type="button" value="上传" id="submit" />
<input type="hidden" name="productid" id="productid" value="" />
</div>
</div>
</div>
<br>
</form>
</center>
</div>
<div class="modal-footer">
<h6 class="info">info</h6>
</div>
</div>
</div>
</div>
3、后台
<?php
namespace app\index\controller;
use think\Controller;
use think\Request;
use think\File;
use app\index\model\ProductModel;
use app\index\model\ExtraProductModel;
class FileUploadController extends Controller
{
public function index($dir){
$id=request()->param('productid');
$refresh=request()->param('refresh');
$result;
if($refresh==1){
$product=ProductModel::where('id', $id)->find();
$images=$product->images;
$result['status']=1;
$result['images']=$images;
}else{
$file =request()->file('image');
// 移动到框架应用根目录/public/uploads/ 目录下
if($file){
$info = $file->move(UPLOAD_PATH.$dir);
if($info){
$extraProduct =new ExtraProductModel();
$extraProduct->name=$info->getFilename();
$extraProduct->file_path='/upload/'.$dir.'/'.$info->getSaveName();
$extraProduct->product_id=$id;
$extraProduct->save();
$product=ProductModel::where('id', $id)->find();
$images=$product->images;
$result['status']=1;
$result['images']=$images;
}else{
$result['status']=0;
}
}else{
$result['status']=0;
}
}
return $result;
}
}
