前端頁面：

 <div class="container">
        <form class="form-horizontal" enctype="multipart/form-data" method="post" action="">      
            <div class="form-group">
                   <label for="inputUser" class="col-md-2 control-label">照片</label>
                     <div class="col-md-3">
                           <input type="file" name="multipartFile" class="form-control" id="inputUser" >
                           <img src="" id="img" style="width: 100px; height: 150px;">
                     </div>
              </div>
        </form>
 </div>
 

$(function(){
     $("[name='multipartFile']").change(function(){
        // this.files[0]代表的是選擇的檔案資源的第一個，因為上面寫了 multiple="multiple" 就表示上傳檔案可能不止一個
        // ，但是這裡只讀取第一個
        var objUrl = getObjectURL(this.files[0]) ;
        if (objUrl) {
            // 在這裡修改圖片的地址屬性
            $("#img").attr("src", objUrl) ;
        }
     }) ;
      // getObjectURL是自定義的函式
     function getObjectURL(file) {
        var url = null ;
        // 下面函式執行的效果是一樣的，只是需要針對不同的瀏覽器執行不同的 js 函式而已
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }
});