效果：

基本操作：

（1）上傳：

        點選圖示上傳預覽；

（2）刪除：

      點選右上角編輯；

     然後選擇要刪除的圖片；

難點：

        一個檔案域只能上傳一張圖片，input標籤d的multiple=“multiple”屬性在ios端中可以實現圖片的多張選擇（是否能多張傳沒有測試，但在本程式碼中單次也是能預覽單張），但是安卓端中multiple無效（安卓手機調出新手機相簿後點擊圖片直接上傳），

html程式碼：

<form action="#" method="post" enctype="multipart/form-data">
 

<div id="ad">
    <div class="request_title"><span style="float:left;height:2rem;width:40%">圖片說明（可選）</span><span class="show" id="dd">編輯</span><span id="over" class="hidden">完成</span></div>
    <div class="request_select2" id="ss">
        <div id="pink">
            <div class="dd"><input type="file" name="file1" id="ad_doc1" accept="image/*" onchange="cnm(this)"><span>+</span></div>  &lt;!&ndash;按鈕&ndash;&gt;
        </div>
    </div>
</div>

css程式碼：

js程式碼：

mui.previewImage();

document.getElementById("dd").onclick=function(){
    var tt=document.getElementsByClassName("yy");
    if(tt.length>0){

        var a1=document.getElementById("pink");
        var a2=a1.getElementsByClassName("yy");

        for( var i=0;i<a2.length;i++){
            a2[i].getElementsByTagName("div")[0].className="cel1";

        }
        document.getElementById("dd").className="hidden";
        document.getElementById("over").className="show";
        document.getElementsByClassName("dd")[0].className="dd hidden";
    };


    document.getElementById("over").onclick=function() {

        var a1 = document.getElementById("pink");
        var a2 = a1.getElementsByClassName("yy");

        for (var i = 0; i < a2.length; i++) {
            a2[i].getElementsByTagName("div")[0].className = "cel";

        }
        document.getElementById("dd").className = "show";
        document.getElementById("over").className = "hidden";

        document.getElementsByClassName("dd")[0].className = "dd";
    }


};




function removeOption(obj){
    obj.parentNode.parentNode.previousElementSibling.remove();//previousElementSibling是獲取上一個兄弟結點
    obj.parentNode.parentNode.remove();

}
function cnm(obj){
    var ab=document.getElementById("pink");
    var cd=ab.getElementsByClassName("yy");
    if(cd.length<3){
        var a1=obj.getAttribute("name");
        var a2=a1.substr(a1.length-1,1);//獲取名字的最後一位字元，（start，）
        var a3=parseInt(a2);//將字串轉換成數字型別
        obj.parentNode.className="hidden";
        var a4=a3+1;
        var ad_doc="ad_doc"+a4;
        var file="file"+a4;
        var old_doc="ad_doc"+a3;
        var ad_img="ad_img"+a3;
        var para=document.createElement("div");
        para.className="dd";
        para.innerHTML="<input  type='file' name='"+file+"' id='"+ad_doc+"'  accept='image/*' onchange='cnm(this)' /><span >+</span>";
        obj.parentNode.parentNode.appendChild(para);
        var para2=document.createElement("div");
        para2.className="yy";
        para2.innerHTML=" <img class='hidden ci'  id='"+ad_img+"' src='./images/5.jpg' width='64' height='64'  style='margin-right:0.5rem' data-preview-src='' data-preview-group='1'/><div class='hidden cel' ><span class='ch'  onclick='removeOption(this)' >+</span></div></div>";

        document.getElementById("pink").insertBefore(para2,document.getElementById("pink").lastChild);
        setImagePreview(old_doc,ad_img,'64','64');
    }else{
        alert("只能上傳三張圖片！");
    }
}
//下面用於圖片上傳預覽功能
function setImagePreview(doc,preview,width,height) {
    //input
    var docObj = document.getElementById(doc);
    //img
    var imgObjPreview = document.getElementById(preview);
    //div
    var divs = document.getElementById("localImag");
    if (docObj.files && docObj.files[0]) {
        //火狐下，直接設img屬性
        imgObjPreview.style.display = 'block';
        imgObjPreview.style.width = width+'px';
        imgObjPreview.style.height = height+'px';
        //imgObjPreview.src = docObj.files[0].getAsDataURL();
        //火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要一下方式
        imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
        imgObjPreview.className="";
        imgObjPreview.className="show ci";
    } else {
        //IE下，使用濾鏡
        docObj.select();
        var imgSrc = document.selection.createRange().text;
        var localImagId = document.getElementById("localImag");
        //必須設定初始大小
        localImagId.style.width = width+"px";
        localImagId.style.height = height+"px";
        //圖片異常的捕捉，防止使用者修改後綴來偽造圖片
        try {
            localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
            localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
        } catch(e) {
            alert("您上傳的圖片格式不正確，請重新選擇!");
            return false;
        }
        imgObjPreview.style.display = 'none';
        document.selection.empty();
    }
    return true;
}