怎么樣通過php使用html5實現多文件上傳？（php多圖上傳）

本文轉載自查看原文 2017-05-01 22:12 1492 PHP

<!DOCTYPE html>
<html lang="zh-cn">

</style>
</head>

<body>

</div>

<div class="z_mask">

<div class="z_alert">
<p>確定要刪除這張圖片嗎？</p>
<p>
<span class="z_cancel">取消</span>
<span class="z_sure">確定</span>
</p>
</div>
</div>
</div>

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

}
};
};

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

}
}
}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Java Web使用Html5 FormData實現多文件上傳 HTML5實現圖片文件異步上傳 HTML5 FormData實現文件上傳實例移動端HTML5實現文件上傳 HTML5 文件上傳 HTML5矢量實現文件上傳進度條 Vue.Js（html5） + Java實現文件分片上傳前端開發之旅- 移動端HTML5實現文件上傳 PHP之：多圖上傳 [PHP] layui實現多圖上傳，圖片自由排序，自由刪除