文档章节

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

PHer
 PHer
发布于 2014/06/23 14:16
字数 325
阅读 1386
收藏 2
点赞 0
评论 0

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
博文 118
码字总数 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

一些文件上传组件(Flash,JQuery,asp,php,js,AJAX)

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

老朱教授 ⋅ 2017/10/01 ⋅ 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 ⋅ 0

数据导入与实时进度条实现

digiflow数据导入与实时进度条实现 本文档只是稍微解析下数据导入的流程,以及讲解实时进度条实现方法 【数据批量导入流程】 1、客户把.txt数据打包成.gz文件,发给我们。 GZ文件格式,每个文...

Carl_ ⋅ 2014/09/15 ⋅ 0

Winform开发框架之附件管理应用

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

walb呀 ⋅ 2017/12/04 ⋅ 0

HTML5文件实现拖拽上传

通过HTML的文件API ,Firefox、Chrome等浏览器已经支持从操作系统直接拖拽文件,并上传到服务器。 相对于使用了十多年的HTML表单,这是一个革命性的进步。虽然IE的落后让很多开发者还在观望中...

布莱恩- ⋅ 2012/07/13 ⋅ 2

[分享]WeX5中input拍照上传图片方法分享,可单图与多图

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

小次叶 ⋅ 2016/09/06 ⋅ 0

MVC5:使用Ajax和HTML5实现文件上传功能

引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能。 基本功能:实现带有进度...

柠檬酷 ⋅ 2015/11/23 ⋅ 0

MVC5:使用Ajax和HTML5实现文件上传功能

引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能。 基本功能:实现带有进度...

柠檬酷 ⋅ 2015/10/08 ⋅ 0

Java程序员从笨鸟到菜鸟之(七十一)细谈struts2(十三)struts2实现文件上传和下载详解

文件上传和文件下载是我们在web应用程序中常用的两个功能,在java中,实现这两种功能的方式也有很多种,其中struts2就给我们提供了一种算是比较简单的方式吧,下面我们就一起来看一下,首先我...

长平狐 ⋅ 2012/11/12 ⋅ 1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring发展历程总结

转自与 https://www.cnblogs.com/RunForLove/p/4641672.html 目前很多公司的架构,从Struts2迁移到了SpringMVC。你有想过为什么不使用Servlet+JSP来构建Java web项目,而是采用SpringMVC呢?...

onedotdot ⋅ 38分钟前 ⋅ 0

Python模块/包/库安装(6种方法)

Python模块/包/库安装(6种方法) 冰颖机器人 2016-11-29 21:33:26 一、方法1: 单文件模块 直接把文件拷贝到 $python_dir/Lib 二、方法2: 多文件模块,带setup.py 下载模块包(压缩文件zip...

cswangyx ⋅ 57分钟前 ⋅ 0

零基础学习大数据人工智能,学习路线篇!系统规划大数据之路?

大数据处理技术怎么学习呢?首先我们要学习Python语言和Linux操作系统,这两个是学习大数据的基础,学习的顺序不分前后。 Python:Python 的排名从去年开始就借助人工智能持续上升,现在它已经...

董黎明 ⋅ 今天 ⋅ 0

openJdk和sun jdk的区别

使用过LINUX的人都应该知道,在大多数LINUX发行版本里,内置或者通过软件源安装JDK的话,都是安装的OpenJDK, 那么到底什么是OpenJDK,它与SUN JDK有什么关系和区别呢? 历史上的原因是,Ope...

jason_kiss ⋅ 今天 ⋅ 0

梳理

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。 它是JS的状态容器,是一种解决问题的方式,所以即可以用于 react 也可以用于 vue。 需要理解其思想及实现方式。 应用中所有的 stat...

分秒 ⋅ 今天 ⋅ 0

Java 后台判断是否为ajax请求

/** * 是否是Ajax请求 * @param request * @return */public static boolean isAjax(ServletRequest request){return "XMLHttpRequest".equalsIgnoreCase(((HttpServletReques......

JavaSon712 ⋅ 今天 ⋅ 0

Redis 单线程 为何却需要事务处理并发问题

Redis是单线程处理,也就是命令会顺序执行。那么为什么会存在并发问题呢? 个人理解是,虽然redis是单线程,但是可以同时有多个客户端访问,每个客户端会有 一个线程。客户端访问之间存在竞争...

码代码的小司机 ⋅ 今天 ⋅ 0

到底会改名吗?微软GVFS 改名之争

微软去年透露了 Git Virtual File System(GVFS)项目,GVFS 是 Git 版本控制系统的一个开源插件,允许 Git 处理 TB 规模的代码库,比如 270 GB 的 Windows 代码库。该项目公布之初就引发了争...

linux-tao ⋅ 今天 ⋅ 0

笔试题之Java基础部分【简】【二】

1.静态变量和实例变量的区别 在语法定义上的区别:静态变量前要加static关键字,而实例变量前则不加。在程序运行时的区别:实例变量属于某个对象的属性,必须创建了实例对象,其中的实例变...

anlve ⋅ 今天 ⋅ 0

Lombok简单介绍及使用

官网 通过简单注解来精简代码达到消除冗长代码的目的 优点 提高编程效率 使代码更简洁 消除冗长代码 避免修改字段名字时忘记修改方法名 4.idea中安装lombnok pom.xml引入 <dependency> <grou...

to_ln ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部