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. springMVC @ModelAttribute功能

    @ModelAttribute功能:将数据模型回写到页面 如: public String validate(@Valid @ModelAttribute("user") User ...

  2. 报错configure:error: no acceptable C compiler found in $PATH。。

    报错configure:error: no acceptable C compiler found in $PATH.. 查看日志: 出错原因:新安装的linux系统,没有gcc库 解决方案:使用yu ...

  3. c27---typedef

    // // main.c // typedef #include <stdio.h> /* typedef可以给一个已知的数据类型起别名. typedef 原有的数据类型 别名; 注意: ...

  4. c14---排序，查找

    // // main.c // 冒泡排序 // // Created by xiaomage on 15/6/10. // Copyright (c) 2015年 xiaomage. All righ ...

  5. vmware笔试题目

    http://discuss.acmcoder.com/topic/58db8e2ebb0f44ba0e94e670 上面是完整的题目,下面一下我自己的想法. http://discuss.acmco ...

  6. java的重载总结

    1.不能以返回值的不同来重载方法,编译都不通过(只有参数类型或者参数个数不同才可以重载方法) 在Java语言中,要重载一个方法,除了要与原方法具有相同的简单名称外,还要求必须拥有一个与原方法不同的(不 ...

  7. javascript中变量命名冲突的问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 高德地图修改gps定位点样式

    效果图 navi_map_gps_locked.png 图片1 图片2 修改 MyLocationStyle myLocationStyle = new MyLocationStyle();//初始化 ...

  9. Fragment_动态加载

    1.新建Fragment的XML布局文件. 2.在activity.xml中添加需要加载Fragment.列如: <?xml version="1.0" encoding=& ...

  10. 小米 SOAR 开源SQL优化工具安装

    github :https://github.com/xiaomi/soar 安装说明 :https://github.com/XiaoMi/soar/blob/master/doc/install. ...