文件上传是我们会经常用到的一个业务,其实在h5中新增了FormData的对象,用它来提交表单,并且可以提交二进制文件,所以今天就写写文件上传,希望可以对大家有帮助

FormData 上传文件实例

首先看一下formData的基本用法:FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台。只需要把 form 表单作为参数传入 FormData 构造函数即可:

var form = document.getElementById("form1");
var fd = new FormData(form);

这样就可以直接通过ajax 的 send() 方法将 fd 发送到后台。

以下创建了一个表单 form,表单中除了普通的数据外,还有文件上传,我们直接将 form对象作为参数传入FormData对象:

<form name="form1" id="form1">
<p>name:<input type="text" name="name" /></p>
<p>gender:<input type="radio" name="gender" value="1" />male <input type="radio" name="gender" value="2" />female</p>
<p>stu-number:<input type="text" name="number" /></p>
<p>photo:<input type="file" name="photo" id="photo"></p>
<p><input type="button" name="b1" value="submit" onclick="fsubmit()" /></p>
</form>
<div id="result"></div>

上述代码创建一个form,简单的填写一些信息,以及选择一张图片作为头像,设置一个div来存放返回的结果。

为了简便,我们还是采用jquery封装的ajax来向后台传输数据:

function fsubmit() {
var form=document.getElementById("form1");
var fd =new FormData(form);
$.ajax({
url: "server.php",
type: "POST",
data: fd,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success: function(response,status,xhr){
console.log(xhr);
var json=$.parseJSON(response);
var result = '';
result +="个人信息:<br/>name:"+json['name']+"<br/>gender:"+json['gender']+"<br/>number:"+json['number'];
result += '<br/>头像:<img src="' + json['photo'] + '" height="100" />';
$('#result').html(result);
}
});
return false;
}

上述代码中的 server.php 是服务器端的文件,接收ajax请求,并将接收结果返回,具体代码如下:

<?php

$name = isset($_POST['name'])? $_POST['name'] : '';
$gender = isset($_POST['gender'])? $_POST['gender'] : '';
$number = isset($_POST['number'])? $_POST['number'] : '';
$filename = time().substr($_FILES['photo']['name'], strrpos($_FILES['photo']['name'],'.'));
$response = array(); if(move_uploaded_file($_FILES['photo']['tmp_name'], $filename)){
$response['isSuccess'] = true;
$response['name'] = $name;
$response['gender'] = $gender;
$response['number'] = $number;
$response['photo'] = $filename;
}else{
$response['isSuccess'] = false;
}
echo json_encode($response); ?>
填写好信息后,点击 submit,页面中能得到以下效果,去服务器端对应的文件夹下也能发现上传的图片。

如果你是原生 JavaScript 爱好者,当然一样能实现以上功能,下面是简单的JavaScript实现代码:

function fsubmit() {
var form=document.getElementById("form1");
var formData=new FormData(form);
alert(formData.name);
var oReq = new XMLHttpRequest();
oReq.onreadystatechange=function(){
if(oReq.readyState==4){
if(oReq.status==200){
console.log(typeof oReq.responseText);
var json=JSON.parse(oReq.responseText);
var result = '';
result +="个人信息:<br/>name:"+json['name']+"<br/>gender:"+json['gender']+"<br/>number:"+json['number'];
result += '<br/>头像:<img src="' + json['photo'] + '" height="50" />'; $('#result').html(result);
}
}
};
oReq.open("POST", "server.php");
oReq.send(formData);
return false;
}
 

NO---20 文件上传的更多相关文章

  1. 20款最好的jQuery文件上传插件

    当它是关于开发网络应用程序和网页的时候,文件上传功能的重要性是不容忽视的.一个文件上传功能可以让你上传所有类型的文件在网站上,包括视频,图像,文件和更多.创建一个文件上传功能,对你的网站是不是很难,有 ...

  2. Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (3)

    接上篇 Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (2) 7. 使用配置文件指定监听地址 打开 appsettings.json 文件,加入一行 "UseUrls&q ...

  3. 20.springboot项目部署到linux服务器文件上传临时路径处理问题

    1.前言 把项目部署到服务器上之后,文件上传默认会在/tmp路径中. 之前想了各种解决办法,比如如何更改这个上传路径...... 最后发现不是个好的方法,当然就想到了更好的解决方案. 就是我把上传文件 ...

  4. Springboot 一行代码实现文件上传 20个平台!少写代码到极致

    大家好,我是小富~ 技术交流,公众号:程序员小富 又是做好人好事的一天,有个小可爱私下问我有没有好用的springboot文件上传工具,这不巧了嘛,正好我私藏了一个好东西,顺便给小伙伴们也分享一下,d ...

  5. ASP.NET MVC5+EF6+EasyUI 后台管理系统(56)-插件---单文件上传与easyui使用fancybox

    系列目录 https://yunpan.cn/cZVeSJ33XSHKZ  访问密码 0fc2 今天整合lightbox插件Fancybox1.3.4,发现1.3.4版本太老了.而目前easyui 1 ...

  6. java web学习总结(二十四) -------------------Servlet文件上传和下载的实现

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...

  7. 文件上传命令rz和下载命令sz的安装

    上一节中,我们已经搭建好了linux环境,现在我们开始使用xshell工具,连接虚拟机. 一.xshell工具简介 Xshell 是一个强大的安全终端模拟软件,它支持SSH1, SSH2, 以及Mic ...

  8. JAVA中使用FTPClient实现文件上传下载实例代码

    一.上传文件 原理就不介绍了,大家直接看代码吧 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 ...

  9. Ceph RGW服务 使用s3 java sdk 分片文件上传API 报‘SignatureDoesNotMatch’ 异常的定位及规避方案

    import java.io.File;   import com.amazonaws.AmazonClientException; import com.amazonaws.auth.profile ...

  10. [转]ExtJs入门之filefield:文件上传的配置+结合Ajax完美实现文件上传的asp.net示例

    原文地址:http://www.stepday.com/topic/?459 作文一个ExtJs的入门汉子,学习起来的确是比较费劲的事情,不过如今在这样一个网络资源如此丰富的时代,依然不是那么难了的. ...

随机推荐

  1. Maven实战(九)Maven仓库简介

    目录 一.作用 Maven仓库分为本地仓库和远程仓库,集中存放项目引用的jar包,无需将jar包放在程序中,结合Maven项目的pom.xml,使得项目管理jar包更容易,有以下几个优点: 对于项目来 ...

  2. 【转】基于easyui开发Web版Activiti流程定制器详解(一)——目录结构

    题外话(可略过): 前一段时间(要是没记错的话应该是3个月以前)发布了一个更新版本,很多人说没有文档看着比较困难,所以打算拿点时间出来详细给大家讲解一下,由于本人平时要工作还要陪老婆和孩子而且还经营着 ...

  3. 20165318 2017-2018-2 《Java程序设计》第九周学习总结

    20165318 2017-2018-2 <Java程序设计>第九周学习总结 目录 学习过程遇到的问题及总结 教材学习内容总结 第13章 Java网络编程 代码托管 代码统计 学习过程遇到 ...

  4. 洛谷 P1073 最优贸易

    题目描述 CC C 国有 n n n 个大城市和 m mm 条道路,每条道路连接这 nnn 个城市中的某两个城市.任意两个城市之间最多只有一条道路直接相连.这 mmm 条道路中有一部分为单向通行的道路 ...

  5. Python自动化之form验证二

    class LoginForm(forms.Form): user = fields.CharField() pwd = fields.CharField(validators=[]) def cle ...

  6. sql查询以及常见问题理解解析

    推荐w3挺好的基础网站:https://www.w3cschool.cn/t_sql/t_sql_date_functions.html =,<,>,> =,<=,IN,BET ...

  7. CentOS中配置VNC Server

    环境:CentOS 6.4 1.安装tigervnc-server及相关软件 首先检查系统中是否安装tigervnc-server安装包 rpm -qa tigervnc-server 如果没有就直接 ...

  8. C++网络爬虫的实现——WinSock编程

    写了一个网络爬虫,可以抓取网上的图片. 需要给定初始网站即可. 在vs2010中编译通过. 需要使用多字节字符集进行编译, vs2010默认的是Unicode字符集. 编译后,运行即可,有惊喜哦!!! ...

  9. 【vue】父子组件间通信----传值

    官方文档参考 (一)父组件 向 子组件 传值 ①在父组件中调用子组件处,绑定要传的数据data1, 如 <nav  :data1=" "  ></nav> ...

  10. 成为linux的合格公民

     前言:  该片文章献给申请linux国籍的所有瘾君子们:  还记得17年的勒索病毒感染了无数的window操作系统. 在windows上待久的公民会渴望有无另一个世界,简单的图形化操作使得一切都变的 ...