文件上传功能是动态Web应用程序的常用功能。通常,php采用提交表单并刷新页面的方法上传文件。但是,如果您想提供更好的用户体验,则可以使用jQuery和Ajax来上传文件而无需刷新页面。
上传文件的最简单方法是使用FormData。它使用键/值对发送XMLHttpRequest请求。最初,FormData用于发送键/值对中的所有表单数据,但也可以用于发送键控数据。FormData发送的数据格式与表单的Submit()提交方法中使用的格式相同。如果我们在表单的编码中使用multipart/form-data,它也会发送上传数据。
本文中将向您展示如何使用FormData对象和PHP提交表单数据上传文件。
创建一个HTML表单
在你的网站根目录创建一个文件夹命名为AJAX-upload,然后在该文件夹中创建一个index.html页面。页面代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>AJAX fiel Uploading</title>
</head>
<body>
<p>Image uploader</p>
<input type="file" id="fileAjax" name="fileAjax" /><br /><br />
<button id="upload">Upload</button>
<p id="status"></p>
<script type="text/javascript" src="imageUpload.js"></script>
</body>
</html>
创建一个AJAX脚本
编写JavaScript代码,这段代码进行Ajax调用并向服务器端处理响应。在AJAX-upload文件夹中创建一个js文件并命名为imageUpload.js,将一下代码复制到该文件中。
$('#upload').on('click', function() {
var file_data = $('#sortpicture').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
alert(form_data);
$.ajax({
url: 'upload.php', // point to server-side PHP script
dataType: 'text', // what to expect back from the PHP script, if anything
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function(php_script_response){
alert(php_script_response); // display response from the PHP script, if any
}
});
});
上面代码发送文件到服务器,服务器脚本upload.php将作出响应。
创建服务器端PHP脚本以接受来自AJAX请求的数据
在此阶段,我们已经完成了将文件内容发送到服务器端的工作。现在创建一个文件upload.php
,在该文件中 ,我们必须编写PHP代码,该文件将文件上传到服务器上。
<?php
header("Content-Type: text/html;charset=utf-8");
if (!file_exists('./Upload')) {
mkdir('uploads', 0777);
}
$MyFilePath="./Upload/";
$Extensions= array("jpeg","jpg","png");
$MaxFileSize=2;
$Time=time();
if(isset($_FILES['myFile'])){
$file_name = $_FILES['myFile']['name'];
$file_size = $_FILES['myFile']['size'];
$file_tmp = $_FILES['myFile']['tmp_name'];
$file_type = $_FILES['myFile']['type'];
$name_arr = explode('.',$_FILES['myFile']['name']);
$file_ext=strtolower(end($name_arr));
if(in_array($file_ext,$Extensions)=== false){
echo "400ExeErr";
}
if($file_size > ($MaxFileSize*1024*1024)) {
echo "400FileSizeErr";
}
if(in_array($file_ext,$Extensions)=== true&&$file_size < ($MaxFileSize*1024*1024)){
$NewFileName=$Time."_".$file_name;
$AllFilePath=$MyFilePath.$NewFileName;
move_uploaded_file($file_tmp,$AllFilePath);
echo $AllFilePath;
}
}
?>
上面的PHP代码首先检查'uploads'目录。如果该目录不存在,那么它将创建该目录并将发送过来的文件上传到该文件夹中。
以上就是本文的全部内容,希望对大家的学习有所帮助。更多教程请访问码农之家标签:异步,文件,上传,AJAX,file,PHP,data From: https://www.cnblogs.com/myhomepages/p/16619543.html