AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

原生PHP 图片上传并渲染指定dom中

2023-08-02 50
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
RDS MySQL Serverless 基础系列，0.5-2RCU 50GB
推荐场景：
学生管理系统数据库设计 搭建个人博客
云数据库 RDS MySQL，集群系列 2核4GB
推荐场景：
搭建个人博客
云数据库 RDS MySQL，高可用系列 2核4GB
简介： 原生PHP 图片上传并渲染指定dom中 


1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
7. <title>Document</title>
8. <script src="jquery-3.6.0.min.js"></script>
9. </head>
10. 
11. <style>
12.   .imge img{
13.     width: 150px;
14.     height: 80px;
15.     margin-top: 70px;
16.     margin-left: 80px;
17.   }
18. </style>
19. 
20. 
21. <body>
22.   <form id="forms"  >
23.     <label>上传图片:<input type="file" id="file" name="file"></label>
24. 
25.     <input type="button" value="上传" id="sub">
26.   </form>
27.   <div class="imge"></div>
28. 
29. <script>
30. 
31. let sub=document.getElementById('sub');
32. sub.onclick=function(){
33.   var form = new FormData(document.getElementById('forms'));
34.     console.log(form);
35.     $.ajax({
36.       url: "../index.php",
37.       type: 'POST',
38.       data: form,
39.       processData: false,
40.       contentType: false,
41.       success: function(data) {
42.       console.log(data);
43.       document.getElementsByClassName('imge')[0].innerHTML = data;
44.       },
45.     });
46. }
47. 
48. 
49. </script>
50. </body>
51. </html>
1. <?php
2. 
3. $allowedExts = array("gif", "jpeg", "jpg", "png");
4. $temp = explode(".", $_FILES["file"]["name"]);
5. // var_dump($_FILES["file"]);
6. 
7. $extension = end($temp);     // 获取文件后缀名
8. if (in_array($extension, $allowedExts))
9. {
10.   if ($_FILES["file"]["error"] > 0)
11.   {
12.     echo "错误：: " . $_FILES["file"]["error"] . "<br>";
13.   }
14.   else
15.   {
16.     if (file_exists("upload/" . $_FILES["file"]["name"]))
17.     {
18.       echo $_FILES["file"]["name"] . " 文件已经存在。 ";
19.     }
20.     else
21.     {
22.       move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $_FILES["file"]["name"]);
23. $uploadimg="upload/" . $_FILES["file"]["name"];
24. 
25. $dbhost = 'localhost';  // mysql服务器主机地址
26.       $dbuser = 'root';            // mysql用户名
27.       $dbpass = '123456';          // mysql用户名密码
28.       $conn = mysqli_connect($dbhost, $dbuser, $dbpass);
29.       mysqli_select_db( $conn, 'mysql' );
30.       mysqli_query($conn , "set names utf8");
31. //插入数据库
32.     $sql = "INSERT INTO imgs ".
33.      "(img) ".
34.   "VALUES ".
35.      "('$uploadimg')";
36.     $retval = mysqli_query( $conn, $sql );
37. 
38. 
39.     $select = "select * from imgs where img='$uploadimg'";
40. 
41.     $retvals = mysqli_query( $conn, $select );
42.     while($row = mysqli_fetch_array($retvals,MYSQLI_ASSOC)){
43.       echo "<img src='{$row['img']}'>";
44. 
45.     }
46.     if(! $retval )
47.     {
48.      die('无法插入数据: ' . mysqli_error($conn));
49.     }
50.     }
51.   }
52. }
53. else
54. {
55.   echo "非法的文件格式";
56. }
57. 
58. 
59. 
60. 
61. 
62. 
63. 
64. ?>


文章标签：
云数据库 RDS MySQL 版
JavaScript
PHP
关键词：
dom渲染
PHP原生
原生dom
渲染dom
PHP图片
相关实践学习
如何在云端创建MySQL数据库
开始实验后，系统会自动创建一台自建MySQL的 源数据库 ECS 实例和一台 目标数据库 RDS。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心，利用清洁计算为万物互联的新世界提供源源不断的能源动力，目前开服的区域包括中国（华北、华东、华南、香港）、新加坡、美国（美东、美西）、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程，来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品：云服务器ECS 云服务器 ECS（Elastic Compute Service）是一种弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
全职程序猿
目录
相关文章
光明顶阳顶天
|
9天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染，了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略，可以提高网页的性能和用户体验，确保页面能够快速、流畅地呈现给用户。在实际开发中，要根据具体情况进行权衡和调整，以达到最佳的效果。
光明顶阳顶天
19 1
游客qeoynko2nmbgk
|
2月前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素（上）
用HTML DOM实现有条件地渲染网页元素（上）
游客qeoynko2nmbgk
161 71
游客qeoynko2nmbgk
|
2月前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素（下）
用HTML DOM实现有条件地渲染网页元素（下）
游客qeoynko2nmbgk
139 70
二二*一一
|
7天前
|
前端开发 PHP 数据库
原生PHP网站源码
原生PHP网站通常指的是使用纯PHP代码编写的网站，没有使用框架或者类库来简化开发流程。
二二*一一
15 1
kgmh2cwvierzy
|
2月前
|
Web App开发 PHP iOS开发
易优CMS PHP原生标签调用
这段代码实现了一个自动化工具，用于从指定的漫画网站下载章节内容，并将其转换为PDF格式。它首先通过用户输入的链接获取网页信息，然后根据用户的选择下载整个章节或特定章节的图片，并保存到本地文件夹中。下载完成后，工具会将这些图片合并成一个PDF文件，并添加书签以便于浏览。此外，代码还包含了异常处理机制，确保在网络不稳定时能够重试下载。
kgmh2cwvierzy
28 4
六卿
|
2月前
|
JavaScript
Vue3基础(十wu)___ref获取原生dom元素
本文介绍了Vue3中使用`ref`来获取和操作原生DOM元素的方法，通过示例展示了如何通过`.value`改变元素的样式。
六卿
40 0
Vue3基础(十wu)___ref获取原生dom元素
蓝易云
|
28天前
|
缓存 NoSQL 数据处理
原生php实现redis缓存配置和使用方法
通过上述步骤，你可以在PHP项目中配置并使用Redis作为高性能的缓存解决方案。合理利用Redis的各种数据结构和特性，可以有效提升应用的响应速度和数据处理效率。记得在实际应用中根据具体需求选择合适的缓存策略，如设置合理的过期时间，以避免内存过度消耗。
蓝易云
41 0
东方睿赢
|
3月前
|
JavaScript 算法 前端开发
"揭秘虚拟DOM的神奇魔法：从零开始打造高效渲染引擎，颠覆你的DOM操作认知！"
【8月更文挑战第20天】虚拟DOM是一种优化技术，通过在内存中构建DOM树的轻量级副本，减少浏览器重排和重绘，提升性能。本文简要介绍了DOM及其重要性，并深入解释了虚拟DOM的概念。虚拟DOM通过模拟真实DOM结构，在内存中进行数据更新，仅将变动部分同步到实际DOM。文中还提供了一个简易虚拟DOM的实现方案，包括虚拟节点创建、渲染函数及一个基本的diff算法，用于比对新旧虚拟DOM并高效更新实际DOM。通过示例展示了如何构建和渲染一个简单的虚拟DOM。这有助于理解虚拟DOM的基本工作原理和技术细节。
东方睿赢
45 4
奔跑的数据
|
3月前
|
数据采集 JavaScript 数据挖掘
如何使用 PHP Simple HTML DOM Parser 轻松获取网页中的特定数据
本文介绍了使用PHP Simple HTML DOM Parser进行网页数据抓取的方法，尤其适用于从懂车帝二手车网站提取汽车品牌、价格和里程等关键信息。首先，安装并配置所需库，使用代理IP和设置cookie与useragent来模拟用户行为，避免被封。然后，通过编写PHP脚本，利用cURL获取网页内容，解析HTML并提取所需数据，最终将数据保存至CSV文件。文章强调了正确配置代理和用户代理的重要性，并提供了完整的PHP代码示例，以帮助读者理解和应用网页抓取技术。
奔跑的数据
60 0
如何使用 PHP Simple HTML DOM Parser 轻松获取网页中的特定数据
蓝易云
|
4月前
|
测试技术 PHP 开发者
原生php单元测试示例
通过上面的示例，我们可以看到，即使在缺乏专门测试框架的情况下，使用原生PHP代码进行基本的单元测试也是完全可行的。当然，对于更复杂的项目，利用像PHPUnit这样的专业工具将带来更多的便利和高级功能。不过，理解单元测试的基本概念和能够手工编写测试是每个PHP开发者的宝贵技能。
蓝易云
34 4