ajax 上传文件

一.需求

　　公司最近的一个项目中有个需求是在当前页面上传文件后继续执行其他操作

二.解决方法

　　当时我的想法是以下两种:

　　1.使用form表单提交数据保留数据后再返回上个页面

　　2.使用ajax提交文件后，等执行其他操作结束再一起处理数据

　　以上两个想法都是可行的，但是在处理数据方面，2方式会显得更加优势，所以我选择使用ajax来提交文件，把文件处理后的数据返回当作一条数据

　　当然，如果使用ajax提交文件，需要使用到FormData对象，下面是一个简单例子

三.解决过程

------------------------------html文件代码---------------------------

<form action="toImage.php"  id= "uploadForm" class="space form-horizontal" method="POST"  enctype="multipart/form-data" >
    <div class="main" style="padding-top: 20px;">
        <div class="activity-title">
            <div class="form-group">
                <label class="col-xs-2">标题:</label>
                <div class="col-md-6 col-xs-10">
                    <input class="form-control" name="title" placeholder="" />
                </div>
            </div>
             <textarea class="txta" name="content"></textarea>
            
        </div>
        <a href="#" class="img-uploading">
            <i class="img-p"  id="symbol">+</i>
            <input type="file" name="file" class="uploading">
        </a>
         <a href="#finalImg"  class="btn btn-block create"  value="生成"  onclick="doUpload();">
        生成
        </a>
    </div>
</form>


<div class="container">
    <img id="haibao" class="haibao" src="./template/t1.png"/>
</div>
<script>
    $(".uploading").on("change",function(){

        if($(".uploading").val() != ""){
            $("#symbol").text("二维码已上传");
            $("#symbol").css("fontSize","20px");
        } 
    });

    function doUpload() {  
        var formData = new FormData($( "#uploadForm" )[0]);  
        $.ajax({  
            url: 'dealImg.php' ,  
            type: 'POST',  
            data: formData,  
            async: false,  
            cache: false,  
            contentType: false,  
            processData: false,  
            success: function (returndata) {  
                $("#haibao").attr("src",returndata);
            },  
            error: function (returndata) {  
           
            }  
         });  
    }  
</script>

只需写好后台接口即可，下面是一个简单的原生写的接口

----------------------------------------------------------------php--------------------------------------

<?php
if ((($_FILES["file"]["type"] == "image/jpeg")||($_FILES["file"]["type"] == "image/jpg")||($_FILES["file"]["type"] == "image/png"))&& ($_FILES["file"]["size"] < 2097152))
    {
    if($_FILES["file"]["error"] > 0)
    {
        echo "发生错误" . $_FILES["file"]["error"] . ",请找TzSteady<br />";
        exit;
    }else
    {
        move_uploaded_file($_FILES["file"]["tmp_name"],"./code/" . date("Ymd").$_FILES["file"]["name"]);
        $codePath = "./code/" . date("Ymd").$_FILES["file"]["name"];
        echo $codePath;
    }
}else
{
    echo "<script>
    alert('请上传小于2M的jpg/png/jpeg格式的二维码');
    </script>";
    exit;
}