php 多张图片上传,PHP上传多张相片?

PS:上传多张图:同时上传多张图的上传原理和单张图上传原理是相同的,只不过在对上传字段进行出来了时候增加了一个数组的应用。注意input的name是一个数组的形式,php中获取数组个数的时候,才能获取到有效的数组长度。

上传相片

* {

margin: 0;

padding: 0;

}

/*图片上传*/

html,

body {

width: 100%;

height: 100%;

}

.container {

width: 100%;

height: 100%;

overflow: auto;

clear: both;

}

.z_photo {

width: 5rem;

height: 5rem;

padding: 0.3rem;

overflow: auto;

clear: both;

margin: 1rem auto;

border: 1px solid #555;

}

.z_photo img {

width: 1rem;

height: 1rem;

}

.z_addImg {

float: left;

margin-right: 0.2rem;

}

.z_file {

width: 1rem;

height: 1rem;

background: url('images/addxp.png') no-repeat;

background-size: 100% 100%;

float: left;

margin-right: 0.2rem;

}

.z_file input::-webkit-file-upload-button {

width: 1rem;

height: 1rem;

border: none;

position: absolute;

outline: 0;

opacity: 0;

}

.z_file input#file {

display: block;

width: auto;

border: 0;

vertical-align: middle;

}

/*遮罩层*/

.z_mask {

width: 100%;

height: 100%;

background: rgba(0, 0, 0, .5);

position: fixed;

top: 0;

left: 0;

z-index: 999;

display: none;

}

.z_alert {

width: 3rem;

height: 2rem;

border-radius: .2rem;

background: #fff;

font-size: .24rem;

text-align: center;

position: absolute;

left: 50%;

top: 50%;

margin-left: -1.5rem;

margin-top: -2rem;

}

.z_alert p:nth-child(1) {

line-height: 1.5rem;

}

.z_alert p:nth-child(2) span {

display: inline-block;

width: 49%;

height: .5rem;

line-height: .5rem;

float: left;

border-top: 1px solid #ddd;

}

.z_cancel {

border-right: 1px solid #ddd;

}

确定要删除这张图片吗?

取消

确定

//px转换为rem

(function(doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function() {

var clientWidth = docEl.clientWidth;

if (!clientWidth) return;

if (clientWidth >= 640) {

docEl.style.fontSize = '100px';

} else {

docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';

}

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

function imgChange(obj1, obj2) {

//获取点击的文本框

var file = document.getElementById("file");

//存放图片的父级元素

var imgContainer = document.getElementsByClassName(obj1)[0];

//获取的图片文件

var fileList = file.files;

//文本框的父级元素

var input = document.getElementsByClassName(obj2)[0];

var imgArr = [];

//遍历获取到得图片文件

for (var i = 0; i < fileList.length; i++) {

var imgUrl = window.URL.createObjectURL(file.files[i]);

imgArr.push(imgUrl);

var img = document.createElement("img");

img.setAttribute("src", imgArr[i]);

var imgAdd = document.createElement("div");

imgAdd.setAttribute("class", "z_addImg");

imgAdd.appendChild(img);

imgContainer.appendChild(imgAdd);

};

imgRemove();

};

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;

mask.style.display = "block";

cancel.onclick = function() {

mask.style.display = "none";

};

sure.onclick = function() {

mask.style.display = "none";

t.style.display = "none";

};

}

};

};

if($_POST['submitBtn'] == '上传'){ //判断提交按钮是否为空

/*echo "OK
";

echo "数组:".$_FILES."
";

if($_FILES){

echo "是数组
";

$file = $_FILES["u_file"];

echo "数组的个数:".count($file)."
";//5

$name = $file["name"];

echo "数组的个数:".count($name)."
";//1

}*/

//$num = $_FILES["u_file"]["name"];

//echo "个数是:".count($num);

//上传多张图:同时上传多张图的上传原理和单张图上传原理是相同的,只不过在对上传字段进行出来了时候增加了一个数组的应用。注意input的name是一个数组的形式,php中获取数组个数的时候,才能获取到有效的数组长度。

for($i=0; $i

$file_path = "images/upload1/"; //定义图片在服务器中的存储位置

$picture_name=$_FILES['u_file']['name'][$i]; //获取上传图片的名称

$picture_name=strstr($picture_name , "."); //通过strstr()函数截取上传图片的后缀

if($picture_name!= ".jpg"){ //根据后缀判断上传图片的格式是否符合要求

echo "";//这里有刷新页面

}else if($_FILES['u_file']['tmp_name'][$i]){

echo "临时路径:".$_FILES['u_file']['tmp_name'][$i]."
";

$dataImgName[$i] = date('Ymdhis').$i;//同时上传,后面的会覆盖前面的,所有再在后面加上一个变量区别开,避免覆盖。

echo "实际路径:".$file_path.$dataImgName[$i]."
";

move_uploaded_file($_FILES['u_file']['tmp_name'][$i],$file_path.$dataImgName[$i]);

//执行图片上传

//echo '';

}

else

echo '';

}

/*

//上传单张图

$file_path = "images/upload1/"; //定义图片在服务器中的存储位置

$picture_name=$_FILES['u_file']['name']; //获取上传图片的名称

$picture_name=strstr($picture_name , "."); //通过strstr()函数截取上传图片的后缀

if($picture_name!= ".jpg"){ //根据后缀判断上传图片的格式是否符合要求

echo "";//这里有刷新页面

}else if($_FILES['u_file']['tmp_name']){

$dataImgName = date('Ymdhis');

move_uploaded_file($_FILES['u_file']['tmp_name'],$file_path.$dataImgName);

//执行图片上传

echo '';

}

else

echo '';

}*/

}

?>

$_FILES函数:

当客户端提交后,我们获得了一个$_FILES 数组

$_FILES数组内容如下:

$_FILES['myFile']['name'] 客户端文件的原名称。

$_FILES['myFile']['type'] 文件的 MIME 类型,需要浏览器提供该信息的支持,例如"image/gif"。

$_FILES['myFile']['size'] 已上传文件的大小,单位为字节。

$_FILES['myFile']['tmp_name'] 文件被上传后在服务端储存的临时文件名,一般是系统默认。可以在php.ini的upload_tmp_dir 指定,但 用 putenv() 函数设置是不起作用的。

$_FILES['myFile']['error'] 和该文件上传相关的错误代码。['error'] 是在 PHP 4.2.0 版本中增加的。下面是它的说明:(它们在PHP3.0以后成了常量)

UPLOAD_ERR_OK

值:0; 没有错误发生,文件上传成功。

UPLOAD_ERR_INI_SIZE

值:1; 上传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值。

UPLOAD_ERR_FORM_SIZE

值:2; 上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值。

UPLOAD_ERR_PARTIAL

值:3; 文件只有部分被上传。

UPLOAD_ERR_NO_FILE

值:4; 没有文件被上传。

值:5; 上传文件大小为0.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值