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. C++ - 部分STL容器如何去除重复元素

    如果元素被保存在vector中,可先对vector里面的元素排序,然后调用unique函数去重,unique(起始迭代器,终止迭代器),返回的是去重以后vector中没有重复元素的下一个位置的迭代器. ...

  2. POJ - 3126 - Prime

    先上题目 Prime Path Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9259   Accepted: 5274 D ...

  3. JAVA接口的简单实现

    感觉越来越强烈, 我的心在跳~~~,我的宝剑在嘟~~ Flyer.java package cc.openhome; public interface Flyer{ public abstract v ...

  4. [Javascript] IntersectionObserver -- Lazy Load Images on a Website

    When it comes to websites performance is king. How long it takes for a page to load can mean the dif ...

  5. ORA-09925: Unable to create audit trail file汇总

    今天一兄弟的库报ORA-09925: Unable to create audit trail file,当时查 df -h有可用空间,文件夹的权限也正确,未df -i查看Inodes使用情况,审计文 ...

  6. js设计模式-组合模式

    组合模式是一种专为创建web上的动态用户界面而量身定制的模式.使用这种模式,可以用一条命令在多个对象上激发复杂的或递归的行为.这可以简化粘合性代码,使其更容易维护,而那些复杂行为则被委托给各个对象. ...

  7. 线段树（1）——点修改&建树

    #include<cstdio> #include<algorithm> using namespace std; #define MAX 10000 #define INF ...

  8. OpenCASCADE 包说明

    转载地址:http://www.cppblog.com/eryar/archive/2012/06/30/180916.html 一.简介 Introduction to Package gp gp是 ...

  9. BZOJ 3509 分块FFT

    思路: 跟今年WC的题几乎一样 (但是这道题有重 不能用bitset水过去) 正解:分块FFT http://blog.csdn.net/geotcbrl/article/details/506364 ...

  10. Linux目录结构(二)

    Linux文件系统结的结构是树形结构,其入口从/开始,了解Linux文件系统的结构,对于我们需要掌握的基础知识点之一. 2.文件系统的组织结构简说: 当您使用Linux的时候,如果您通过ls -la ...