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;
}