通過傳統的form表單提交的方式上傳文件：

<style>
    form a {
        display: block;
        width: 90px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 5px;
        background-color: cornflowerblue;
        color: snow;
        margin-bottom: 10px;
        position
 
: relative;
    }

    #image {
        width: 90px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
    }

    #image_view {
        display: none;
        height: 100px;
        margin-bottom: 10px;
    }
</style>

<form method="post"
 
 enctype="multipart/form-data">
    <a>上傳圖片<input type="file" id="image" name="image"></a>
    <img id="image_view" src="">
    <textarea id="desc" name="desc" rows="10" cols="50" placeholder="請輸入圖片描述..."></textarea>
    <button type="submit">發布</button>
</
 
form>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(function () {
        $(‘#image‘).on(‘change‘, function() {
            /* 原理: 把本地圖片路徑："D:/image/..." 轉為 "http://..." 格式路徑進行顯示圖片 */
            var objUrl = $(this)[0].files[0];
            // 獲得一個http格式的url路徑: mozilla(firefox) || webkit or chrome
            var windowURL = window.URL || window.webkitURL;
            // createObjectURL創建一個指向該參數對象(圖片)的URL
            var dataURL;
            dataURL = windowURL.createObjectURL(objUrl);
            $(‘#image_view‘).attr(‘src‘, dataURL).css(‘display‘, ‘block‘);
        });
    });
</script>

傳統的form表單提交會導致頁面刷新，但是在有些情況下，我們不希望頁面被刷新，這種時候我們使用Ajax的方式進行請求：

<style>
    form a {
        display: block;
        width: 90px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 5px;
        background-color: cornflowerblue;
        color: snow;
        margin-bottom: 10px;
        position: relative;
    }

    #image {
        width: 90px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
    }

    #image_view {
        display: none;
        height: 100px;
        margin-bottom: 10px;
    }
</style>

<form>
    <a>上傳圖片<input type="file" id="image" name="image"></a>
    <img id="image_view" src="">
    <textarea id="desc" name="desc" rows="10" cols="50" placeholder="請輸入圖片描述..."></textarea>
    <button type="button" id="publish">發布</button>
</form>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(function () {
        $(‘#image‘).on(‘change‘, function () {
            /* 原理: 把本地圖片路徑："D:/image/..." 轉為 "http://..." 格式路徑進行顯示圖片 */
            var objUrl = $(this)[0].files[0];
            // 獲得一個http格式的url路徑: mozilla(firefox) || webkit or chrome
            var windowURL = window.URL || window.webkitURL;
            // createObjectURL創建一個指向該參數對象(圖片)的URL
            var dataURL;
            dataURL = windowURL.createObjectURL(objUrl);
            $(‘#image_view‘).attr(‘src‘, dataURL).css(‘display‘, ‘block‘);
        });

        $(‘#publish‘).on(‘click‘, function () {
            var formData = new FormData($(‘form‘)[0]);
            // var formData = new FormData();
            // formData.append(‘image‘, $(‘#image‘)[0].files[0]);
            // formData.append(‘desc‘, $(‘#desc‘).val());
            $.ajax({
                url: ‘/index/‘,
                type: ‘post‘,
                data: formData,
                contentType: false,
                processData: false,
                success: function (msg) {
                    // 提示信息
                }
            });
        });
    });
</script>

註：$(‘form‘).serialize()可以對form表單進行序列化，從而將form表單中的參數傳遞到服務端（創建以標準 URL 編碼表示的文本字符串的方式）。只能傳遞一般的參數，上傳文件的文件流是無法被序列化並傳遞的。

Ajax 上傳文件