javascript - 在此基础上如何（自动）上传多个图片？新手求指导
本文介绍了javascript - 在此基础上如何（自动）上传多个图片？新手求指导的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
问题：可以选择多个图片，但上传时只能得到一个，求前辈指导，谢谢。代码如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
}
/*图片上传*/
html,
body {
width: 100%;
height: 100%;
}
.z_photo{
overflow:auto;
clear:both;
margin:0 auto;
}
.z_photo img {
width: 64px;
height: 64px;
}
.z_addImg {
float: left;
margin-right:5px;
position:relative;
}
.z_file {
width: 64px;
height: 64px;
background: url(add.png) no-repeat;
float: left;
margin-right:5px;
}
.z_file input::-webkit-file-upload-button {
width: 64px;
height: 64px;
border: none;
position: absolute;
outline: 0;
opacity: 0;
}
.z_file input#file {
display: block;
width: auto;
border: 0;
vertical-align: middle;
}
.z_delete{
width:16px;
height:16px;
display:block;
background: url(delete.png) no-repeat;
position:absolute;
top:0px;
right:0px;
}
</style>
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
<div class="z_photo">
<div class="z_file" id="z_file">
<input type="file" name="file" id="file" value="" accept="image/*" multiple="multiple" onchange="imgChange('z_photo','z_file');" />
</div>
</div>
<input type="submit" name="submit" value="Submit" />
</form>
<script type="text/javascript">
function imgChange(obj1, obj2) {
//获取点击的文本框
var file = document.getElementById("file");
//存放图片的父级元素
var imgContainer = document.getElementsByClassName(obj1)[0];
//获取的图片文件
var fileList = file.files;
//已选择图片数量
img_done = getElementsByClassName("z_addImg");
//还能选择张数
shengyu = 3 - img_done;
if(fileList.length > shengyu){
alert("最多3张");
return false;
}
//文本框的父级元素
var input = document.getElementsByClassName(obj2)[0];
//var imgArr = [];
//遍历获取到得图片文件
for (var i = 0; i < fileList.length; i++) {
function readBlobAsDataURL(blob, callback) {
var a = new FileReader();
a.onload = function(e) {callback(e.target.result);};
a.readAsDataURL(blob);
};
readBlobAsDataURL(file.files[i], function (dataurl){
//console.log(dataurl);
//var imgUrl = window.URL.createObjectURL(file.files[i]);
//imgArr.push(imgUrl);
var img = document.createElement("img");
var detimg = document.createElement("span");
//img.setAttribute("src", imgArr[i]);
img.setAttribute("src", dataurl);
img.setAttribute("onclick", "imgRemove();");
detimg.setAttribute("class", "z_delete");
var imgAdd = document.createElement("div");
imgAdd.setAttribute("class", "z_addImg");
imgAdd.appendChild(img);
imgAdd.appendChild(detimg);
imgContainer.appendChild(imgAdd);
});
};
//displayinput();
};
function imgRemove() {
var imgList = document.getElementsByClassName("z_addImg");
var mask = document.getElementsByClassName("z_mask")[0];
var cancel = document.getElementsByClassName("z_cancel")[0];
var sure = document.getElementsByClassName("z_sure")[0];
for (var j = 0; j < imgList.length; j++) {
imgList[j].index = j;
imgList[j].onclick = function() {
var t = this;
t.remove();
//displayinput();
}
};
};
function getElementsByClassName(n){
var classElements = [],allElements = document.getElementsByTagName('div');//所有div
for (var i=0; i< allElements.length; i++ ){
if (allElements[i].className == n ) {
classElements[classElements.length] = allElements[i];
}
}
//alert(classElements.length);
return classElements.length;
};
function displayinput(){
imgs = getElementsByClassName("z_addImg");
if(imgs>=3){
document.getElementById("z_file").style.display="none";
}else{
document.getElementById("z_file").style.display="block";
}
}
</script>
</body>
</html>
服务端
<?php
if ($_FILES["file"]["error"] > 0)
{
echo "Error: " . $_FILES["file"]["error"] . "<br />";
}
else
{
echo "Upload: " . $_FILES["file"]["name"] . "<br />";
echo "Type: " . $_FILES["file"]["type"] . "<br />";
echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
echo "Stored in: " . $_FILES["file"]["tmp_name"];
}
?>
解决方案
你服务端那边处理的有问题吧 能不能贴出来看看
<input type="file" name="file"
改成
<input type="file" name="file[]"
然后
$_FILES变量结构
Array
(
[name] => Array
(
[0] => foo.jpg
[1] => bar.png
)
[type] => Array
(
[0] => image/jpeg
[1] => image/png
)
[tmp_name] => Array
(
[0] => /tmp/phpYzdqkD
[1] => /tmp/phpeEwEWG
)
[error] => Array
(
[0] => 0
[1] => 0
)
[size] => Array
(
[0] => 123
[1] => 456
)
)
感觉是这样的
然后你js要不要改怎么改我么仔细看。。
这篇关于javascript - 在此基础上如何（自动）上传多个图片？新手求指导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
