jQuery的$.ajax通过提交表单同步上传图片

本篇主要实现ajax同步上传表单图片，替代表单的submit事件。有时候我们不想实现ajax异步上传图片，会容易造成表单没提交之前，图片先异步传到服务器，要是表单不提交了，将会导致产生冗余的图片。

<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
  <!--利用cdn添加js和css库  -->
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
    投诉人： <input type="text" name="name" id="name" /><br>
    上传证明图片：<input type="file" name="litpic" id="litpic" accept="image/gif,image/png,image/jpg,image/jpeg">
    <button οnclick="checkSubmit();">提交</button>

    <script type="text/javascript">
    function checkSubmit(){  //提交实践

        var name = $("#name").val();
        var litpic= document.getElementById('litpic').files[0]; //获取文件路径名
        //var litpic= $("#litpic")[0].files[0];  //这句跟上一面那句作用一样
      
        console.log(document.getElementById('litpic').files[0]);

        var formData = new FormData();
        formData.append('name',name);
        formData.append('litpic',litpic);
      
        $.ajax({
            type: "POST",
            url: "test.PHP",  //同目录下的PHP文件
            data:formData,
            dataType:"json", //声明成功使用json数据类型回调
            //如果传递的是FormData数据类型，那么下来的三个参数是必须的，否则会报错
            cache:false,  //默认是true，但是一般不做缓存
            processData:false, //用于对data参数进行序列化处理，这里必须false；如果是true，就会将FormData转换为String类型
            contentType:false,  //一些文件上传http协议的关系，自行百度，如果上传的有文件，那么只能设置为false
            success: function(msg){  //请求成功后的回调函数

            }
        });
    }
    </script>
</body>   
</html>

test.PHP 代码：

<?PHP

    // 这里能正常接收到 $_FILES 对象，接下来就可以实现你的上传图片代码了，以下代码仅供参考。

    date_default_timezone_set('PRC');  //获取中国时区，'PRC':中华人民共和国
 
    if(!file_exists(date("Ymd",time()))) //如果文件夹不存在，则创建一个
        mkdir(date("Ymd",time()));  
 
    $username = $_POST['name']; //获取索引
 
    $filesName = $_FILES['litpic']['name'];  //文件名数组
    $filesTmpName = $_FILES['litpic']['tmp_name'];  //临时文件名数组
    $filePath = date("Ymd",time()).'/'.$filesName; //文件路径
 
    if(!file_exists(date("Ymd",time()).'/'.$filesName)){
        move_uploaded_file($filesTmpName, $filePath);
    }
    
    $json_array = array('name'=>$username,'litpic'=>$filePath); //转换成数组类型
 
    $json = json_encode($json_array);  //将数组转换成json对象
    echo   $json;
?>

jQuery的$.ajax通过提交表单同步上传图片

相关推荐