ajax上传文件,formdata上传文件,ajax上传file文件,原生ajax上传文件,ajax上传图片,ajax上传文件formdata

通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同

前端文件-Jquery版本:

<form id="form" enctype="multipart/form-data" method="post">
    <input type="text" name="desc" placeholder="文件名称"/><br/>
    <input type="file" name="file" placeholder="文件"/>
    <input type="button" id="submit" value="文件上传"/>
</form>
<script>
    $('#submit').click(function () {

       //Jquery对象转换为dom对象
        var $form = $('#form');
        var domForm = $form['0'];

        //构建formData对象
        var formData = new FormData(domForm);
        formData.append('diycontent','我是自定义数据');

        //异步上传文件
      $.ajax({
         url : 'file.php',
         type : 'POST',
         data : formData,
         // 告诉jQuery不要去处理发送的数据
         processData : false,
         // 告诉jQuery不要去设置Content-Type请求头, jquery 会自动设置为multipart/form-data
         contentType : false,
         beforeSend:function(){
            console.log('开始上传咯');
         },
         success : function(response) {
                console.log(response)
         },
         error : function(response) {
                console.log(response)
         }
      });

   });
</script>

前端文件-原生Javacript版本:

<form enctype="multipart/form-data"  method="post" onsubmit="return upload()">
    <input type="text" name="desc" placeholder="文件名称" /><br />
    <input type="file" name="file" placeholder="文件" />
    <input type="submit" value="文件上传" />
</form>
<script type="text/javascript">
    var    upload=function(){

        //获取表单对象
        form=document.forms[0];

        //构建formData对象
        formdata=new FormData(form);
        formdata.append('diycontent','我是自定义数据');

        //Ajax异步上传
        var httper=new XMLHttpRequest();
        httper.open('POST','file.php');
        httper.onload=function(oEvent){
            if(httper.status==200){
                console.log('success');
                console.log(httper.responseText);
            }
            else{
                console.log('error');
            }
        }
        httper.send(formdata);

        return  false;
    }
</script>

后端文件-PHP版本:

<?php
//文件上传
if(move_uploaded_file($_FILES['file']['tmp_name'], $_FILES["file"]["name"])){
    
    //记录日志
    $str='文件名:'.$_FILES['file']['tmp_name'].'--文件介绍:'.$_POST['desc'].'--Formdata追加的字段值:'.$_POST['diycontent'];
    
    file_put_contents('log/'.time().'.txt',$str);
    
    //让前端控制台输出看
    echo $str;
}

附件下载:

                learn.rar