效果:
基本操作:
(1)上传:
点击图标上传预览;
(2)删除:
点击右上角编辑;
然后选择要删除的图片;
难点:
一个文件域只能上传一张图片,input标签d的multiple=“multiple”属性在ios端中可以实现图片的多张选择(是否能多张传没有测试,但在本代码中单次也是能预览单张),但是安卓端中multiple无效(安卓手机调出新手机相册后点击图片直接上传),
html代码:
<form action="#" method="post" enctype="multipart/form-data">
<button type="submit" class="request_btn" style="width:98%">提交</button></form><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/*" οnchange="cnm(this)"><span>+</span></div> <!–按钮–> </div> </div> </div>
css代码:
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<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").οnclick=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/*' οnchange='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' οnclick='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; }