发送ajax请求实现上传图片显示在网页上
<?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请求实现上传图片显示在网页上的更多相关文章
- easyUi 学习笔记 （二 ） 使用tabs 里datagridview 发送ajax请求 不访问后台的问题
这个BUG 我花了一个半小时, 还是看不出哪里的问题, 于是就百度到这么一段话,我需要记住 <================================================= ...
- 在发送ajax请求时加时间戳或者随机数去除js缓存
在发送ajax请求的时候,为了保证每次的都与服务器交互,就要传递一个参数每次都不一样,这里就用了时间戳 大家在系统开发中都可能会在js中用到ajax或者dwr,因为IE的缓存,使得我们在填入相同的值的 ...
- 原生js发送ajax请求
堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...
- Jquery发送ajax请求以及datatype参数为text/JSON方式
Jquery发送ajax请求以及datatype参数为text/JSON方式 1.方式一:datatype:'text' 2.方式二:datatype:'JSON' 3.使用gson-1.5.jar包 ...
- Vue（七）发送Ajax请求
发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue ...
- 发送ajax请求时候注意的问题
1.在发送ajax请求一般都是默认为异步,就是不去等待后台响应直接可以继续发送, 但这样会有时候遇到一些问题,无法获得后台的响应参数, 所以在你打开编辑弹出框完成数据编辑后无法刷新页面, 这时候可能存 ...
- jQuery发送ajax请求
利用jquery发送ajax请求的几个模板代码. $.ajax({ async : false, type: 'POST', dataType : "json", url: &qu ...
- JQuery发送ajax请求不能用数组作为参数
JQuery发送ajax请求不能用数组作为参数,否则会接收不到参数, 一.js代码如下: $('#delete-button').click(function(){ var select ...
- js中使用队列发送ajax请求
最近,项目中需要按照先后顺序发送ajax请求,并且在一次请求结束后才能发起下一次,不然就会导致逻辑错误. 解决办法是定义一个数组,保存ajax请求数据. 以下使用extjs4定义一个类 Ext.def ...
随机推荐
- Eclipse 查找
Eclipse 查找 工作空间中查找 Eclipse 查找对话框中可以允许用户在指定工作空间上使用单词或字母模式来查找文件. 或者你可以在指定项目或在 package explorer 视图上选择好指 ...
- 图像处理之Canny边缘检測
图像处理之Canny 边缘检測 一:历史 Canny边缘检測算法是1986年有John F. Canny开发出来一种基于图像梯度计算的边缘 检測算法,同一时候Canny本人对计算图像边缘提取学科的发展 ...
- maven打包加速（转） （开启多线程，之前发现只占用一核CPU100%，其他CPU闲置的情况）
采用maven打包时,发现速度超慢,打包一次5-10分钟或者更长时间过去了,严重浪费了一天的时间.因此整理了一下maven打包加速的问题.1.在maven打包中去掉, maven clean, mav ...
- python 引用的含义，尤其注意列表跟字典的使用
a = '12345'b = aa = 'sssss'print('a ===== %s' % a)print('b ===== %s' % b) 结果: a ===== sssss b ===== ...
- std::vector<std::vector<> >
上次看到这个有点晕了,其实这个vector保存的是std::vector<> #include <vector> #include <iostream> using ...
- 【BZOJ3444】最后的晚餐 乱搞
[BZOJ3444]最后的晚餐 Description [问题背景] 高三的学长们就要离开学校,各奔东西了.某班n人在举行最后的离别晚餐时,饭店老板觉得十分纠结.因为有m名学生偷偷找他,要求和自己暗恋 ...
- 1714 B君的游戏(Nim博弈)
1714 B君的游戏 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 B君和L君要玩一个游戏.刚开始有n个正整数 ai . 双方轮流操作.每次操作,选一个正整数 ...
- Axis2Service客户端访问通用类集合List自定义类型
Axis2 服务四种客户端调用方式: 1.AXIOMClient 2.generating a client using ADB 3.generating a client using XMLBean ...
- Java实现单例模式的两种方式
单例模式在实际开发中有很多的用途,比如我们在项目中常用的工具类,数据库等资源的连接类.这样做的好处是避免创建多个对象,占用内存资源,自始自终在内存中只有一个对象为我们服务. 单例对象一般有两种实现方式 ...
- python的基础数据类型笔记
注意:此文章基于python3.0以上做的笔记. python的基础数据类型大体有一下几种 一.int int类型有以下几种方法 .bit_length 返回数据在内存中所占的比特位 如下: prin ...