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';
    ?>