Ajax上传文件

首先声明一个定义

在form表单中有一个enctype的属性,这个属性就是

multipart/form-data:是将文件以二进制的形式上传,这样可以实现多种类型的文件上传。

如图我们先实现简单的上传文件

Ajax上传文件

这个页面的效果就是

Ajax上传文件

接着我们就需要写后台,我们这采用php,将浏览器缓存区里面的数据移到当前文件夹里

Ajax上传文件

移动函数是死的,文件夹是活的我们可以设置存放的文件夹在../这里面设置,这里是设置的当前文件的上一级文件。

然后进行测试,会发现完美运行,图片就不展示可,很简单。

接着我们就来写ajax上传文件

Ajax上传文件

如图这就是ajaxs文件上传的代码,不难发现我们在最后几行采用了 将form表单打包的方法new了一个FromData,这个是html5给我们提供的,这个函数的基本原理是先让javaScript获取到图片的数据,然后在用fromdata这个方法进行转换成能被发送的格式。其实也很简单,慢慢想就明白了,至于后台php处理大方法我们就采用了三元运算符向前台传值,让前台分析输出

Ajax上传文件