文档章节

收集form数据+附件上传+上传图片立即显示+上传大附件,进度条显示

PHer
 PHer
发布于 2014/06/23 14:16
字数 325
阅读 1409
收藏 2

ajax收集表单数据

    分为两种情况:

            一 有form表单情况

  <script type="text/javascript">
                var logFormObject=document.getElementById('logon');

                function acceppt3(){
                        var xhr = creatXMLHttpRequest();
                    
                        var fd = new FormData(logFormObject);
                        xhr.onreadystatechange=function(){
                            if(xhr.readyState==4 && xhr.status==200){
                                var arr=xhr.responseText;
                        
                                console.log(arr);
                            }
                        }
                xhr.open('post','json2.php');
                xhr.send(fd);
            }
          </script>

表单部分:

<form action="form1"  method="post"  id="logon">
  <input name="usr"  type="text"/>
  <input name="pass">
  </form>
json2.php部分:
<?php
    echo $_POST['usr'],"|",$_POST['pass'];


在send方法中发送的应该是整个FormData对象 而不是getElementById获得元素节点对象。

    在url地址页面。中我们使用POST数组,数组下表就是表单中的name属性值.

    创建FormData对象, 如果有表单对象元素结点 通过dom操作获得的

    如  

var xhr = creatXMLHttpRequest();
var fd = new FormData(logFormObject);

那 如果没有form元素的html页面 我们是否发送form数据呢?

            第二 没有form元素

//获得元素结点对象
var xhr = document.getElementById("idname");
var fd = new FormData(logFormObject);
fd.append('usrname','zhengdia');
fd.append('pass',1546875);
这就相当于在我们的fd表单对象中放入了两个name 属性分别等于usrname和pass.

总结:

1.       通过FormData给服务器传递数据

a)         通过form元素节点对象实现

b)        通过formData的方法append()实现数据整合


© 著作权归作者所有

共有 人打赏支持
PHer
粉丝 4
博文 121
码字总数 38443
作品 0
成都
程序员
私信 提问
jquery+php实现ajax单个上传

HTML部分 <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.form.js"></script> <div class="btn"> <span>添加附件</span> <inpu......

魏邪乎
2014/06/05
0
0
Uploadify+MultipartFile实现文件上传

一.form表单(截选) <table id="myTable" border="0" cellspacing="0" cellpadding="0"> <tr id='myTr'> <td class="label">合同附件:</td> <td style="padding:0" width="23%"><input class......

Romanceling
2016/08/23
302
0
一些文件上传组件(Flash,JQuery,asp,php,js,AJAX)

FancyUpload FancyUpload是一个采用Flash与Ajax(MooTools)技术实现包含上传进度条的多文件上传组件,类似于SWFUpload。 FancyUpload Mootools jqUploader 结合Javascript与Flash开发,拥有...

老朱教授
2017/10/01
0
0
Winform开发框架之附件管理应用

在很多常规的管理系统里面,都可能有附件管理的需求,在我做的一系列医疗行业的病人信息管理系统里面,都希望能很好的管理病人的相关资料,分门别类的进行存储,需要的时候可以预览查看,那么...

walb呀
2017/12/04
0
0
[分享]WeX5中input拍照上传图片方法分享,可单图与多图

演示用,比较简陋,勿怪,方法简单! input被点击之后默认出现拍照,文档等选项,可以拍照上传,也可以选图库文件上传,也可以录像进行视频上传,自己对应修改文件类型判断就可以了 这些功能...

小次叶
2016/09/06
74
0

没有更多内容

加载失败,请刷新页面

加载更多

java框架学习日志-2

上篇文章(java框架学习日志-1)虽然跟着写了例子,也理解为什么这么写,但是有个疑问,为什么叫控制反转?控制的是什么?反转又是什么? 控制其实就是控制对象的创建。 反转与正转对应,正转...

白话
35分钟前
0
0
Integer使用双等号比较会发生什么

话不多说,根据以下程序运行,打印的结果为什么不同? Integer a = 100;Integer b = 100;System.out.println(a == b);//print : trueInteger a = 200;Integer b = 200;System.out.pr...

兜兜毛毛
昨天
8
0
CockroachDB

百度云上的CockroachDB 云数据库 帮助文档 > 产品文档 > CockroachDB 云数据库 > 产品描述 开源NewSQL – CockroachDB在百度内部的应用与实践 嘉宾演讲视频及PPT回顾:http://suo.im/5bnORh ...

miaojiangmin
昨天
5
0
I2C EEPROM驱动实例分析

上篇分析了Linux Kernel中的I2C驱动框架,本篇举一个具体的I2C设备驱动(eeprom)来对I2C设备驱动有个实际的认识。 s3c24xx系列集成了一个基于I2C的eeprom设备at24cxx系列。at24cxx系列芯片包...

yepanl
昨天
6
0
设计模式之工厂模式

本篇博文主要翻译这篇文章: https://www.journaldev.com/1392/factory-design-pattern-in-java 由于翻译水平有限,自认为许多地方翻译不恰当,欢迎各位给出宝贵的建议,建议大家去阅读原文。...

firepation
昨天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部