ajax无刷新表单信息提交 无刷新附件上传

1.收集表单信息
利用新技术FormData表单数据对象,可以实现快速收集表单信息。
FormData是html5的新技术,在主流浏览器都可以正常使用。
传统方式(javascript+dom+ajax)无刷新收集表单信息和提交:
在这里插入图片描述
新技术FormData+ajax实现无刷新方式收集并提交表单信息:
在这里插入图片描述
在这里插入图片描述
服务器端内容:
在这里插入图片描述
2.ajax无刷新附件上传
<form enctype=”multipart/form-data”> 这个不需要了
<input type=”file”>
服务器端:$_FILES接收附件信息(name/error/size/type/tmp_name)
error:
0---->ok
1---->大小超出php.ini限制
2---->大小超出MAX_FILE_SIZE表单域限制
3---->附件只上传了一部分
4---->没有上传附件

move_uploaded_file(附件临时路径名,真实附件路径名);

收集附件信息:
dom方式只可以收集普通的表单域信息,并且浏览器由于安全方面的限制也禁止通过javascript语言操作本地文件。

可以利用FormData实现附件信息的收集:普通表单域 和 上传文件域 均可以收集。

在服务器端收集到“普通表单域”和“上传文件域”信息:
在这里插入图片描述
客户端页面:
在这里插入图片描述
在这里插入图片描述
服务器端处理逻辑:
在这里插入图片描述
获得到的上传附件文件:
在这里插入图片描述
2.1 使用FormData注意:
①每个表单域必须有name属性
②在form标签里边无需设置enctype=”multipart/form-data”属性(即使有上传文件域也不需要设置)
③ajax通过post方式传递FormData的数据不需要设置setRequestHeader()方
④普通表单域的特殊符号无需编码
3. 上传大附件进度条设置
3.1 php.ini开放大附件上传限制:
在这里插入图片描述
在这里插入图片描述
ajax对象有成员upload,该upload成员是一个对象,本身有onprogress事件
该事件每间隔100ms左右就执行一次,执行的时候可以感知附件已经上传和总大小等信息,
使得“已经上传大小”和“总大小”做对比可以获得上传附件的百分比,进而就可以设置进度条。
在这里插入图片描述
在这里插入图片描述
3.2 进度条具体设置
在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_37171379/article/details/89020106
今日推荐