Html:

    <div>
        圖片：
        <div>
            <input onchange="FirstImg()" name="firstImg" style="opacity:0;position:absolute" type="file" id="FirstfileImg" multiple="">
            <div position:absolute="">
                <span> 點擊這裏上傳圖片</span>
            </
 
div>
        </div>
    </div>
    <fieldset style="width:100%;">
        <!-- <legend>圖片預覽</legend> -->
        <div style="position: relative;" id="ccc">
        </div>
    </fieldset>

Js:

<script>
jQuery.DuoImgsYulan = function(file, id) {
    
 
for (var i = 0; i < 3; i++) {
        if (!/image\/\w+/.test(file[i].type)) {
            alert("請選擇圖片文件");
            return false;
        }
        if (file[i].size > 2048 * 1024) {
            alert("圖片不能大於2MB");
            continue;
        }
        var img;
        console.log(document.getElementById(
 
"fileImg"));
        console.log(file[i]);
        console.log("file-size=" + file[i].size);
        var reader = new FileReader();
        reader.onloadstart = function(e) {
            console.log("開始讀取....");
        }
        reader.onprogress = function(e) {
            console.log("正在讀取中....");
        }
        reader.onabort = function(e) {
            console.log("中斷讀取....");
        }
        reader.onerror = function(e) {
            console.log("讀取異常....");
        }
        reader.onload = function(e) {
            console.log("成功讀取....");
            var div = document.createElement("div"); //外層 div
            div.setAttribute("style", "position:relative;width:90px;height:90px;float:left;z-index:2;width:92px;margin-left:8px;");
            var del = document.createElement("div"); //刪除按鈕div
            del.setAttribute("style", "position: absolute; bottom: 4px; right: 0px; z-index: 99; width: 19px; height:18px;border-radius:50%;")
            var delicon = document.createElement("img");
            delicon.setAttribute("src", "http://www.jq22.com/tp/f26c324f-24db-4f08-91d6-f7ffc9ca1516.png");
            delicon.setAttribute("title", "刪除");
            delicon.setAttribute("style", "cursor:pointer;width: 20px; height:20px");
            del.onclick = function() {
                this.parentNode.parentNode.removeChild(this.parentElement);
                ClearfirtsImg();
            };
            del.appendChild(delicon);
            div.appendChild(del);
            var imgs = document.createElement("img"); //上傳的圖片
            var input = document.createElement("input"); //上傳的圖片
            input.setAttribute("name", "imgs[]");
            input.setAttribute("value", e.target.result);
            input.setAttribute("style", ‘display:none‘);
            imgs.setAttribute("name", "loadimgs[]");
            imgs.setAttribute("src", e.target.result);
            imgs.setAttribute("width", 90);
            if (document.getElementById(id).childNodes.length > 5) {
                document.getElementById(id).removeChild(document.getElementById(id).firstChild);
            }
            div.appendChild(imgs)
            div.appendChild(input)
            document.getElementById(id).appendChild(div);
        }
        reader.readAsDataURL(file[i]);
    }
}

function FirstImg() {
    $.DuoImgsYulan(document.getElementById("FirstfileImg").files, "ccc");
}

function ClearfirtsImg() {
    var file = $("#FirstfileImg")
    file.after(file.clone().val(""));
    file.remove();
}
</script>

ajax:

$(‘#submit‘).click(function(){
        var formData = new FormData($( "#form" )[0]);
        var url = url;
        $.ajax({
            type:‘post‘,
            url:url,
            data:formData,
            cache: false,
            contentType: false,
            processData: false,
            success:function(data){
                // if(data.status==1){
                //     success(data);
                // }else{
                //     error(data);
                // }
            }
        });
    });

php 接收多圖片base64