怎么样通过php使用html5实现多文件上传？（php多图上传）

jiang1799 · 发表于 2017-12-30 13:56:29

<!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">
　　<title>上传相片</title>
　　<style>
　　* {
　　margin: 0;
　　padding: 0;
　　}
　　/*图片上传*/
　　html,
　　body {

　　>
　　>　　}
　　.container {

　　>
　　>　　overflow: auto;
　　clear: both;
　　}
　　.z_photo {

　　>
　　>　　padding: 0.3rem;
　　overflow: auto;
　　clear: both;
　　margin: 1rem auto;
　　border: 1px solid #555;
　　}
　　.z_photo img {

　　>
　　>　　}
　　.z_addImg {
　　float: left;
　　margin-right: 0.2rem;
　　}
　　.z_file {

　　>
　　>　　background: url('images/addxp.png') no-repeat;
　　background-size: 100% 100%;
　　float: left;
　　margin-right: 0.2rem;
　　}
　　.z_file input::-webkit-file-upload-button {

　　>
　　>　　border: none;
　　position: absolute;
　　outline: 0;
　　opacity: 0;
　　}
　　.z_file input#file {
　　display: block;

　　>　　border: 0;
　　vertical-align: middle;
　　}
　　/*遮罩层*/
　　.z_mask {

　　>
　　>　　background: rgba(0, 0, 0, .5);
　　position: fixed;
　　top: 0;
　　left: 0;
　　z-index: 999;
　　display: none;
　　}
　　.z_alert {

　　>
　　>　　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;

　　>
　　>　　line-height: .5rem;
　　float: left;
　　border-top: 1px solid #ddd;
　　}
　　.z_cancel {
　　border-right: 1px solid #ddd;
　　}
　　</style>
　　</head>
　　<body>
　　<div>
　　
　　<div>
　　<div>
　　<form method="post" action="scxp.php" enctype="multipart/form-data">
　　<input type="file" name="u_file[]" value="" accept="image/*" multiple onchange="imgChange('z_photo','z_file');" />
　　<br/> <br/>
　　<input type="submit" value="上传" name="submitBtn" />
　　</form>
　　</div>
　　</div>
　　
　　<div>
　　
　　<div>
　　<p>确定要删除这张图片吗？</p>
　　<p>
　　<span>取消</span>
　　<span>确定</span>
　　</p>
　　</div>
　　</div>
　　</div>
　　<script type="text/javascript">
　　//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);
　　imgArr.push(imgUrl);
　　var img = document.createElement("img");
　　img.setAttribute("src", imgArr);
　　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";
　　};
　　}
　　};
　　};
　　</script>
　　</body>
　　</html>
　　<?php
　　if($_POST['submitBtn'] == '上传'){//判断提交按钮是否为空
　　/*echo "OK<br/>";
　　echo "数组：".$_FILES."<br/>";
　　if($_FILES){
　　echo "是数组<br/>";
　　$file = $_FILES["u_file"];
　　echo "数组的个数：".count($file)."<br/>";//5
　　$name = $file["name"];
　　echo "数组的个数：".count($name)."<br/>";//1
　　}*/
　　//$num = $_FILES["u_file"]["name"];
　　//echo "个数是：".count($num);
　　//上传多张图：同时上传多张图的上传原理和单张图上传原理是相同的，只不过在对上传字段进行出来了时候增加了一个数组的应用。注意input的name是一个数组的形式，php中获取数组个数的时候，才能获取到有效的数组长度。
　　for($i=0; $i<count($_FILES["u_file"]["name"]); $i++){
　　$file_path = "images/upload1/";//定义图片在服务器中的存储位置
　　$picture_name=$_FILES['u_file']['name'][$i];//获取上传图片的名称
　　$picture_name=strstr($picture_name , ".");//通过strstr()函数截取上传图片的后缀
　　if($picture_name!= ".jpg"){//根据后缀判断上传图片的格式是否符合要求
　　echo "<script>alert('上传图片格式不正确,请重新上传');</script>";//这里有刷新页面
　　}else if($_FILES['u_file']['tmp_name'][$i]){
　　echo "临时路径：".$_FILES['u_file']['tmp_name'][$i]."<br/>";
　　$dataImgName[$i] = date('Ymdhis').$i;//同时上传，后面的会覆盖前面的，所有再在后面加上一个变量区别开，避免覆盖。
　　echo "实际路径：".$file_path.$dataImgName[$i]."<br/>";
　　move_uploaded_file($_FILES['u_file']['tmp_name'][$i],$file_path.$dataImgName[$i]);
　　//执行图片上传
　　//echo '<script>alert("图片上传成功！");</script>';
　　}
　　else
　　echo '<script>alert("图片上传失败！");</script>';
　　}
　　/*
　　//上传单张图
　　$file_path = "images/upload1/";//定义图片在服务器中的存储位置
　　$picture_name=$_FILES['u_file']['name'];//获取上传图片的名称
　　$picture_name=strstr($picture_name , ".");//通过strstr()函数截取上传图片的后缀
　　if($picture_name!= ".jpg"){//根据后缀判断上传图片的格式是否符合要求
　　echo "<script>alert('上传图片格式不正确,请重新上传');</script>";//这里有刷新页面
　　}else if($_FILES['u_file']['tmp_name']){
　　$dataImgName = date('Ymdhis');
　　move_uploaded_file($_FILES['u_file']['tmp_name'],$file_path.$dataImgName);
　　//执行图片上传
　　echo '<script>alert("图片上传成功！");</script>';
　　}
　　else
　　echo '<script>alert("图片上传失败！");</script>';
　　}*/
　　}
　　?>
　　$_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.
　　/*******************************************************************/
　　题目：怎么样通过php使用html5实现多文件上传？（php多图上传）
　　答案：
　　定义和用法
　　multiple 属性规定输入字段可选择多个值。如果使用该属性，则字段可接受多个值。
　　实例：
　　<form action="demo_form.asp" method="get">
　　Select images: <input type="file" name="img" multiple="multiple" />
　　<input type="submit" />
　　</form>
　　上面实例中的input file 可接受多个文件上传字段。
　　了解了html5中file的multiple属性，下面我们开始讲解使用html5实现多文件上传。
　　实例代码：
　　html:
　　<!DOCTYPE html>
　　<html>
　　<head>
　　<meta charset="UTF-8">
　　</head>
　　<body>
　　<form action="my_parser.php" method="post" enctype="multipart/form-data">
　　<p><input name="upload[]" type="file" multiple="multiple" /></p>
　　<input type="submit" value="Upload all files">
　　</form>
　　</body>
　　</html>
　　php代码：
　　for($i=0; $i<count($_FILES['upload']['name']); $i++) {
　　//Get the temp file path
　　$tmpFilePath = $_FILES['upload']['tmp_name'][$i];
　　//Make sure we have a filepath
　　if ($tmpFilePath != ""){
　　//Setup our new file path
　　$newFilePath = "./uploadFiles/" . $_FILES['upload']['name'][$i];
　　//Upload the file into the temp dir
　　if(move_uploaded_file($tmpFilePath, $newFilePath)) {
　　//Handle other code here
　　}
　　}
　　}

账号		自动登录	找回密码
密码			立即注册

wirelessnetview好用的无线分析工具

Red Hat RHCE 8 (EX294) Cert Guide

Shell从入门到精通（阿良）

亿图图示专家(EDraw Max) V7.9 中文破解版

zabbix3.4.1安装部署+微信推送信息+大屏显

Red Hat OpenShift I: Containers & Kubern

2025 年，C++ 还能“硬核”多久？

[经验分享] 怎么样通过php使用html5实现多文件上传？（php多图上传）

浏览过的版块

扫码加入运维网微信交流群