移动端图片上传预览

效果：

基本操作：

（1）上传：

        点击图标上传预览；

（2）删除：

      点击右上角编辑；

     然后选择要删除的图片；

难点：

        一个文件域只能上传一张图片，input标签d的multiple=“multiple”属性在ios端中可以实现图片的多张选择（是否能多张传没有测试，但在本代码中单次也是能预览单张），但是安卓端中multiple无效（安卓手机调出新手机相册后点击图片直接上传），

html代码：

    
圖片說明（可選）编辑完成
    

        

            
+
  <!–按钮–>
        
    

提交

css代码：

*{ margin:0; padding:0; } #ad{ width:98%;background:#fff;margin:0 auto;margin-top:0.5rem; } .request_title{ width:100%; height:2rem; line-height: 2rem; font-size:0.9rem; padding-left:0.5rem; } .request_select2{ width:98%; min-height:5rem; margin:0 auto; margin-left:0.5rem; } #pink { width: 100%; height: 4rem; } .request_select2 #pink .dd{ width:4rem; height:4rem; background:#fff; color:#9a9a9a; border:0.1rem solid #9a9a9a; float:left; position:relative; z-index:3; } .request_select2 #pink .dd input { position:relative; opacity: 0; display: block; height: 100%; width: 100%; z-index:998; } .request_select2 #pink .dd span{ /* float:left; margin-top:-2.7rem; margin-left:1.4rem;*/ text-align:center; width:1.5rem; height:1.5rem; font-size:1.5rem; margin:auto; position:absolute; top:0; left:0; bottom:0; right:0; z-index:5; } .request_select2 .yy{ display:inline-table; width:4rem; height:4rem; float:left; } .request_btn{ display:block; width:98%; height:2.5rem; background:#4caf50; margin:0 auto; border-radius:0.2rem; margin-top:1rem; color:#fff; } .hidden{ display:none; } .show{ display:inline-block; } #dd{ float:right;height:2rem;width:20%;background:#fff;text-align:right;padding-right:0.5rem; } #over{ float:right;height:2rem;width:20%;background:#ff586e;;color:#fff;text-align:center; } .cel{ display:none;z-index:988;height:4rem;width:4rem;background: rgba(14, 14, 14, 0.85);margin:0;padding:0;line-height:4rem;text-align:center;color: #fff;position:relative;top:0; } .cel1{ display:block;z-index:988;height:4rem;width:4rem;background: rgba(14, 14, 14, 0.85);margin:0;padding:0;line-height:4rem;text-align:center;color: #fff;position:relative;top:0; } .ch{ display:inline-block;transform:rotate(45deg);font-size:1.4rem;/*;height:1.4rem;line-height: 1.4rem;width:1.4rem;background:red;*/margin:auto;position:absolute;top:0;left:0;bottom: 0;right:0;text-align: center;border-radius: 50%;padding-left:-0.5rem; } .ci{ margin-right:0.5rem;z-index:888;float:left; }

js代码：

mui.previewImage();

document.getElementById("dd").οnclick=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+";
        obj.parentNode.parentNode.appendChild(para);
        var para2=document.createElement("div");
        para2.className="yy";
        para2.innerHTML=" 
+

"; 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; }