移动端图片上传预览

最新推荐文章于 2025-05-23 12:56:45 发布

elichan

最新推荐文章于 2025-05-23 12:56:45 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：移动端

本文链接：https://blog.youkuaiyun.com/elichan/article/details/78226251

移动端专栏收录该内容

2 篇文章

订阅专栏

效果：

基本操作：

（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代码：

*{
    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").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;
}