HTML5 FormData实现文件上传

表单提交,文件上传是一个常用又十分麻烦的功能,以前要上传文件通常都是借助插件或者flash来实现,噼里啪啦的加载一大堆东西。自从有了HTML5的FormData后,老板再也不用担心我的上传了。

FormData可以把它理解成一个虚拟的表单对象,它只有一个方法append,这个可以在浏览器console一下就知道了。我们可以通过append向FormData里面添加各种需要提交的数据。

你可以先创建一个空的 FormData 对象,然后使用 append() 方法向该对象里添加字段,如下:var oMyForm = new FormData();


oMyForm.append("username", "Groucho");
oMyForm.append("accountnum", 123456); // 数字123456被立即转换成字符串"123456"

// fileInputElement中已经包含了用户所选择的文件
oMyForm.append("userfile", fileInputElement.files[0]);var oReq = new XMLHttpRequest();
oReq.open("POST", "http://foo.com/submitform.php");
oReq.send(oMyForm);

如果已经有一个Form表单,只需要把这个 form 元素作为参数传入 FormData 构造函数即可:

var newFormData = new FormData(someFormElement);
var formElement = document.getElementById("myFormElement");
var oReq = new XMLHttpRequest();
oReq.open("POST", "submitform.php");
oReq.send(new FormData(formElement));

你还可以在已有表单数据的基础上,继续添加新的键值对,如下:

var formElement = document.getElementById("myFormElement");
formData = new FormData(formElement);
formData.append("serialnumber", serialNumber++);
oReq.send(formData);
<form enctype="multipart/form-data" method="post" name="fileinfo">
  <label>Your email address:</label>
  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
  <label>Custom file label:</label>
  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
  <label>File to stash:</label>
  <input type="file" name="file" required />
</form>
<div id="output"></div>
<a href="javascript:sendForm()">Stash the file!</a>

然后你就可以使用下面的代码来异步的上传用户所选择的文件:

function sendForm() {
  var oOutput = document.getElementById("output");
  var oData = new FormData(document.forms.namedItem("fileinfo"));

  oData.append("CustomField", "This is some extra data");

  var oReq = new XMLHttpRequest();
  oReq.open("POST", "stash.php", true);
  oReq.onload = function(oEvent) {
    if (oReq.status == 200) {
      oOutput.innerHTML = "Uploaded!";
    } else {
      oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";
    }
  };

  oReq.send(oData);
}

你还可以使用 jQuery 来发送 FormData,但必须要正确的设置相关选项:

var fd = new FormData(document.getElementById("fileinfo"));
fd.append("CustomField", "This is some extra data");
$.ajax({
  url: "stash.php",
  type: "POST",
  data: fd,
  processData: false,  // 告诉jQuery不要去处理发送的数据
  contentType: false   // 告诉jQuery不要去设置Content-Type请求头
});

一个完整的例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FormData</title>
</head>
<body>
    <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>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>
</script>
    <script type="text/javascript">
        function fsubmit() {
            var form=document.getElementById("form1");
            var formData=new FormData(form);
            var oReq = new XMLHttpRequest();
            oReq.onreadystatechange=function(){
              if(oReq.readyState==4){
                if(oReq.status==200){
                    var json=JSON.parse(oReq.responseText);
                    var result = ‘‘;
                    // result += ‘name=‘ + ret[‘name‘] + ‘<br>‘;
                    // result += ‘gender=‘ + ret[‘gender‘] + ‘<br>‘;
                     result += ‘<img src="‘ + json[‘photo‘] + ‘" width="100">‘;
                     $(‘#result‘).html(result);
                }
              }
            }
            oReq.open("POST", "server.php");
            oReq.send(formData);
            return false;
        }
    </script>
</body>
</html>

server.php文件:

<?php
$name = isset($_POST[‘name‘])? $_POST[‘name‘] : ‘‘;
$gender = isset($_POST[‘gender‘])? $_POST[‘gender‘] : ‘‘;
$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[‘photo‘] = $filename;
}else{
    $response[‘isSuccess‘] = false;
}
echo json_encode($response);
?>
时间: 2024-10-02 21:51:42

HTML5 FormData实现文件上传的相关文章

spring mvc利用MultipartResolver解析Multipart/form-data进行文件上传

之前的表单数据都是文本数据,现记录:利用MultipartResolver进行文件上传. ①首先,需引入commons-fileUpload和commons-io jar包,pom.xml文件的坐标: <properties>      <spring.version>3.2.1.RELEASE</spring.version>  </properties>  <dependencies>          <dependency> 

Java实现HTML5拖拽文件上传

这是主页面 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+reques

python爬虫:Multipart/form-data POST文件上传详解

简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form method="post"action="http://w.sohu.com" > <inputtype="text" name="txt1"> <inputtype="text" name="txt2"> </form

html5+java大文件上传代码

<body> <input id="fileid" type="file" accept="video/*;capture=camera" onchange="onfile(this)"> <input id="btn" type="button" value="提交"> <script type="text/jav

Multipart/form-data POST文件上传详解

简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form method="post"action="http://w.sohu.com" > <inputtype="text" name="txt1"> <inputtype="text" name="txt2"> </form

Ajax+formData异步文件上传

前端jsp: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+reque

HTML5 增强的文件上传域

在HTML5以前,HTML的文件上传域的功能具有很大的局限性,这种局限性主要体现在如下两点: 每次只能选择一个文件进行上传 客户端代码只能获取被上传文件的文件路径,无法访问实际的文件内容 一.FileList对象和File对象 HTML5为type='file' 的<input/>元素增加了两个属性. accept:该属性控制允许上传的文件类型.该属性为一个或多个MIME类型字符串.多个MIME类型字符串之间应以都好分割. multiple:该属性设置是否允许选择多个文件 JavaScript

Multipart/form-data POST文件上传

简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form method="post"action="http://w.sohu.com" > <inputtype="text" name="txt1"> <inputtype="text" name="txt2"> </form

HTML5 批量大文件上传下载

在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所有浏览器. 支持文件批量上传 支持文件夹上传,且要求在服务端保留层级结构.文件夹数量要求支持到10W. 支持大文件断点续传,要求刷新浏览器,重启浏览器,重启电脑后仍然能够继续上传.文件大小要求能够支持到50个G. 支持自动加载本地文件,要求能够自动加载指定的本地文件. 支持文件批量下载,要求不要在服