使用Ajax非同步上傳圖片的方法(html,javascript,php)

標籤：ajax   jquery外掛程式   上傳   

前兩天項目中需要用到非同步上傳圖片和顯示上傳進度的功能，於是找了很多外國的文章，翻山越嶺地去遇上各種坑，這裡寫篇文章記錄一下。

HTML

<form id="fileupload-form">         <input id="fileupload" type="file" name="file" >   </form>

HTML代碼沒什麼好說，一個form表單，還有檔案類型的input。我們來看js部分。

javascript

    //綁定了`submit`事件。        $(‘#fileupload-form‘).on(‘submit‘,(function(e) {        e.preventDefault();        //序列化表單          var serializeData = $(this).serialize();       // var formData = new FormData(this);       $(this).ajaxSubmit({            type:‘POST‘,            url: *yoururl*,            dataType: ‘json‘,             data: serializeData,                        // data: formData,            //attention!!!               contentType: false,                  cache: false,                         processData:false,                  beforeSubmit: function() {                    //上傳圖片之前的處理               },            uploadProgress: function (event, position, total, percentComplete){                 //在這裡控制進度條               },            success:function(){            },            error:function(data){                alert(‘上傳圖片出錯‘);            }        });    }));    //繫結檔案選擇事件，一選擇了圖片，就讓`form`提交。       $("#fileupload").on("change", function() {        $(this).parent().submit();    });

PHP

<?php    //通過$_FILES[]去擷取檔案    echo ‘$_FILES[‘file‘]‘;

遇到的坑：

• 序列化表單，因為是檔案，不能通過val()，text()等方法擷取到它的值，只能通過序列化表單提交。代碼裡面使用.serialize()，有另外一種做法是使用.FormData()來提交，但是實驗過程中，一開始正常，後來報錯了。在stackoverflow.com上有人看到有人遇到同樣地問題，沒有解決，於是就放棄了。
• 普通的ajax是沒辦法或者說很難拿到上傳進度的。這裡使用了一個外掛程式jQuery Form Plugin，使用方法很簡單，原本ajax的配置都能用，而且有很多實用功能和詳盡的使用文檔。推薦~
• ajax上傳圖片這三個參數必須配置contentType: false, cache: false, processData:false,。
• 擷取本地預覽圖，這種方法可能會有瀏覽器安全色性問題。

$("#fileupload").change(function(){    if (this.files && this.files[0]) {       var reader = new FileReader();                   reader.onload = function (e) {            $(‘#theImg‘).attr(‘src‘, e.target.result);        }       reader.readAsDataURL(this.files[0]);   }}

• php部分注意雖然Ajax那裡使用的是POST方法，但是後台接受的時候只要是檔案都是用$_FILES。你可以通過$_FILES[‘file‘][‘type‘]去判斷檔案格式來做安全處理，我們這裡只是示範。還有其他參數，比如tmp_name是檔案路徑，name是檔案名稱。後台接收以後，你可以使用move_uploaded_file()來將檔案儲存到伺服器上。這裡就不多說。

其他補充

另外@_w同學補充，不重新整理頁面還可以通過設定form的target屬性指向一個當前頁面隱藏的iframe來實現。讓那個iframe去重新整理跳轉頁面。上面提到的jQuery Form Plugin也支援你這麼做。
另外再推薦一個外掛程式jquery-iframe-transport

推薦閱讀

• uploading-files-with-ajax
• image-upload-example
• jquery-progress-bar-for-php-ajax-file-upload

javascript方面我是新手，希望這篇文章能幫到更多遇到相同問題的人。如果哪裡寫的不好或者不對，還希望各位同行能夠善意指出。

如需轉載，請註明出處：http://www.w3ctrain.com/2015/07/11/uploading-image-with-ajax/

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

使用Ajax非同步上傳圖片的方法(html,javascript,php)