使用ajax异步上传文件或图片(配合php)
//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)的更多相关文章
- ajax异步上传文件和表单同步上传文件 的区别
1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...
- 基于Flask开发网站 -- 前端Ajax异步上传文件到后台
大家好,我是辰哥~ 辰哥最近利用空闲时间在写一个在线可视化平台,过程中也觉得一些技术还是比较有意思的,所以就以模块化的形式分享出来.如:从网页界面(前端)上传文件到服务器(后端). 放一下该模块的界面 ...
- ajax异步上传文件FormDate方式,html支持才可使用
今天需要做一个头像的预览功能,所以我想到了异步上传文件. 总结几点: 异步上传难点: 文件二进制流如何获取 是否需要设置表单的头,就是content-Type那里.异步,所以无所谓了吧. 其他就差不多 ...
- Spring使用ajax异步上传文件
单文件上传 <!-- 创建文件选择框 --> 文件上传 :<input type="file" id="file" name="fi ...
- 【django】ajax,上传文件,图片预览
1.ajax 概述: AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味 ...
- 使用Ajax异步上传文件
之前上传文件都是用表单form设置post请求和enctype类型: <form id="upload_form"action="" method=&qu ...
- Ajax 异步上传文件
需要引用js jquery.form 前端代码 <form action="/Save" id="mainForm" method="post& ...
- ajax异步上传文件之data参数----小哈学js
下载ajaxFileUpload.js(下载网址:http://fileuploadajax.codeplex.com/downloads/get/20976) 修改ajaxFileUpload.js ...
- 异步上传文件,ajax上传文件,jQuery插件之ajaxFileUpload
http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 一.ajaxFileUpload是一个异步上传文件的jQuery插件. ...
随机推荐
- MSMQ消息队列总结
1.总体介绍: http://www.cnblogs.com/beniao/archive/2008/06/26/1229934.html 2.windows服务各项参数介绍及安装 https://w ...
- loadrunner中pacing的设置
通常我们在谈到一个软件的“性能”的时候,首先想到的就是“响应时间”和“并发用户数”这两个概念.我们看到的性能需求经常都是这样定义的: “要求系统支持 100 个并发用户” 看到这样的性能需求,我们往往 ...
- OpenGL笔记(二) 渲染管线
GLSL着色器代码分为两个部分,即Vertex Shader(顶点着色器)与Fragment Shader(片元着色器). 上下文环境搭建 OGL不负责窗口管理与上下文环境管理,该职责由平台完成.在A ...
- .NET Core中向已存在文件的特定位置写入数据
本例使用.NET Core向一个文本文件中的特定位置写入数据,来模拟文件上传中的断点续传是如何在服务器端实现的. 新建一个.NET Core控制台项目FileContinueToWrite,其Prog ...
- CF 55 D. Beautiful numbers
D. Beautiful numbers 链接 题意: 求[L,R]中多少个数字可以整除它们的每一位上的数字. 分析: 要求模一些数字等于0等价于模它们的lcm等于0,所以可以记录当前出现的数字的lc ...
- apache目录别名
#默认家目录DocumentRoot "/var/www/html"<Directory "/var/www"> AllowOverride Non ...
- KVM虚拟机管理——虚拟机创建和操作系统安装
1. 概述2. 交互式安装2.1 图形化-本地安装2.1.1 图形化本地CDROM安装2.2.2 图形化本地镜像安装2.2 命令行-本地安装2.2.1 命令行CDROM安装2.3 图形化-网络安装2. ...
- js获取浏览器对象的信息
js中有一个对象叫 navigator,navigator 对象包含有关浏览器的信息.所有的浏览器都支持该对象. 其中经常用到的是 navigator.userAgent 属性,通常,它是在 navi ...
- 高精度乘法--C++
高精度乘法--C++ 模仿竖式乘法,在第一步计算的时候将进位保留,第一步计算完再处理进位.(见代码注释) 若要处理正负情况,可在数据输入后加以判断,处理比较简单. 小数计算也可参照该方法,不过对齐方式 ...
- 初学Direct X(7) ——位图的旋转,缩放以及平移
初学Direct X(7) --位图的旋转,缩放以及平移 本文旨在实现通过D3DXMatrixTransformation2D函数实现位图的旋转,缩放以及平移操作,但是具体的原理部分会在后面进一步的探 ...