<?php

 // 1,通过超全局变量来获取files[上传的图片名称]

     $file = $_FILES["files"]

 // 2,在通过strrchr来获取图片的格式

     $ext = strrchr($file['name'],'.');

 // 3,通过uniqid函数随机获取文件名避免名称重复覆盖

     $filename = uniqid().$exe;

 // 4,可以把获取的图片的名称存在session里面,以免后面用到,这步可写可不写;

     session_start();

     $_SESSION['url'] = $str;19:36:16

 // 5,通过move_uploaded_file函数把上传获取的图片存在一个文件夹内

     $bool = move_uploaded_file($file['tmp_name'],'../../static/uploads/'.$filename);

 // 6,把处理好的图片路径返回给前端

     if ($bool) {

         echo "../static/uploads/" . $fileName;

     } else {

         echo "上传失败";

     };

 ?>

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <script src="../static/assets/vendors/jquery/jquery.min.js"></script>

     <script>

         $(function () {

             $("#uploadImg").on("change", function () {

                 // console.log(this.files);

                 var file = this.files[0];

                 var data = new FormData();

                 data.append('file', file);

                 // console.log(data);

                 $.ajax({

                     type: "post",

                     url: "./api/_addPosts.php",

                     data: data,

                     dataType: "json",

                     success: function (res) {

                         console.log(res)

                     }

                 });

             });

         })

     </script>

 </head>

 <body>

     <input type="file" name="" id="uploadImg">

 </body>

 </html>

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

  1. easyUi 学习笔记 （二 ） 使用tabs 里datagridview 发送ajax请求 不访问后台的问题

    这个BUG 我花了一个半小时, 还是看不出哪里的问题,  于是就百度到这么一段话,我需要记住 <================================================= ...

  2. 在发送ajax请求时加时间戳或者随机数去除js缓存

    在发送ajax请求的时候,为了保证每次的都与服务器交互,就要传递一个参数每次都不一样,这里就用了时间戳 大家在系统开发中都可能会在js中用到ajax或者dwr,因为IE的缓存,使得我们在填入相同的值的 ...

  3. 原生js发送ajax请求

    堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...

  4. Jquery发送ajax请求以及datatype参数为text/JSON方式

    Jquery发送ajax请求以及datatype参数为text/JSON方式 1.方式一:datatype:'text' 2.方式二:datatype:'JSON' 3.使用gson-1.5.jar包 ...

  5. Vue（七）发送Ajax请求

    发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue ...

  6. 发送ajax请求时候注意的问题

    1.在发送ajax请求一般都是默认为异步,就是不去等待后台响应直接可以继续发送, 但这样会有时候遇到一些问题,无法获得后台的响应参数, 所以在你打开编辑弹出框完成数据编辑后无法刷新页面, 这时候可能存 ...

  7. jQuery发送ajax请求

    利用jquery发送ajax请求的几个模板代码. $.ajax({ async : false, type: 'POST', dataType : "json", url: &qu ...

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

    JQuery发送ajax请求不能用数组作为参数,否则会接收不到参数, 一.js代码如下: $('#delete-button').click(function(){        var select ...

  9. js中使用队列发送ajax请求

    最近,项目中需要按照先后顺序发送ajax请求,并且在一次请求结束后才能发起下一次,不然就会导致逻辑错误. 解决办法是定义一个数组,保存ajax请求数据. 以下使用extjs4定义一个类 Ext.def ...

随机推荐

  1. 目前国际上所用云计算平台IaaS、PaaS、SaaS简介

    随着云计算这个概念越来越为人所熟知,企业对云计算的重视程度也在日趋加深.这不仅是一种潮流,更体现了一种需求——数字化.现代化.科技化的整体需求.如今市场上云计算的运营商更是风起云涌,服务种类更是丰富繁 ...

  2. 很easy的js双向绑定框架（二）：控制器继承

    初衷 上一篇已经实现了数据的双向绑定,但model的控制范围是整个文档.在实际project中必需要有作用范围,以便做ui模块的拆分. 这一篇,我们希望实现像angularjs一样的控制器继承: 1. ...

  3. Linux文件类型及目录配置

    Linux文件类型与扩展名 在Linux系统中,任何硬件设备或者其他设备都是以文件的形式存在,就连数据通信的接口这些也是由专门的文件来负责的,因此Linux的文件种类就非常多,出了之前我们常见的 - ...

  4. for循环的执行循序

    先上一段代码,大家说出此方法的执行结果: public class Print{ static boolean out(char c){ System.out.println(c); return t ...

  5. 图像处理之Canny边缘检測

    图像处理之Canny 边缘检測 一:历史 Canny边缘检測算法是1986年有John F. Canny开发出来一种基于图像梯度计算的边缘 检測算法,同一时候Canny本人对计算图像边缘提取学科的发展 ...

  6. Uva10972(RevolC FaeLoN)

    题目链接:传送门 题目大意:给你一副无向图,问至少加多少条边使图成为边双联通图 题目思路:tarjan算法+缩点(如果已经是双连通图就直接输出0) #include <iostream> ...

  7. 【BZOJ1880】[Sdoi2009]Elaxia的路线 最短路+DP

    [BZOJ1880][Sdoi2009]Elaxia的路线 Description 最近,Elaxia和w**的关系特别好,他们很想整天在一起,但是大学的学习太紧张了,他们 必须合理地安排两个人在一起 ...

  8. IIPP迷你项目（二）"Guess the Number!"

    本来这个程序是早就编完了的,一直没时间发布博客.时至今日已时隔多天,也算是复习一下事件驱动型编程的过程吧. 1 事件驱动型编程 本质上这次的作业是披着猜数字皮的图形化界面编程,好在 simplegui ...

  9. SpringBoot自带热加载开发工具

    SpringBoot自带热加载开发工具 maven配置: <!-- SpringBoot自带热加载开发工具 --> <dependency> <groupId>or ...

  10. Redis 持久化机制

    1.背景 之前在使用redis 时候,没有过多的考虑持久化! 但是这样即使你用了redis 也是徒劳,表面上你是用上了redis 进行缓存数据,感觉已经给自己的架构添加了一个道QPS 防护墙! 哈哈, ...