ThinkPHP5 AJAX实现实时图片上传并显示

本篇文章主要介绍了如何在ThinkPHP5框架下利用Ajax实现单张图片的实时上传，并且能够在前端页面上即时显示图片。以下是详细步骤和代码解读： 1. **HTML结构**: 开始部分定义了一个简单的HTML表单，其中包含一个用于选择图片的`<input>`元素，其type属性设为`file`，允许用户选择文件。表单还包含一个隐藏字段`<input type="hidden" name="" id="front" value="">`，用于存储上传图片的路径。另外，`<div id="result"></div>`用于显示上传后的图片。 2. **JavaScript部分**: JavaScript函数`picture()`被绑定在图片选择框的`onchange`事件上。当用户选择图片后，该函数会被调用。`new FormData($('#form')[0])`这一行创建了一个FormData对象，它包含了表单中所有带有name属性的输入字段及其值，包括用户上传的图片。 3. **Ajax请求**: 使用jQuery的`.ajax()`方法发送POST请求到后端的API接口`http://tp5-shopxo.likeball.top/index.php?s=/api/Mi/measurement`。参数设置如下： - `url`: 表示请求的目标地址。 - `type`: 设置为'POST'，表示向服务器发送数据。 - `data`: 传递FormData对象，它包含了前端上传的数据。 - `dataType`: 设置为'JSON'，预期服务器返回的数据格式。 - `cache`, `processData`, 和 `contentType` 设置为`false`，是为了禁用浏览器缓存处理和自动设置请求头，确保数据以原始格式发送。 4. **图片上传与显示**: 如果服务器返回的响应数据（data）中存在`whether`键（假设服务器会检查上传是否成功），则执行以下操作： - 创建一个字符串变量`result`，用于存储图片的HTML `<img>`标签。 - 构造URL，使用模板字符串的方式将图片URL插入到`<img>`标签的`src`属性中。这里的URL使用了PHP的`%20+`进行URL编码，以确保安全。 - 将生成的图片标签追加到`#result`元素中，从而实现实时显示。 5. **注意事项**: - 在实际开发中，你需要在ThinkPHP5的控制器（如`Api/Mi/MeasurementController.php`）中处理这个POST请求，并处理上传图片的逻辑，包括文件的接收、验证、存储以及返回是否成功的响应。 总结来说，这篇文章提供了在ThinkPHP5环境中使用Ajax进行图片上传和实时预览的实例，通过前端的JavaScript和后端的API交互实现了功能。开发者可以根据需求扩展这个基础示例，比如添加多图片上传、错误处理、文件存储路径管理等。