爱分享666
导航切换
首页
编程技术
web前端
面试题及技巧
绿色软件下载
java技术博客
免费资源分享
查看更多
关于&留言
开源视频项目分享
在线生活
资讯
注册
登录
退出
当前位置:
首页
>web前端>前端技术文档
欢迎访问新站点,体验更舒服,内容更优秀、更专业。
PHP,Vue.js ,ajax, 多图上传图功能和技巧
时间:2018-10-05 08:28:00
阅读:1479
<!DOCTYPE html>
<html>
<head>
<title>
vue.js 简单多图上传图片
</title>
<meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/>
<style
type
=
"text/css"
>
ul
{
list
-
style
:
none outside none
;
margin
:
0
;
padding
:
0
;
}
li
{
margin
:
0
10px
;
display
:
inline
;
}
#app{
overflow
:
hidden
;
text
-
align
:
center
;
margin
-
top
:
10
%;
}
img
{
width
:
100px
;
height
:
100px
;
margin
:
auto
;
display
:
inline
;
margin
-
bottom
:
10px
;
}
</style>
<script
src
=
"//cdn.bootcss.com/vue/1.0.23/vue.min.js"
></script>
<script
src
=
"//cdn.bootcss.com/jquery/2.2.2/jquery.min.js"
></script>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link
rel
=
"stylesheet"
href
=
"//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"
>
<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link
rel
=
"stylesheet"
href
=
"//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"
>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script
src
=
"//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"
></script>
</head>
<body>
<div
id
=
"app"
>
<div
style
=
"
margin
-
bottom
:
20px
"
>
<h2>
选择图片
</h2>
<a
id
=
'addPic'
href
=
""
v-on:click
=
"addPic"
>
添加图片
</a>
<input
type
=
"file"
@
change
=
"onFileChange"
multiple
style
=
"
display
:
none
;
"
>
</div>
<div
v-if
=
"images.length >
0">
<ul>
<li
v-for
=
"(key,image) in images"
>
<img
:
src
=
"image"
@
click
=
'delImage(key)'
/>
<a
href
=
"#"
style
=
"
position
:
absolute
;
"
@
click
=
'delImage(key)'
>
<span
class
=
"glyphicon glyphicon-remove"
></span>
</a>
</li>
</ul>
<button
@
click
=
"removeImage"
>
移除全部图片
</button>
<button
@
click
=
'uploadImage'
>
上传
</button>
</div>
</div>
<script
type
=
"text/javascript"
>
Vue
.
config
.
debug
=
true
;
// 开启vue 调试功能
new
Vue
({
el
:
'#app'
,
data
:
{
images
:
[]
},
methods
:
{
addPic
(
e
){
e
.
preventDefault
();
$
(
'input[type=file]'
).
trigger
(
'click'
);
return
false
;
},
onFileChange
(
e
)
{
var
files
=
e
.
target
.
files
||
e
.
dataTransfer
.
files
;
if
(!
files
.
length
)
return
;
this
.
createImage
(
files
);
},
createImage
(
file
)
{
if
(
typeof
FileReader
===
'undefined'
){
alert
(
'您的浏览器不支持图片上传,请升级您的浏览器'
);
return
false
;
}
var
image
=
new
Image
();
var
vm
=
this
;
var
leng
=
file
.
length
;
for
(
var
i
=
0
;
i
<
leng
;
i
++){
var
reader
=
new
FileReader
();
reader
.
readAsDataURL
(
file
[
i
]);
reader
.
onload
=
function
(
e
){
vm
.
images
.
push
(
e
.
target
.
result
);
};
}
},
delImage
:
function
(
index
){
this
.
images
.
shift
(
index
);
},
removeImage
:
function
(
e
)
{
this
.
images
=
[];
},
uploadImage
:
function
()
{
console
.
log
(
this
.
images
);
return
false
;
var
obj
=
{};
obj
.
images
=
this
.
images
$
.
ajax
({
type
:
'post'
,
url
:
"upload.php"
,
data
:
obj
,
dataType
:
"json"
,
success
:
function
(
data
)
{
if
(
data
.
status
){
alert
(
data
.
msg
);
return
false
;
}
else
{
alert
(
data
.
msg
);
return
false
;
}
}
});
}
}
})
</script>
</body>
</html>
PHP代码:
<?
php
define
(
'UPLOAD_DIR'
,
'./images/'
);
$img
=
$_POST
[
'image'
];
$start
=
strpos
(
$img
,
','
);
$img
=
substr
(
$img
,
$start
+
1
);
$img
=
str_replace
(
' '
,
'+'
,
$img
);
$data
=
base64_decode
(
$img
);
$fileName
=
UPLOAD_DIR
.
uniqid
()
.
'.jpg'
;
$success
=
file_put_contents
(
$fileName
,
$data
);
$data
=
array
();
if
(
$success
){
$data
[
'status'
]=
1
;
$data
[
'msg'
]=
'上传成功'
;
echo json_encode
(
$data
);
}
else
{
$data
[
'status'
]=
0
;
$data
[
'msg'
]=
'系统繁忙,请售后再试'
;
echo json_encode
(
$data
);
}
上一篇:
经典必看maven视频教程_入门到精通百度云下载地址
下一篇:
javaweb 商城项目视频教程
0
+1
打赏
×
如果网站能给予您帮助,欢迎给网站捐助,给我打赏个吧!
您的支持是我的动力,让网站能一直陪伴着大家,共同学习进步。
捐助费用将用于网站日常运营(服务器租费、域名租费等)
捐助者请发送邮箱提供姓名至 zhaoqn@163.com 留言以表感谢。
网友评论
发表评论
验证码:
请
登录
后再发表评论
热门评论
本月热门
mysql索引实现原理及mysql存储引擎比较
mysql索引实现原理及mysql存储引擎比较
微服务Sping Cloud实战视频教程_java视频教程
微服务Sping Cloud实战视频教程_java视频教程
java软件开发_软件开发自学步骤是什么_java软件开发要学哪些课程
熟悉常用的JavaAPI,包括集合框架、多线程(并发编程)、I/O(NIO)、Socket、JDBC、XML、反射等。
Java线程分析及理解
JDK本身提供了很多方便的JVM性能调优监控工具,除了集成式的VisualVM和jConsole外
华为笔试面试经验
面试部门:中软(软件工程师)
推荐资料
java 23中设计模式之原型模式(原型模式)详解(2)
java 23中设计模式之原型模式(原型模式)详解(2)
java 23中设计模式之单例模式(单例设计模式)详解(1)
java 23中设计模式之单例模式(单例设计模式)详解(1)
SQL优化面试专题及答案 PDF 下载
SQL优化面试专题及答案 PDF 下载
最新版JAVA程序员面试题 PDF 下载
最新版JAVA程序员面试题 PDF 下载
大厂前端机试题 PDF 下载
大厂前端机试题 PDF 下载
精彩评论
Re: 好的,需要哪个联系我。。
原文文档:2019年史上最全SpringBoot视频教程java分享网
Re: 有的百度分享网盘地址失效了,站长
原文文档:2019年史上最全SpringBoot视频教程java分享网
Re: 站长网站源码 分享下吗?
原文文档:微服务Sping Cloud实战视频教程_java视频教程
Re: 暂时不可以,可以继续关注哈
原文文档:微服务Sping Cloud实战视频教程_java视频教程
Re: 哈哈哈ok啦
原文文档:JDBC-数据库连接
回到顶部
网友评论