你可以使用Ajax上传图片吗？

14 浏览
0 Comments

你可以使用Ajax上传图片吗？

我想使用$.ajax上传图片，但我收到以下PHP错误：

undefined index:files

这是我的HTML和JS代码：

这是我的PHP代码：

";
        }
    }
} 
?>

0

1 答案

0 Comments

使用Ajax来上传图片的问题出现的原因是，作者想要通过Ajax的方式将图片上传到服务器，然后将上传的结果显示在页面上。

解决方法是，作者使用了jQuery库和Bootstrap库来辅助实现图片上传的功能。首先，作者在页面中引入了Bootstrap和jQuery的库文件。然后，作者在页面加载完成后，通过jQuery的`$(document).ready()`方法来绑定表单的提交事件。当表单被提交时，通过Ajax的POST请求将表单数据以FormData的形式发送到后台的"upload.php"脚本。在Ajax请求中，作者设置了`contentType`为false，表示不设置请求头的Content-Type，以便浏览器自动识别为multipart/form-data类型。同时，作者也设置了`processData`为false，以便不对数据进行转换处理。在Ajax请求成功后，作者将返回的结果追加到页面上的`

`元素中。

在"upload.php"脚本中，作者首先包含了一个名为"connect.php"的文件，用于连接数据库。然后，作者判断`$_FILES`数组是否存在，如果存在则遍历`$_FILES['files']['name']`数组，处理每个上传的文件。作者通过`explode()`函数获取文件的扩展名，并检查扩展名是否在允许的范围内。如果扩展名合法，则生成一个新的文件名，并将临时文件移动到目标路径。移动成功后，作者将图片的路径插入到数据库中，并输出一个``标签，将上传的图片显示在页面上。

作者通过使用Ajax、jQuery和Bootstrap库，成功实现了通过Ajax上传图片并在页面上显示的功能。

0