ajax实现文件上传 使用FormData进行Ajax请求

FormData是什么呢？

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件

先实现以下代码 再进行讲解

html代码

<form enctype="multipart/form-data" id="upForm">
    <input type="file" name="file" ><br><br>
    <input type="button" value="提交" id="demo">
</form>
<div class="picDis">
    <img src="" alt="">
</div>

js代码

//引入jquery文件
<script src="./jquery-1.9.1.min.js"></script>
<script>
//js代码
$('#demo').click(function(event) {
    //formdata储存异步上传数据
    var formData = new FormData($('form')[0]);
    //formData.append('file', $('#file')[0].files[0]); //可有可无 因为formData会自动获取表单元素name值
    //坑点: 无论怎么传数据,console.log(formData)都会显示为空,但其实值是存在的,f12查看Net tab可以看到数据被上传了
    $.ajax({
        url:'uploadDo.php',
        type: 'POST',
        data: formData,
        //这两个设置项必填
        contentType: false,
        processData: false,
        success:function(data){
        var srcPath = data;
        　　　　 //注意这里的路径要根据自己的储存文件的路径设置
        $('.picDis img').attr('src', srcPath);
        }
    })
});
</script>

php请求页面

$upFile = $_FILES['file'];

//判断文件是否为空或者出错
if ($upFile['error']==0 && !empty($upFile)) {
    $dirpath = creaDir('upload');
    $filename = $_FILES['file']['name'];
    $queryPath = './'.$dirpath.'/'.$filename;
    //move_uploaded_file将浏览器缓存file转移到服务器文件夹
    if(move_uploaded_file($_FILES['file']['tmp_name'],$queryPath)){
        echo $queryPath;
    }
}

/**
 * 创建文件夹函数,用于创建保存文件的文件夹
 * @param str $dirPath 文件夹名称
 * @return str $dirPath 文件夹名称
 */
function creaDir($dirPath){
    $curPath = dirname(__FILE__);
    $path = $curPath.'\\'.$dirPath;
    if (is_dir($path) || mkdir($path,0777,true)) {
        return $dirPath;
    }
}

这里要注意几点：

1、processData设置为false。因为data值是FormData对象，不需要对数据做处理 2、<form>标签添加enctype="multipart/form-data"属性 3、cache设置为false，上传文件不需要缓存 4、contentType设置为false，不设置contentType值，因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false

代码已验证 可正常运行！！！ 下面是formData及其他用法

Constructor

FormData()

想得到一个FormData对象：

var formdata = new FormData();

W3c草案提供了三种方案来获取或修改FormData。

方案1：创建一个空的FormData对象，然后再用append方法逐个添加键值对：

var formdata = new FormData();

formdata.append("name", "呵呵");

formdata.append("url", "http://www.baidu.com/");

方案2：取得form元素对象，将它作为参数传入FormData对象中！

var formobj =  document.getElementById("form");

var formdata = new FormData(formobj);

方案3：利用form元素对象的getFormData方法生成它！

var formobj =  document.getElementById("form");

var formdata = formobj.getFormData()

Method

FormData.append

本方法用于向已存在的键添加新的值，如该键不存在，新建之。

语法

formData.append(name, value);
formData.append(name, value, filename);

注: 通过 FormData.append()方法赋给字段的值若是数字会被自动转换为字符(字段的值可以是一个Blob对象,一个File对象,或者一个字符串,剩下其他类型的值都会被自动转换成字符串).

参数解释

• name
  键 (key)， 对应表单域
• value
  表单域的值
• filename (optional)
  The filename reported to the server (a USVString), when a Blob or File is passed as the second parameter. The default filename for Blob objects is "blob".

FormData.delete

将一对键和值从 FormData 对象中删除。

formData.delete(username);

FormData.get

返回给定键的第一个值

formData.append('username', 'Justin');
formData.append('username', 'Chris');
formData.get(username);    // "Justin"

FormData.getAll

返回给定键的所有值

formData.append('username', 'Justin');
formData.append('username', 'Chris');
formData.getAll(username);    // ["Justin", "Chris"]

FormData.has

检查是否包含给定键，返回 true 或 false

formData.has(username);

FormData.set

设置给定键的值

formData.set(name, value);
formData.set(name, value, filename);