php上传图文,php+ajax实现异步上传图文功能详解

这篇文章主要为大家详细介绍了php+ajax实现异步上传文件或图片功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文为大家分享了ajax异步上传文件或图片功能的具体代码，供大家参考，具体内容如下

//html代码

//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()

php上传图文,php+ajax实现异步上传图文功能详解相关推荐

RAD Studio Delphi 10.4在Windows，Android，iOS，macOS和Linux上更快地可视化开发APP应用软件及新增功能详解
RAD Studio 10.4的新增功能 RAD Studio 10.4提供了显着增强的高性能本机Windows支持,通过出色的快速代码完成功能提高了生产率,通过托管记录提高了代码速度,并在现代多核C ...
小程序怎么处理轮训ajax,微信小程序中使用Promise进行异步流程处理的实例详解...
微信小程序中使用Promise进行异步流程处理的实例详解我们知道,JavaScript是单进程执行的,同步操作会对程序的执行进行阻塞处理.比如在浏览器页面程序中,如果一段同步的代码需要执行很长时间( ...
(图文详细)最通俗易懂的CSS 浮动float属性详解
(图文详细)最通俗易懂的CSS 浮动float属性详解声明:本文属于搬砖大神的文章到自己的博客上,原文地址为:https://www.cnblogs.com/iyangyuan/archive/20 ...
腐烂国度2主宰版计算机学知识,一、主宰版新内容/mod说明_腐烂国度2主宰版图文全攻略_全任务全基地详解资料攻略_新基地位置_3DM单机...
<腐烂国度2:主宰版>图文全攻略,全任务全基地详解资料攻略(含"新增内容""资料合集""全任务/基地""上手指南&qu ...
STM32 MQTT协议连接中国移动OneNet服务器上传接收数据（二）MQTT协议常用报文详解
STM32 MQTT协议连接中国移动OneNet服务器上传接收数据(二)MQTT协议常用报文详解上一次我们讲了OneNet平台的注册,这次我们来讲一下MQTT的常用报文用法上一篇地址https ...
史上最易懂——ReactNative分组列表SectionList使用详情及示例详解
React Native系列 <逻辑性最强的React Native环境搭建与调试> <ReactNative开发工具有这一篇足矣> <解决React Native un ...
jq ajax异步上传文件,jQuery插件ajaxFileUpload异步上传文件
AjaxFileUpload.js并不是一个很出名的插件,只是别人写好的放出来供大家用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 当初做了个异步上传的功能,选择它因为它的配置 ...
java html5 上传_HTML5结合ajax实现文件上传以及进度显示
基于原生html5实现,不需要falsh支持,进度可以自定义显示,控制灵活, 本来打算使用jquery插件进行异步文件上传,比如uploadfy但是需要额外的支持,也有人用iframe模仿异步上传机制 ...
php ajax多图上传预览,Ajax上传图片及先预览功能的实现方法
最近有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果, ...

php上传图文,php+ajax实现异步上传图文功能详解

php上传图文,php+ajax实现异步上传图文功能详解相关推荐

最新文章

热门文章