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. JAVA反映机制A

    以下这个URL讲得不错,可以把概念和用途结合起来, 练练手: http://blog.csdn.net/xiaohai798/article/details/11640427 import java. ...

  2. Eclipse全局搜索

    按[Ctrl]+[H] 搜索时支持一些正则表达式. 参考: http://blog.csdn.net/huaweitman/article/details/38709323

  3. [hdu 3264] Open-air shopping malls（二分+两圆相交面积）

    题目大意是:先给你一些圆,你可以任选这些圆中的一个圆点作圆,这个圆的要求是:你画完以后.这个圆要可以覆盖之前给出的每一个圆一半以上的面积,即覆盖1/2以上每一个圆的面积. 比如例子数据,选左边还是选右 ...

  4. git笔记之eclipse使用github远程仓库进行版本号管理

    原文地址:http://dtbuluo.com/90.html 这里记录一下eclipse开发工具中git的使用说明. 环境:centOS.eclipse-jee-kepler-SR2-linux-g ...

  5. Android中验证输入是否为汉字及手机号，邮箱验证，IP地址可用port号验证

    1,验证是否为汉字 // 验证昵称 private boolean verifyNickname() { String nickname = edt_username.getText().toStri ...

  6. 怎样在QML中使用multitouch

    在Qt QML中.它能够利用multitouch来做一些我们想做的事情.在今天的文章中.我们将介绍怎样使用multitouch来做一些我们想做的事. 事实上,在QML中利用多点触控是很easy的一件事 ...

  7. jquery非文本框复制

    function selectText(x) { if (document.selection) { var range = document.body.createTextRange();//ie ...

  8. Floyed理解

    Floyed理解 Floyd算法的本质是动态规划,其转移方程为:f(k,i,j) = min( f(k-1,i,j), f(k-1,i,k)+f(k-1,k,j) ). f(k-1,i,j)表示经过前 ...

  9. Maven打包编译错误工作区间设置编码格式gbk可以utf-8不可以

    转自:https://blog.csdn.net/wolf_love666/article/details/52593483 问题:Maven打包编译错误工作区间设置编码格式gbk可以utf-8不可以 ...

  10. 第18章 Redis数据结构常用命令

    18-1 字符串的一些基本命令 18-1 :配置Spring关于Redis字符串的运行环境 <bean id="poolConfig" class="redis.c ...