圖片上傳並回顯Ajax異步篇

時間 2019-11-17

標籤圖片上傳 ajax 異步欄目 Ajax 简体版

原文原文鏈接

圖片上傳並回顯Ajax異步篇

圖片如何無刷新的上傳到服務器呢?繼前兩篇文章後，咱們來實戰一下如何無刷新的異步上傳圖片，咱們仍是先看一下效果css

在實戰前呢，咱們須要作些準備工做。好比說，瞭解一下FormData對象html

「FormData對象用以將數據編譯成鍵值對，以便用XMLHttpRequest來發送數據。其主要用於發送表單數據，但亦可用於發送帶鍵數據(keyed data)，而獨立於表單使用。若是表單enctype屬性設爲multipart/form-data ，則會使用表單的submit()用來提交表單，這個方法和提交表單按鈕很相似。")方法來發送數據，從而，發送數據具備一樣形式。」jquery

這是官方的講解，我來講一下個人理解，咱們new 一個FormData( $(form) )對象時，它會幫咱們把form表單裏的數據封裝成鍵值對的形式，之前咱們都時用input的submit進行提交數據，當咱們拿到這個form對象的時候，咱們就能夠用ajax模擬input的submit提交，既然知道了這些，咱們就開始一步步的編程吧。web

咱們先完善一下界面，看一下下面的代碼ajax

這是body裏的內容，不要忘了form，只是沒有了action，enctype屬性也要設置好，個人上一篇文章有對enctype的講解圖片上傳並回顯後端篇編程

<body>
<form id="formTag1" enctype="multipart/form-data">
    <div class="uploadImgBtn" id="uploadImgBtn">
        <input class="uploadImg" type="file" name="file" id="file1">
    </div>
</form>
</body>

這是css裏的內容json

<style>
    .uploadImgBtn {
        width: 100px;
        height: 100px;
        cursor: pointer;
        position: relative;
        background: url("img/plus.png") no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .uploadImgBtn .uploadImg {
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

    .pic {
        width: 100px;
        height: 100px;
    }

    .pic img {
        width: 100%;
        height: 100%;
    }
</style>

基本的樣式都已經編寫完成，咱們來參觀一下吧
後端

好了，咱們開始編寫咱們的jquery代碼吧，在編寫以前咱們理一下思路，當用戶選擇好圖片時，即input 的change事件觸發時，咱們就把圖片上傳到服務器，服務端返回圖片的url，咱們拿到這個url時，把它設置爲咱們input外面盒子的背景圖。既然知道了思路咱們就編寫一下代碼吧服務器

<script>
    $(document).ready(function(){
        $("#file1").on("change", upload );
    })

    function upload(){
        /**
         * 咱們存一下this對象，
         * 咱們將在ajax的回調函數中，
         * 將要用這個對象，
         * 用它來改變父盒子的背景圖
         *
         */
        var self = this;
        //若是不理解我寫的，能夠看看個人前幾篇文章
        $.ajax({
            url: "/UpImg/upload",
            type: "post",
            dataType: "json",
            cache: false,
            data: new FormData($("#formTag1")[0]),
            processData: false,// 不處理數據
            contentType: false, // 不設置內容類型
            success: function(data){
                /*
                    後端返回的數據格式爲
                    {"url": "xxxxxx"}
                 */
                $(self).parent().css({
                    "background-image": "url("+data.url+")"
                })
            }

        })
    }

</script>

咱們把change事件的執行函數獨立出來，由於咱們可能還須要用到這個函數。函數也沒有什麼難點，就是保存一個this對象，加一個ajax。咱們來看一下效果圖app

咱們已經實現了change事件觸發時，咱們把圖片上傳到服務器，咱們也能夠改變咱們已經選擇好的圖片，到這裏確定尚未結束。由於用戶只是選擇了一張圖片，若是咱們的業務須要用戶上傳多張圖片呢，那咱們這個確定就不知足要求了，咱們須要再給咱們的代碼添加一些功能。好比說，當用戶選擇好一張後，再生成一個form->input標籤，而後就這樣遞歸；但咱們還須要加一些條件，就是當用戶改變已經選擇好的圖片時，咱們不能生成form->input標籤。好了需求大概就是這樣的。

咱們來理一下思路：

一、咱們須要給form標籤外面添加一個盒子，咱們把全部生成的form標籤都放裏面。

二、咱們須要有一個計數器，記錄form的個數，也是經過這個咱們能夠給form和input設置不一樣的id

三、咱們須要判斷當前change事件是第幾個，若是它的id中的數值部分和count同樣，咱們就新生成一個form，不然就返回

咱們先看一下咱們的html部分

<body>
<div id="formBox">
    <form id="formTag1" enctype="multipart/form-data">
        <div class="uploadImgBtn" id="uploadImgBtn">
            <input class="uploadImg" type="file" name="file" id="file1">
        </div>
    </form>
</div>
</body>

咱們來編碼實現一下js

<script>
    //做爲第幾個form的標誌
    var count = 1;
    $(document).ready(function(){
        $("#file1").on("change", upload );
    });
    function upload(){
        var self = this;

        //得到它是第幾個form表單
        var num = this.getAttribute("id").replace(/[a-zA-Z]/g,"");
        //構造form的選擇器
        var $form = "#formTag" +num;

        $.ajax({
            url:"/UpImg/upload",
            type:"post",
            dataType:"json",
            cache:false,
            data: new FormData($($form)[0]),
            processData: false,// 不處理數據
            contentType: false, // 不設置內容類型
            success:function(data){
                //設置背景爲咱們選擇的圖片
                $(self).parent().css({
                    "background-image": "url("+data.url+")"
                });

                //咱們再生成一個form
                if(count == num ){
                    //count計數加1
                    count +=1;
                    var str = '<form id="formTag'+count+'" enctype="multipart/form-data">'+
                        '<div class="uploadImgBtn" id="uploadImgBtn">'+
                        '<input class="uploadImg" type="file" name="file" id="file'+count+'">'+
                        '</div>'+
                        '</form>   ';
                    //向最外面的盒子添加form    
                    $("#formBox").append($(str));
                    //構造input的選擇器
                    var $sel = "#file"+count;
                    //爲新生成的input綁定change事件
                    $($sel).on("change", upload );

                }else{
                    //若是不等於
                    return false;
                }
            }
        });
    }
</script>

這樣的話咱們基本就實現了咱們的效果，就如開頭中的效果，這個是能夠無限添加form的，到時候能夠給count設置一個上界，根據本身的業務來調整吧，到此咱們的圖片上傳並回顯系列就算完結了;

據說520快到了，咱們是否是須要new一個會說話的對象呢，520的時候咱們就來實戰new一個對象吧，也是做爲一個禮物送給你們呢(手動滑稽)

圖片上傳並回顯系列
如何用input標籤上傳多個圖片並回顯
 圖片上傳並回顯後端篇