发送ajax请求实现上传图片显示在网页上

 1 <?php
 2 // 1,通过超全局变量来获取files[上传的图片名称]
 3     $file = $_FILES["files"]
 4 // 2,在通过strrchr来获取图片的格式
 5     $ext = strrchr($file[‘name‘],‘.‘);
 6 // 3,通过uniqid函数随机获取文件名避免名称重复覆盖
 7     $filename = uniqid().$exe;
 8 // 4,可以把获取的图片的名称存在session里面,以免后面用到,这步可写可不写;
 9     session_start();
10     $_SESSION[‘url‘] = $str;19:36:16
11 // 5,通过move_uploaded_file函数把上传获取的图片存在一个文件夹内
12     $bool = move_uploaded_file($file[‘tmp_name‘],‘../../static/uploads/‘.$filename);
13 // 6,把处理好的图片路径返回给前端
14     if ($bool) {
15         echo "../static/uploads/" . $fileName;
16     } else {
17         echo "上传失败";
18     };
19 ?>
20
21 <!DOCTYPE html>
22 <html lang="en">
23
24 <head>
25     <meta charset="UTF-8">
26     <meta name="viewport" content="width=device-width, initial-scale=1.0">
27     <meta http-equiv="X-UA-Compatible" content="ie=edge">
28     <title>Document</title>
29     <script src="../static/assets/vendors/jquery/jquery.min.js"></script>
30     <script>
31         $(function () {
32             $("#uploadImg").on("change", function () {
33                 // console.log(this.files);
34                 var file = this.files[0];
35                 var data = new FormData();
36                 data.append(‘file‘, file);
37                 // console.log(data);
38                 $.ajax({
39                     type: "post",
40                     url: "./api/_addPosts.php",
41                     data: data,
42                     dataType: "json",
43                     success: function (res) {
44                         console.log(res)
45                     }
46                 });
47             });
48         })
49     </script>
50 </head>
51
52 <body>
53     <input type="file" name="" id="uploadImg">
54 </body>
55
56 </html>

原文地址:https://www.cnblogs.com/zbx-boke/p/9383165.html

时间: 2024-08-01 19:57:53

发送ajax请求实现上传图片显示在网页上的相关文章

通过在jquery中添加函数发送ajax请求来加载数据库数据,以json的格式发送到页面

通过在jquery中添加函数发送ajax请求来加载数据库数据,以json的格式发送到页面 从数据库中查询仓库信息,显示在下拉菜单中: 首先,引入js插件,这里使用jquery-1.8.3.js <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script> 当页面加载完成后,就应该发送ajax请求到数据库,

原生js和jquery发送ajax请求及封装

原生js                                   // ajax get 五部曲function ajax_get(url,data){ // 异步对象 var ajax=new XMLHttpRequest(); // 设置url和请求方式 // url方法 如果有数据要把数据拼接到url中?name=jack&age=20 if(data){ url+=?; url+=data; }else{}; ajax.open('get',url); // 发送请求 aja

防止重复发送Ajax请求的解决方案

防止重复发送Ajax请求的解决方案 这篇文章主要介绍了防止重复发送Ajax请求的解决方案,感兴趣的小伙伴们可以参考一下 在页面中有多个按钮,点击该按钮可以异步的去服务端读取数据,然后在前端将数据展示出来. 每个按钮点击请求的页面都是同一个,但是请求的参数不同,所以返回的内容就不同. 在连续点击多个按钮的时候就会发出多个异步请求.那么根据请求返回的快慢(因为不同按钮参数不同,返回内容不同,所以会有快慢之分),数据会依次的展示出来,那么就会出现一个先点击的按钮,由于他请求的数据量比较大,导致数据被后

使用原生JavaScript发送ajax请求

关于使用原生JavaScript发送异步请求给服务端. 准备工作: 代码编写工具用的是sublime 服务端使用的是wamp搭的一个本地Apache服务器,主要用来返回数据 方便测试 步骤: 浏览器端 html标签绑定事件发送ajax请求----> 五步操作:1 创建异步对象XMLHttpRequest; 2 设置method url 3 发送请求给服务端 4 注册事件   5 在事件中获取服务端返回的数据,进行操作. 服务器端 1 获取请求数据 2 返回结果给浏览器 下面来一个小demo1做一

JQuery发送ajax请求不能用数组作为参数

JQuery发送ajax请求不能用数组作为参数,否则会接收不到参数, 一.js代码如下: $('#delete-button').click(function(){        var selectedMembers = document.getElementsByName('selectedMembers');        var cwIds = new Array(); //定义数组        for(var i=0;i<selectedMembers.length;i++){  

jQuery发送ajax请求三种方式

<button>点击发送ajax get请求</button> <button>点击发送ajax post请求</button> <button>点击发送通用的ajax请求</button> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="te

Java+Json+JQuery将本地文件显示在网页上

前段时间为是练习JQuery和Java遍历目录,写了一个JavaWeb(使用Jsp+Servlet)的例子.源代码下载:https://github.com/liaoyu/uudisk 上述源码是Myeclipse新建的项目,需要配置一些环境,比如JRE路径,以下是运行截图,界面模仿新浪微盘 工作原理就是通过Java遍历系统(Windows)的目录,前台通过点击图标以ajax方式触发事件,后台以json数据的形式把文件结构返回给前台,前台通过JS解析JSON数据内容,展示不同的图片.目前尚存在的

&lt;pre&gt; 保留文本格式显示在网页上

<code> 标签 解释:保留输入的格式空格等不变,原样显示在网页上 例如: <pre> 通知 即日起不再提供公共设施 个店铺需自行准备. 望周知~!! 2020/10/10 </pre> 原文地址:https://www.cnblogs.com/rygl/p/11829441.html

解决浏览器跨域限制发送ajax请求

一.什么是浏览器跨域限制?本质是什么? 所谓浏览器跨域限制,其实是为了数据安全的考虑由Netscape提出来限制浏览器跨域访问数据的策略,这是一中约定,正式叫法为浏览器同源策略,目前已经在大多数浏览器中支持. 本质上,所谓浏览器同源策略即:不允许浏览器访问跨域的Cookie,ajax请求跨域接口等.也就是说,凡是访问与自己不在相同域的数据或接口时,浏览器都是不允许的. 最常见的例子:对于前后端完全分离的Web项目,前端页面通过rest接口访问数据时,会出现如下问题: 不允许发送POST请求:在发