php多张图片切换效果,ThinkPHP实现选择多张图片并可预览

我就是我 2022-11-12 09:48 195阅读 0赞

码农公社  210.net.cn  210是何含义？10月24日是程序员节，1024 =210、210既

210

之意。

ThinkPHP实现选择多张图片并可预览

点击后可选多张图片，而后将这些图显示在页面上进行预览、也可以删除，点击提交将图片存到服务器上。

1、效果图

![8a4b6cca0ccff7aa8926faf9fea727bd.png][]

2、代码

起锅烧油，将input的type=file 搞里到，multiple 搞里到，

小火炖100毫秒 变成这个样子

如果不想通过 ajax 提交，一定要加上文件传输协议 ( enctype="multipart/form-data" )

视图部分(View)

html>

showImages

.float\{

float:left;

width : 200px;

height: 200px;

overflow: hidden;

border: 1px solid \#CCCCCC;

border-radius: 10px;

padding: 5px;

margin: 5px;

img\{

position: relative;

.result\{

width: 200px;

height: 200px;

text-align: center;

box-sizing: border-box;

\#file\_input\{

display: none;

.delete\{

width: 200px;

height:200px;

position: absolute;

text-align: center;

line-height: 200px;

z-index: 10;

font-size: 30px;

background-color: rgba(255,255,255,0.8);

color: \#777;

opacity: 0;

transition-duration: :0.7s;

\-webkit-transition-duration: 0.7s;

.delete:hover\{

cursor: pointer;

opacity: 1;

window.onload = function()\{

var input = document.getElementById("file\_input");

var result;

var dataArr = \[\]; // 储存所选图片的结果(文件名和base64数据)

var fd; //FormData方式发送请求

var oSelect = document.getElementById("select");

var oAdd = document.getElementById("add");

var oSubmit = document.getElementById("submit");

var oInput = document.getElementById("file\_input");

if(typeof FileReader==='undefined')\{

alert("抱歉，你的浏览器不支持 FileReader");

input.setAttribute('disabled','disabled');

\}else\{

input.addEventListener('change',readFile,false);

\}　　　　　//handler

function readFile()\{

fd = new FormData();

var iLen = this.files.length;

var index = 0;

for(var i=0;i

if (!input\['value'\].match(/.jpg|.gif|.png|.jpeg|.bmp/i))\{　　//判断上传文件格式

return alert("上传的图片格式不正确，请重新选择");

var reader = new FileReader();

reader.index = i;

fd.append(i,this.files\[i\]);

reader.readAsDataURL(this.files\[i\]); //转成base64

reader.fileName = this.files\[i\].name;

reader.onload = function(e)\{

var imgMsg = \{

name : this.fileName,//获取文件名

base64 : this.result  //reader.readAsDataURL方法执行完后，base64数据储存在reader.result里

dataArr.push(imgMsg);

result = '

delete

var div = document.createElement('div');

div.innerHTML = result;

div\['className'\] = 'float';

div\['index'\] = index;

document.getElementsByTagName('body')\[0\].appendChild(div); 　　//插入dom树

var img = div.getElementsByTagName('img')\[0\];

img.onload = function()\{

var nowHeight = ReSizePic(this); //设置图片大小

this.parentNode.style.display = 'block';

var oParent = this.parentNode;

if(nowHeight)\{

oParent.style.paddingTop = (oParent.offsetHeight - nowHeight)/2 + 'px';

div.onclick = function()\{

this.remove();         // 在页面中删除该图片元素

delete dataArr\[this.index\]; // 删除dataArr对应的数据

index++;

function send()\{

var submitArr = \[\];

for (var i = 0; i

if (dataArr\[i\]) \{

submitArr.push(dataArr\[i\]);

// console.log('提交的数据：'+JSON.stringify(submitArr))

$.ajax(\{

url : 'http://www.210.cx/pic',

type : 'post',

data : JSON.stringify(submitArr),

dataType: 'json',

//processData: false,  用FormData传fd时需有这两项

//contentType: false,

success : function(data)\{

console.log('返回的数据：'+JSON.stringify(data))

\})

oSelect.οnclick=function()\{

oInput.value = "";  // 先将oInput值清空，否则选择图片与上次相同时change事件不会触发

//清空已选图片

$('.float').remove();

dataArr = \[\];

index = 0;

oInput.click();

oAdd.οnclick=function()\{

oInput.value = "";  // 先将oInput值清空，否则选择图片与上次相同时change事件不会触发

oInput.click();

oSubmit.οnclick=function()\{

if(!dataArr.length)\{

return alert('请先选择文件');

send();

/\*

用ajax发送fd参数时要告诉jQuery不要去处理发送的数据，

不要去设置Content-Type请求头才可以发送成功，否则会报“Illegal invocation”的错误，

也就是非法调用，所以要加上“processData: false,contentType: false,”

\* \*/

function ReSizePic(ThisPic) \{

var RePicWidth = 200; //这里修改为您想显示的宽度值

var TrueWidth = ThisPic.width; //图片实际宽度

var TrueHeight = ThisPic.height; //图片实际高度

if(TrueWidth>TrueHeight)\{

//宽大于高

var reWidth = RePicWidth;

ThisPic.width = reWidth;

//垂直居中

var nowHeight = TrueHeight \* (reWidth/TrueWidth);

return nowHeight; //将图片修改后的高度返回，供垂直居中用

\}else\{

//宽小于高

var reHeight = RePicWidth;

ThisPic.height = reHeight;

请选择一个图像文件：

(重新)选择图片

(追加)图片

提交

3、控制器(Controller)

$image=request()->file('image');

print\_r($image);

原文：https://blog.csdn.net/weixin\_42068782/article/details/84139230

[8a4b6cca0ccff7aa8926faf9fea727bd.png]: /images/20221022/af6162d8d38e48b5ace576cf70358340.png

php多张图片切换效果,ThinkPHP实现选择多张图片并可预览

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 python将多张图片合并成一张图片

相关 js实现图片上传时本地预览（支持同时上传多张图片）

相关 PHP_thinkphp5选择上传多张图片

相关 php多张图片切换效果,ThinkPHP实现选择多张图片并可预览

相关 java 图片上一张下一张_java实现预览图片,点击实现下一张

相关 Halcon：多张图片合并成一张图片

相关 Javascript实现图片预加载【回调函数，多张图片】

相关拖拽上传图片(可多张)

相关 HTML选择图片直接预览效果

相关 js实现图片上传时本地预览（支持同时上传多张图片）