Jquery FormData文件異步上傳 快速指南

網站中文件的異步上傳是個比較麻煩的問題，不過現在通過jquery 可以很容易的解決這個問題；

使用jquery2.1版本，較老版本不支持異步文件上傳功能；

表單代碼：

<form id="fileUploadForm">
    <input type="file" name="file" class="imageUpload"/>
    <span id="commit">提交到服務器</span>
</form>

<form id="fileUploadForm">
    <input type="file" name="file" class="imageUpload"/>
    <span id="commit">提交到服務器</span>
</form>

<form id="fileUploadForm">
    <input type="file" name="file" class="imageUpload"/>
    <span id="commit">提交到服務器</span>
</form>

創建一個表單，里面包含一個file input 

腳本代碼：

function uploadFile() {
        //將表單封裝為一個formData對象
        var formData = new FormData($('#fileUploadForm')[0]);
        $.ajax({
            url:'http://127.0.0.1:8080/image/',
            type:'POST',
            //將formData對象作為參數進行上傳
            data:formData,
            contentType: false,
            processData: false,
            success:function (data) {
                //文件上傳成功后的處理
                $('#showUploadContent').append('<div>name:'+data.name+'<br/>url:'+data.url+'<img src="http://192.168.1.107/'+data.url+'"></div>')
            }
        })
    }
    $(function () {
        //為提交按鈕添加點擊事件
        $('#commit').click(function () {
            uploadFile();
        })
    })

function uploadFile() {
        //將表單封裝為一個formData對象
        var formData = new FormData($('#fileUploadForm')[0]);
        $.ajax({
            url:'http://127.0.0.1:8080/image/',
            type:'POST',
            //將formData對象作為參數進行上傳
            data:formData,
            contentType: false,
            processData: false,
            success:function (data) {
                //文件上傳成功后的處理
                $('#showUploadContent').append('<div>name:'+data.name+'<br/>url:'+data.url+'<img src="http://192.168.1.107/'+data.url+'"></div>')
            }
        })
    }
    $(function () {
        //為提交按鈕添加點擊事件
        $('#commit').click(function () {
            uploadFile();
        })
    })

function uploadFile() {
        //將表單封裝為一個formData對象
        var formData = new FormData($('#fileUploadForm')[0]);
        $.ajax({
            url:'http://127.0.0.1:8080/image/',
            type:'POST',
            //將formData對象作為參數進行上傳
            data:formData,
            contentType: false,
            processData: false,
            success:function (data) {
                //文件上傳成功后的處理
                $('#showUploadContent').append('<div>name:'+data.name+'<br/>url:'+data.url+'<img src="http://192.168.1.107/'+data.url+'"></div>')
            }
        })
    }
    $(function () {
        //為提交按鈕添加點擊事件
        $('#commit').click(function () {
            uploadFile();
        })
    })

NOTE：提交按鈕使用<button/> <input type="submit"/> 的情況下將會頁面跳轉，我使用的是<span/>元素：

<span id="commit" >提交到服務器</span>

這樣進行文件上傳就不會出現頁面跳轉，達到異步上傳；