1. 用表单上传文件(以照片为例)-同步上传

html部分代码:这里请求地址index.php

<!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>
</head>
<body>
<form action="index.php" enctype="multipart/form-data" method="post">
<input type="file" name="photo">
<input type="submit" value="提交">
</form>
</body>
</html>
 
php结构代码
<?php
// print_r($_FILES['photo']);
$file = $_FILES['photo'];
$name = strrchr($file['name'],".");
$name = time() . rand(0,9999) . $name;
$path = "./upload/$name";
move_uploaded_file($file['tmp_name'],$path);
?>
需要新建一个upload文件夹存储文件
 
2.ajax异步上传文件,代码如下,待会总结区别
 
html
 
<!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>
</head>
<body>
<form>
<input type="file" name="photo" id="p">
</form>
<script>
// 注册change事件
p.onchange = function () {
// 实例对象
var xhr = new XMLHttpRequest();
// 请求行 必须用post 文件上传你懂得
xhr.open('post','index.php');
// 实例对象
var formdata = new FormData();
// p是文件表单的DOM对象有个files属性,直接获取文件信息
var filemess = p.files[0];
// 添加到实例对象中
formdata.append('photo',filemess);
// 发送请求 亲测成功 就不监听状态改变事件了 php代码保持不变
xhr.send(formdata);
}
 
</script>
</body>
</html>

php 不变

<?php
// print_r($_FILES['photo']);
$file = $_FILES['photo'];
$name = strrchr($file['name'],".");
$name = time() . rand(0,9999) . $name;
$path = "./upload/$name";
move_uploaded_file($file['tmp_name'],$path);
?>
 
 
 
区别 : form 提交 里面需要写属性 而ajax提交不需要
form 同步上传  ajax异步上传
都是post,php获取方式也一样
然后需要的话把代码贴上去看看,亲测没bug,纯手写,不喜勿喷!!!
 

ajax异步上传文件和表单同步上传文件 的区别的更多相关文章

  1. Ajax异步按下回车提交表单

    作者:故事我忘了￠个人微信公众号:程序猿的月光宝盒 html <form id="findInvis"> 帖子标题: <input title="请输入 ...

  2. 使用bean接收ajax表单提交数据包含文件上传

    这几天写带图片上传的表单提交,一个配置小程序活动弹出框样式的功能,记录一下一些需要注意的地方 首先是 前端 JSP 文件的表单 <form class="search-wrapper& ...

  3. 为什么上传文件的表单里要加个属性enctype

    为什么上传文件的表单里要加个属性enctype 上传文件的表单中<form>要加属性enctype="multipart/form-data",很多人只是死记硬背知道上 ...

  4. Yii2表单提交（带文件上传）

    今天写一个php的表单提交接口,除了基本的字符串数据,还带文件上传,不用说前端form标签内应该有这些属性 <form enctype="multipart/form-data&quo ...

  5. 【温故知新】Java web 开发（三）Form表单与上传下载文件

    简介:在一和二的基础之上,这次来记录下如何在页面提交表单数据,以及文件的上传和下载整个流程,请求也不仅限于GET了,也有POST了. 1. 为了方便,在 webapp 下直接新建一个 index.ht ...

  6. Struts2文件上传（基于表单的文件上传）

    •Commons-FileUpload组件 –Commons是Apache开放源代码组织的一个Java子项目,其中的FileUpload是用来处理HTTP文件上传的子项目   •Commons-Fil ...

  7. servlet文件上传2——复合表单提交（数据获取和文件上传）

    上传文件时表单enctype属性必须要更改为<enctype='multipart/form-data'>:采用post提交表单,元素需要有name属性: 利用第三方jar包(common ...

  8. 用div漂浮快实现与表单无关的多文件上传功能。

    我项目有这个需求,多文件上传,而且要及时显示到表单上,这样的话就不能与表单相关. 由于我对前端不熟,我就实现了这么一个功能,通过button触发一个div漂浮块,然后多文件上传,之后通过js把文件名显 ...

  9. Java模拟表单POST上传文件

    JAVA模拟表单POST上传文件 import java.awt.image.BufferedImage;import java.awt.image.ColorModel;import java.io ...

随机推荐

  1. hdu 2444 交叉染色判断二分图+二分最大匹配

    /*1A 31ms*/ #include<stdio.h> #include<string.h> #define N 300 int n; struct node { int ...

  2. EF--code first数据迁移命令

    原文推荐!点我点我! 添加Migrations文件夹,并生成类文件Configuration.cs PM> Enable-Migrations -EnableAutomaticMigration ...

  3. 如何在Eclipse引入JUnit测试

    1.在Eclipse中引入JUnitjar文件 2.右键Build Path>Configure Bulid Path 3.Libraries>Add Library 4.Junit> ...

  4. bzoj2958: 序列染色(DP)

    2958: 序列染色 题目:传送门 题解: 大难题啊(还是我太菜了) %一发大佬QTT 代码: #include<cstdio> #include<cstring> #incl ...

  5. [AHOI 2008] 聚会

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1832 [算法] 最近公共祖先 [代码] #include<bits/stdc+ ...

  6. 杂项-事务：OLTP（联机事务处理过程）

    ylbtech-杂项-事务:OLTP(联机事务处理过程) On-Line Transaction Processing联机事务处理过程(OLTP) 也称为面向交易的处理过程,其基本特征是前台接收的用户 ...

  7. POJ 1654 乱搞题？

    题意: 从一个点出发,8个方向,给出每一步的方向,求出走过的路径形成的多边形的面积. 思路: 先普及一下向量叉乘.. (摘自度娘) 也就是x1y2-x2y1. 那这不就好说了嘛. 一个经过原点的闭合多 ...

  8. 修改Visual Studio2010的主题颜色

    第一步:打开工具->扩展管理器 第二步:搜素visual studio color theme editor 第三步:找到Visual Studio Color Theme Editor 第四步 ...

  9. ManualResetEvent和AutoResetEvent的区别，分享来的

    在讨论这个问题之前,我们先了解这样一种观点,线程之间的通信是通过发信号来进行沟通的.(这不是废话) 先来讨论ManualResetEvent,讨论过程中我会穿插一些AutoResetEvent的内容, ...

  10. Linux运维最佳实践之网站调优

    高性能静态网站: 1.静态页面中针对图片进行浏览器(客户端)缓存,如公共JavaScript(jQuery,jQuery-1.12.1.min.js)进行缓存 2.对网站输入内容压缩(gzip) 3. ...