无刷新文件上传
ajax的FormData对象完成无刷新操作
ajax level 2 标准 可以对文件操作,但是只支持新的浏览器(不兼容低版本的IE),是H5标准
注意事项:
-
表单大小

-
单个文件上传大小

实操:
-
写一个form表单,但是需要注意的是,不为form表单设置 enctype属性

-
为上传的按钮绑定一个点击事件,完成ajax提交上传文件

-
利用FormData收集form表单里面的数据(普通数据 + 上传域里面的)

-
要利用ajax对象的upload成员的onprogress句柄来监控文件上传的情况
- 设置一个上传进度条显示框

b) css设置


c) 设置监控文件上传事件

-
要通过 onreadystatechange 来监控ajax操作

-
发送ajax请求(注意:使用FormData来完成数据上传的时候不需要设置ajax的请求头)

-
在onprogress 里面利用 事件源(上传的那个文件)做进度显示

-
服务器data.php文件实现上传文件处理

魔法映像企业网站管理系统下载技术上面应用了三层结构,AJAX框架,URL重写等基础的开发。并用了动软的代码生成器及数据访问类,加进了一些自己用到的小功能,算是整理了一些自己的操作类。系统设计上面说不出用什么模式,大体设计是后台分两级分类,设置好一级之后,再设置二级并选择栏目类型,如内容,列表,上传文件,新窗口等。这样就可以生成无限多个二级分类,也就是网站栏目。对于扩展性来说,如果有新的需求可以直接加一个栏目类型并新加功能操作
iframe实现无刷新上传
-
创建一个index.php文件,设置上传域


技术点1: 需要设置表单提交打开的窗口为 自己定义的一个 iframe
技术点2: 在data.php 文件需要处理生成的图片,然后返回图片URL地址,使用top获取打开当前iframe的窗口,修改img标签的src属性
2. data.php 完成图片的保存和返回










