js 移动端 多图上传 预览 删除 base64转为url 传给后端

说下主要的逻辑，首先是利用input type="file"，上传文件，然后判断文件类型是否是图片，这里要注意（multiple，安卓一次一张，ios可以多张）。

接着把本地图片转为base64发给后端，后端返回url，我们把它保存在数组里面，最后发给后端的是一个数组（里面放url）。删除操作也是一样，把数组里面对应的删掉就可以啦。

css：

　　 * {margin: 0;padding: 0;}
    /*图片上传*/
    html,body {width: 100%;height: 100%;}
    .container {width: 100%;height: 100%;overflow: auto;clear: both;}
    .z_photo {width: 5rem;height: 5rem;padding: 0.3rem;overflow: auto;clear: both;margin: 1rem auto;border: 1px solid #555;}
    .z_photo img {width: 1rem;height: 1rem;}
    .z_addImg {float: left;margin-right: 0.2rem;}
    .z_file {width: 1rem;height: 1rem;background: url(z_add.png) no-repeat;background-size: 100% 100%;float: left;margin-right: 0.2rem;}
    .z_file input::-webkit-file-upload-button {width: 1rem;height: 1rem;border: none;position: absolute;outline: 0;opacity: 0;}
    .z_file input#file {display: block;width: auto;border: 0;vertical-align: middle;}
    /*遮罩层*/
    .z_mask {width: 100%;height: 100%;background: rgba(0, 0, 0, .5);position: fixed;top: 0;left: 0;z-index: 999;display: none;}
    .z_alert {width: 3rem;height: 2rem;border-radius: .2rem;background: #fff;font-size: .24rem;text-align: center;position: absolute;left: 50%;top: 50%;margin-left: -1.5rem;margin-top: -2rem;}
    .z_alert p:nth-child(1) {line-height: 1.5rem;}
    .z_alert p:nth-child(2) span {display: inline-block;width: 49%;height: .5rem;line-height: .5rem;float: left;border-top: 1px solid #ddd;}
    .z_cancel {border-right: 1px solid #ddd;}

html：

class="container">
    
    
class="z_photo">
        
class="z_file">
            "file" name="file" id="file" value="" accept="image/*" multiple οnchange="imgChange('z_photo','z_file');" />
        
    
    
    
class="z_mask">
        
        
class="z_alert">
            
确定要删除这张图片吗？
            

                class="z_cancel">取消
                class="z_sure">确定
            
        
    

js：

 

转载于:https://www.cnblogs.com/cczlovexw/p/7794540.html