当前位置：首页 > news >正文

PHP 文件上传

news 2025/7/23 5:20:31

使用vue3处理js逻辑，可以使用js源码但是vue更方便。

表单注意事项：

enctype="multipart/form-data" 必须存在否则php后端接收不到$_FILES数据
form 表单直接使用form属性action和method会跳转到请求的php文件，使用js可以异步操作页面没有跳转
上传多个文件，input name应该包含“[]”，否则后端仅识别最后提交的文件
上传多个文件，input 应设置 multiple 属性
表单中不设置button的type默认为submit，onclick可能不会被触发，所以要设置为button

js处理原理：

获取上传数据
上传时判断文件是否可上传，文件数据大于零，文件类型大小等
post请求处理文档上传
输出上传结果

1 表单

<div id="app"><div><h1>UPLOAD</h1><div><form enctype="multipart/form-data">Send this file: <input  type="file" name="files[]" multiple @change="handleFileUpload" ref="selectedFileInput"/><button  type="button"  @click="submitFile">submit</button><button type="button"  @click="resetbtn">reset</button></form></div></div>
</div>

2 vue3请求

<script src="https://unpkg.com/vue@3.5.17/dist/vue.global.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>const { createApp, ref,reactive,onMounted } = VuecreateApp({setup() {const selectedFile = ref(null);const selectedFileInput = ref(null)const handleFileUpload = (event) => {console.log(event);selectedFile.value = event.target.files; // 获取第一个选择的文件};const submitFile = () => {console.log(selectedFile.value)if (!selectedFile.value) {alert("请选择一个文件！");return;}_submitFile();}function _submitFile(){// 这里可以添加将文件发送到服务器的代码，例如使用FormData和XMLHttpRequest，或者使用axios等库。const formData = new FormData();let files = selectedFile.valuefor (var i = 0; i < files.length; i++) {formData.append('files[]', files[i]);}// formData.append('files', selectedFile.value);_doRequest(formData)}function _doRequest(formData){const url ="upload.php";// 示例使用axios发送文件axios.post(url, formData, {headers: {'Content-Type': 'multipart/form-data',// 'Sec-Fetch-Dest':'document'}}).then(response => {console.log('文件上传成功', response);selectedFile.value = null}).catch(error => {console.error('文件上传失败', error);});};function _doRequest2(formData){var xhr = new XMLHttpRequest();xhr.open('POST', 'upload.php', true);xhr.onload = function () {if (this.status >= 200 && this.status < 300) {console.log(this.response); // 处理响应} else {console.error('Upload failed.');}};xhr.send(formData);}const resetbtn = ()=>{console.log(selectedFileInput.value)if(selectedFileInput.value){const inputElement = document.querySelector('input[name="files[]"]');if (inputElement) {inputElement.value = null; // 重置文件输入selectedFile.value = null}}}onMounted(()=>{console.log(selectedFileInput.value)console.log(selectedFile.value)})return {submitFile,handleFileUpload,selectedFile,selectedFileInput,resetbtn}}}).mount('#app')</script>

3 PHP处理

通用方法 common.php

function uploadfile($file, $toPath = null, $usename = false) {$uploadDefaultPath = PATH_UPLOAD;if (empty($toPath)) {$toPath = $uploadDefaultPath;} else {$toPath = $uploadDefaultPath . "/" . $toPath;if (!is_dir($toPath)) {mkdir($toPath);}}$fromfilepath = $file['tmp_name']; //D:\document\files_upload_tmp_dir\php7C1.tm 临时文件$oldfilename = $file['name'];if (!is_uploaded_file($fromfilepath)) {return false;}$fielpathinfo = pathinfo($oldfilename);$extension = $fielpathinfo['extension'];$oldfilename = $fielpathinfo['filename'];$fielename = date('YmdHis', time()) . mt_rand();if ($usename) {$fielename = $oldfilename;}$fielename .= "." . $extension;$toPath = $toPath . "/" . $fielename;$result = move_uploaded_file($fromfilepath, $toPath);return $result;
}
function backjson($code, $msg, $data = []) {$data = ['code' => $code,'msg' => $msg,'data' => $data,];$str = json_encode($data, 304);exit($str);
}

业务处理 upload.php

include_once "common.php";define("PATH_UPLOAD", "./upload");
if ('POST' == $_SERVER['REQUEST_METHOD']) {if (isset($_FILES['files']) && count($_FILES['files']) > 0) {$files = $_FILES['files'];$fiels_arr = [];if (count($files['name']) >= 1) {foreach ($files['name'] as $key => $value) {$file_time = ['name' => $files['name'][$key],'type' => $files['type'][$key],'tmp_name' => $files['tmp_name'][$key],'error' => $files['error'][$key],'size' => $files['size'][$key],];$fiels_arr[] = $file_time;}} else {$fiels_arr[] = $files;}$success_count = 0;$error_list = [];foreach ($fiels_arr as $key => $value) {try {$result = uploadfile($value, "test", true);if ($result) {$success_count++;} else {throw new \Exception($valu['name'] . "上传失败");}} catch (\Exception $th) {$msg = $th->getMessage();$code = $th->getCode();$error_list[] = $msg;}}if (count($error_list) > 0) {$errormsg = implode(" ", $error_list);backjson(0, $errormsg);}backjson(1, "上传成功");}
}