一、html部分
<form action="" method="post" enctype="multipart/form-data">
<span>上传图片<input type="file" name="head_line_pic[]" multiple="multiple" value="上传图片" id="files" accept="image/*" onchange="javascript:setImagePreviews();"/></span>
<button type="submit" class="button primary px-6"> 提交 </button>
<div id="preview">
//多图预览区域
</div>
</form>
二 、js部分
function setImagePreviews(avalue) {
var docObj = document.getElementById("files");
var dd = document.getElementById("preview");
dd.innerHTML = "";
var fileList = docObj.files;
for (var i = 0; i < fileList.length; i++) {
dd.innerHTML += "<div style='float:left' > <img id='img" + i + "' /> </div>";
var imgObjPreview = document.getElementById("img"+i);
if (docObj.files && docObj.files[i]) {
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '70px';
imgObjPreview.style.height = '70px';
imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);
}
else {
docObj.select();
var imgSrc = document.selection.createRange().text;
alert(imgSrc)
var localImagId = document.getElementById("img" + i);
localImagId.style.width = "70px";
localImagId.style.height = "70px";
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch (e) {
alert("您上传的图片格式不正确,请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
}
return true;
}
三、 PHP部分
$files = '';
$r_file=request()->file();
if (!empty($r_file['head_line_pic'])) {
$files = request()->file('head_line_pic');
}
if (!empty($files)){
foreach ($files as $key => $file) {
$save_file_name = \think\facade\Filesystem::disk('public_admin_uploads')->putFile('head_line', $file, 'data');
if ($save_file_name == false) {
throw new Exception('图片上传失败');
}
$save_file_name = $file_path . (str_replace('\\', '/', $save_file_name));
var_dump($save_file_name);
}
}
四、 filesystem.php配置文件
return [
'default' => env('filesystem.driver', 'local'),
'disks' => [
'local' => [
'type' => 'local',
'root' => app()->getRuntimePath() . 'storage',
],
'public' => [
'type' => 'local',
'root' => app()->getRootPath() . 'public/storage',
'url' => '/storage',
'visibility' => 'public',
],
'public_admin_uploads' => [
'type' => 'local',
'root' => app()->getRootPath() . 'public/uploads/admin',
'url' => '/uploads/admin',
'visibility' => 'public',
],
'public_api_uploads' => [
'type' => 'local',
'root' => app()->getRootPath() . 'public/uploads/api',
'url' => '/uploads/api',
'visibility' => 'public',
],
],
];
以上就是关于TP6多图上传以及图片预览功能,有什么问题欢迎大家评论留言!