php ajax无刷新上传图片实例代码
将index.html和upload.php文件保存到支持PHP的空间的同级目录,并测试运行,你将看到以下的生动展示。
AJAX客户端页面——index.html
```html
Ajax文件上传示例
// 上传函数
function uploadBtn_onclick() {
var data = "";
var spliter = "-7d8d733180846"; // 分隔符
var datadata = data + spliter + "\r"; // 开始部分数据构造
datadata += "Content-Disposition: form-data; name=\"photofile\"; filename=\"C:\\a.txt\"\r"; // 文件信息描述
// datadata += "Content-Type: image/pjpeg" + vbCrLf // 文件类型注释掉,因为我们这里上传的是文本文件
datadata += "Content-Type: text/plain\r"; // 设置文件类型(这里是文本)后加换行符
datadata += "\r"; // 空行分隔消息头与消息体(正文)内容,即空行标识了数据的开始。
var text = "My name is Wilson Lin."; // 附加文本数据,模拟上传文件内容
var postLength = text.length + data.length + 2 + spliter.length + 4; // 计算POST数据长度(包含边界长度) 为稍后的请求头设置做准备。 var package = data + text + "\r" + spliter + "--\r"; // 组合整个POST包数据(包含边界)。准备发送数据到服务器。
alert(package); // 弹出对话框显示即将发送的数据包内容。这通常用于调试目的,以确认数据格式和大小是否正确。
// 使用AJAX向服务器发送数据(模拟文件上传)。这里使用的是ActiveXObject对象进行旧版IE浏览器的兼容处理。现代浏览器建议使用fetch API或XMLHttpRequest对象来实现更简洁和现代的AJAX请求。但这里为了保持原意和兼容性,我们继续使用ActiveXObject。 var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
```
PHP服务器端代码——upload.php:
```php
// 获取通过表单上传的文件数组信息 $_FILES['photofile'] 是全局数组用于获取上传文件的信息。这里假设上传的文件名是 'photofile',实际使用时请根据前端表单的命名进行相应调整。 // 指定文件保存地址 $uploadfile = "D:/".$_FILES['photofile']['name']; // 将临时文件复制到指定地址 copy( $_FILES['photofile']['tmp_name'], $uploadfile ); // 输出文件访问链接供用户点击访问 echo "URL: ".$_FILES['photofile']['name']."
"; echo "Upload succeeded!";
?>
``` 当你完成以上步骤后,点击客户端的上传按钮,即可触发AJAX请求将文件上传到服务器,并在页面上显示服务器返回的响应信息。整个过程无需刷新页面,提供了流畅的用户体验。
编程语言
- php ajax无刷新上传图片实例代码
- php打印输出棋盘的实现方法
- JavaScript自执行函数和jQuery扩展方法详解
- Angularjs 制作购物车功能实例代码
- php的instanceof和判断闭包Closure操作示例
- angularjs创建弹出框实现拖动效果
- php post json参数的传递和接收处理方法
- asp.net获取ListView与gridview中当前行的行号
- JS检测数组类型的方法小结
- 浅析php原型模式
- AJAX 异步传输数据的问题
- WordPress中用于获取及自定义头像图片的PHP脚本详
- jQuery基于图层模仿五星星评价功能的方法
- PHP反射机制用法实例
- JS实现动态增加和删除li标签行的实例代码
- 超好用轻量级MVC分页控件JPager.Net