淘先锋技术网

首页 1 2 3 4 5 6 7

今天我们来介绍一种web开发技术----ajax上传。ajax上传可以实现在不刷新页面的情况下上传文件,非常方便。我们使用php作为后端语言,来实现一个简单的ajax上传文件的功能。

首先我们需要创建一个可以上传文件的表单。代码如下:

<form id="uploadForm" enctype="multipart/form-data">
<input type="file" id="file" name="file"/>
<input type="button" value="上传" onclick="uploadFile()"/>
</form>

在这里我们使用了enctype="multipart/form-data"来指定表单的编码类型为multipart/form-data,表示这个表单可以上传文件。input标签type属性值为file,表示这是一个上传文件的input标签。我们还需要一个按钮,来触发上传操作。

当我们点击上传按钮时,需要调用javascript函数来进行文件上传。代码如下:

<script>
function uploadFile() {
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function(data){
alert(data);
}
});
}
</script>

在这里我们使用了FormData对象来存储上传文件的数据,然后将formData作为data属性传入ajax方法。contentType属性设置为false说明不需要设置Content-Type请求头部。processData属性设置为false说明不需要将data转换为查询字符串。当服务器上传成功后,ajax方法的success回调函数会被调用,我们可以在这里做一些操作,比如弹出一个对话框来提示用户上传成功。

最后我们需要在服务器端编写上传文件的代码。代码如下:

<?php
$fileName = $_FILES['file']['name'];
if(move_uploaded_file($_FILES['file']['tmp_name'], './upload/'.$fileName)) {
echo '上传成功!';
} else {
echo '上传失败!';
}
?>

我们首先获取上传文件的名字,然后使用move_uploaded_file函数来保存上传的文件。如果保存成功,就返回“上传成功!”字符串,否则返回“上传失败!”字符串。

总结一下,使用ajax上传和php进行后台处理,可以实现在不刷新页面的情况下上传文件。这种开发方式可以带来很大的便利,特别是在一些需要多次上传文件的场景下。