ajax如何上传文件

原文地址

一、总结

1. 怎么用ajax上传文件？

使用FormData，FormData+ajax即可异步上传二进制文件

2. FormData是什么？

利用 FormData 对象，可以通过JavaScript键值对来模拟一系列表单控件，还可以使用 XMLHttpRequest的send() 方法来异步提交表单。
与普通的Ajax相比，使用FormData 的最大优点就是可以异步上传二进制文件。

3. FormData+ajax上传文件的注意事项？

$.ajax({
    url: "upload.ashx",
    type: "POST",
    data: formData,
    /**
    *必须false才会自动加上正确的Content-Type
    */
    contentType: false,
    /**
    * 必须false才会避开jQuery对 formdata 的默认处理
    * XMLHttpRequest会对 formdata 进行正确的处理
    */
    processData: false,
    success: function (data) {

二、文件的上传（表单上传和ajax文件异步上传）

项目中用户上传文件总是少不了的，既然有了表单上传为什么又要ajax上传呢？
因为表单上传过程中，整个页面就要刷新了，没有办法添加loading，而且如果上传的文件较大，当用户等待的时间中可能会有其他操作；所以这时就需要ajax上传文件，ajax上传就可以达到只刷新局部位置，并且可以接受后台的反馈来控制loading

<?php 
    $file = $_FILES;
    $param = $_POST;
?>
<form enctype="multipart/form-data">
    <div class="form-group">
        <label for="upload_name">名称</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="upload_name" placeholder="请输入名称">
        </div>
    </div>
    <div class="form-group">
        <label for="testfile">上传文件</label>
        <div class="col-sm-10">
            <input type="file" accept=".xlsx" id="testfile">
            <!-- 多文件上传:<input type="file" accept=".xlsx" id="testfile" multiple="multiple"/> -->
        </div>
    </div>
</form>
<input type="button" class="submit" value="上传">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    $('.submit').click(function () {
        var files = $('#testfile').prop('files');
        var name = $.trim($('#upload_name').val());
        if (files.length <= 0) {
            alert("请选择文件");
            return;
        }

        var formData = new FormData();
        formData.append("testfile", files[0]);
        // 多文件上传需要给参数名称后面加上[]
        // formData.append("testfile[]", files[1]);
        formData.append("name", name);

        $.ajax({
            url:'./ajaxuploadfile.php',
            type:'POST',
            async: false,
            data: formData,
            dataType:'json',
            cache: false, // 上传文件无需缓存
            processData : false, // 使数据不做处理
            contentType : false, // 不要设置Content-Type请求头
            success: function(data){
                console.log(data);
                if (data.status == 'ok') {
                    alert('上传成功！');
                }
            },
            error:function(response){
                console.log(response);
            }
        });
    })
</script>

三、注意

1. form的enctype必须是multipart/form-data才可以上传多个文件，ajax通过FormData来上传数据，ajax的cache、processData、contentType均要设置为false。

2. cache设为false是为了兼容ie8，防止ie8之前版本缓存get请求的处理方式。

3. contentType设置为false原因：https://segmentfault.com/a/1190000007207128。

4. processData：要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。

   150讲轻松搞定Python网络爬虫