//html代码

<form enctype="multipart/form-data" id="upForm">
<input type="file" name="file" ><br><br>
<input type="button" value="提交">
</form>
<div class="picDis">
<img src="" alt="">
</div>
//js代码

(':button').click(function(event) {
  //formdata储存异步上传数据
var formData = new FormData($('form')[0]);
formData.append('file',$(':file')[0].files[0]);
//坑点: 无论怎么传数据,console.log(formData)都会显示为空,但其实值是存在的,f12查看Net tab可以看到数据被上传了
$.ajax({
url:'formtest.php',
type: 'POST',
data: formData,
//这两个设置项必填
contentType: false,
processData: false,
success:function(data){
console.log(data)
var srcPath = data;
console.log();
     //注意这里的路径要根据自己的储存文件的路径设置
$('.picDis img').attr('src', '..'+srcPath);
}
})
});
<?php 

$upFile = $_FILES['file'];

/**
* 创建文件夹函数,用于创建保存文件的文件夹
* @param str $dirPath 文件夹名称
* @return str $dirPath 文件夹名称
*/
function creaDir($dirPath){
$curPath = dirname(__FILE__);
$path = $curPath.'\\'.$dirPath;
if (is_dir($path) || mkdir($path,0777,true)) {
return $dirPath;
}
} //判断文件是否为空或者出错
if ($upFile['error']==0 && !empty($upFile)) {
$dirpath = creaDir('upload');
$filename = $_FILES['file']['name'];
$queryPath = './'.$dirpath.'/'.$filename;
//move_uploaded_file将浏览器缓存file转移到服务器文件夹
if(move_uploaded_file($_FILES['file']['tmp_name'],$queryPath)){
echo $queryPath;
}
} ?>

点击上传图片并发送后, 可以看到页面上显示出图片, 查看本地文件夹可以看到文件也已储存到服务器.

在客户端实现异步上传的关键在于FormData,关于这部分这里有详细介绍: FormData()

使用ajax异步上传文件或图片(配合php)的更多相关文章

  1. ajax异步上传文件和表单同步上传文件 的区别

    1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...

  2. 基于Flask开发网站 -- 前端Ajax异步上传文件到后台

    大家好,我是辰哥~ 辰哥最近利用空闲时间在写一个在线可视化平台,过程中也觉得一些技术还是比较有意思的,所以就以模块化的形式分享出来.如:从网页界面(前端)上传文件到服务器(后端). 放一下该模块的界面 ...

  3. ajax异步上传文件FormDate方式,html支持才可使用

    今天需要做一个头像的预览功能,所以我想到了异步上传文件. 总结几点: 异步上传难点: 文件二进制流如何获取 是否需要设置表单的头,就是content-Type那里.异步,所以无所谓了吧. 其他就差不多 ...

  4. Spring使用ajax异步上传文件

    单文件上传 <!-- 创建文件选择框 --> 文件上传 :<input type="file" id="file" name="fi ...

  5. 【django】ajax,上传文件,图片预览

    1.ajax 概述: AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味 ...

  6. 使用Ajax异步上传文件

    之前上传文件都是用表单form设置post请求和enctype类型: <form id="upload_form"action="" method=&qu ...

  7. Ajax 异步上传文件

    需要引用js jquery.form 前端代码 <form action="/Save" id="mainForm" method="post& ...

  8. ajax异步上传文件之data参数----小哈学js

    下载ajaxFileUpload.js(下载网址:http://fileuploadajax.codeplex.com/downloads/get/20976) 修改ajaxFileUpload.js ...

  9. 异步上传文件,ajax上传文件,jQuery插件之ajaxFileUpload

    http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 一.ajaxFileUpload是一个异步上传文件的jQuery插件. ...

随机推荐

  1. MSMQ消息队列总结

    1.总体介绍: http://www.cnblogs.com/beniao/archive/2008/06/26/1229934.html 2.windows服务各项参数介绍及安装 https://w ...

  2. loadrunner中pacing的设置

    通常我们在谈到一个软件的“性能”的时候,首先想到的就是“响应时间”和“并发用户数”这两个概念.我们看到的性能需求经常都是这样定义的: “要求系统支持 100 个并发用户” 看到这样的性能需求,我们往往 ...

  3. OpenGL笔记(二) 渲染管线

    GLSL着色器代码分为两个部分,即Vertex Shader(顶点着色器)与Fragment Shader(片元着色器). 上下文环境搭建 OGL不负责窗口管理与上下文环境管理,该职责由平台完成.在A ...

  4. .NET Core中向已存在文件的特定位置写入数据

    本例使用.NET Core向一个文本文件中的特定位置写入数据,来模拟文件上传中的断点续传是如何在服务器端实现的. 新建一个.NET Core控制台项目FileContinueToWrite,其Prog ...

  5. CF 55 D. Beautiful numbers

    D. Beautiful numbers 链接 题意: 求[L,R]中多少个数字可以整除它们的每一位上的数字. 分析: 要求模一些数字等于0等价于模它们的lcm等于0,所以可以记录当前出现的数字的lc ...

  6. apache目录别名

    #默认家目录DocumentRoot "/var/www/html"<Directory "/var/www"> AllowOverride Non ...

  7. KVM虚拟机管理——虚拟机创建和操作系统安装

    1. 概述2. 交互式安装2.1 图形化-本地安装2.1.1 图形化本地CDROM安装2.2.2 图形化本地镜像安装2.2 命令行-本地安装2.2.1 命令行CDROM安装2.3 图形化-网络安装2. ...

  8. js获取浏览器对象的信息

    js中有一个对象叫 navigator,navigator 对象包含有关浏览器的信息.所有的浏览器都支持该对象. 其中经常用到的是 navigator.userAgent 属性,通常,它是在 navi ...

  9. 高精度乘法--C++

    高精度乘法--C++ 模仿竖式乘法,在第一步计算的时候将进位保留,第一步计算完再处理进位.(见代码注释) 若要处理正负情况,可在数据输入后加以判断,处理比较简单. 小数计算也可参照该方法,不过对齐方式 ...

  10. 初学Direct X(7) ——位图的旋转,缩放以及平移

    初学Direct X(7) --位图的旋转,缩放以及平移 本文旨在实现通过D3DXMatrixTransformation2D函数实现位图的旋转,缩放以及平移操作,但是具体的原理部分会在后面进一步的探 ...