Ajax上传文件(JQuery篇)

步骤与原生JS相差无几 同样需要配合FormData使用
目录结构
一级 test
二级 imgs js(放个JQ文件即可) index.html upload.php
示例代码
HTML部分

    <h2>图片上传并预览</h2>       <form action="">               <input name='icon' type="file">        </form>    <!-- src 目前还没有值 -->    <img src="" alt="">

JS部分

<script>    /* jQuery实现 异步上传文件        contentType 请求头 默认值是             setRequestHeader("Content-type","application/x-www-form-urlencoded");             false的含义是 不额外的设置头        processData            是否会转化数据             如果要发送formData 设置为false 不需要转化    */    $(function(){      // 绑定改变事件      $('input').change(function(){        // 获取FormData jQuery中有一个 dom的伪数组        var formData = new FormData($('form')[0]);        //   console.log(this);        $.ajax({            url:'./upload.php',            type:'post',            data:formData,            contentType: false,// 当有文件要上传时，此项是必须的，否则后台无法识别文件流的起始位置(详见：#1)            processData: false,// 是否序列化data属性，默认true(注意：false时type必须是post，详见：#2)            success:function(data){                console.log(data);                $('img').attr('src',data);            }        })      })    })</script>

PHP部分

    <?php    // 保存上传的 文件    move_uploaded_file($_FILES['icon']['tmp_name'],'./imgs/xxx.png');    // 返回 文件的 路径    echo  './imgs/xxx.png';    ?>