FormData的使用-白红宇

FormData的使用

阅读量：6474 次

发布时间：2019-06-23

本文共 1534 字，大约阅读时间需要 5 分钟。

适用于文件上传，把对象直接给他。也可以ajax提交

<form name="form1" id="form1">

<input type="text" name="name" value="fdipzone">

<input type="text" name="gender" value="male">

</form>

[javascript]

var form = document.getElementById('form1');

var formdata = new FormData(form);

formdata.append('name','fdipzone');

formdata.append('gender','male');

使用FormData提交表单及上传文件：

[html]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title> FormData Demo </title>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript">

<!--

function fsubmit(){

var data = new FormData($('#form1')[0]);

$.ajax({

url: 'server.php',

type: 'POST',

data: data,

dataType: 'JSON',

cache: false,

processData: false,

contentType: false

}).done(function(ret){

if(ret['isSuccess']){

var result = '';

result += 'name=' + ret['name'] + '<br>';

result += 'gender=' + ret['gender'] + '<br>';

result += '<img src="' + ret['photo'] + '" width="100">';

$('#result').html(result);

}else{

alert('提交失敗');

}

});

return false;

}

</script>

</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" οnclick="fsubmit()"></p>

</form>

<div id="result"></div>

</body>

</html>

转载于:https://my.oschina.net/dawd/blog/956616

你可能感兴趣的文章

PG&GP · 特性分析 · 外部数据导入接口实现分析

IT人，给你个好理由放松一下自己，美丽厦门等你！

查看>>

【技术干货】秒懂跨终端的视频点播服务

查看>>

android api 中文（73）—— AdapterView

MySQL内核月报 2014.11-TokuDB·　引擎特性·　FAST UPDATES

C# 设计时动态改变实体在PropertyGrid中显示出来的属性

查看>>

DB2安全管理的相关概念(原创)

查看>>

将Facade装饰模式的代码由C#转为JAVA

查看>>

12篇学通C#网络编程——第三篇 HTTP应用编程（下）

查看>>

c++与java中子类中调用父类成员的方法

查看>>

Nginx下WordPress的Rewrite

查看>>

Touch Handling in Cocos2D 3.x(二)

查看>>

QT3.2版本QMessageBox字符串过长不能显示的bug修复

查看>>