<!--html-->
<div class="form-group control-label">
            <div class="col-sm-2 control-label">
            <input id="upload" class="#" type="file" multiple name="imageUpload" />
            </div>
                <br>
                <p class="control-label"
 
>支援多種圖片格式，按control可以上傳多張，最多4張且每張大小不可大於2M</p>
                <ul id="ul" class="col-lg-12 container">
                    <li><div class="preview" ><img src="imgs/add.png"></div></li>
                    <li><div  class="preview" ><img src="imgs/add.png"
 
></div></li>
                    <li><div class="preview" ><img src="imgs/add.png"></div></li>
                    <li><div  class="preview"><img src="imgs/add.png"></div></li>
                </ul>
            </div>

/*JS*/
 

var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i; //控制格式
var iMaxFilesize = 2097152; //控制大小2M
var iMaxFilesize = 2097152; //控制大小2M
function preview1(file) {
    var reader = new FileReader();
    if (!rFilter.test(file.type)) {
        alert("檔案格式必須為圖片");
        return;
    }
    if (file.size > iMaxFilesize) {
        alert("圖片大小不能超過2M");
        return;
    }
    reader.onload = function(e) {
        var $img = $('<img>').attr("src", e.target.result);
        $(".preview").eq(0).empty().append($img);
    };
    reader.readAsDataURL(file);
}

$(function() {
    $('[type=file]').change(function(e) {
    var file1 = e.target.files[0];
    preview1(file1);
     });
  });

基本思路：
1）例項化一個FileReader物件
2）使用FileReader物件的readAsDataURL(引數)方法，將URL變成base64編碼的字串。
2）使用FileReader物件裡面的onload()方法，立即以下執行匿名函式。
3）使用target.result得到剛剛readAsDataURL(file)方法得到的字串。這個字串其實是URL另一種形式。
4）建立一個新的img標籤，其中src的值為剛才得到的URL。
5）清空目標子節點中，完成圖片的替換，完成預覽。
6）使用change()監聽<input type="type"> 。其中e.target.files[0]; 表示上傳的第一張圖片。
7）呼叫方法，引數為剛才傳入的圖片。