图片上传，可删除，多图片上传

Posted 2021-03-07 liubingyjui

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片上传，可删除，多图片上传相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../../public/js/jquery.min.js"></script>
    <style>
        .btn {
            border-radius: 0px;
            font-weight: 100;
            cursor: pointer;
            display: inline-block;
            padding: 5px;
            font-size: 14px;
            font-family: ‘微软雅黑‘
        }
        .btn-primary {
            color: #fff;
            text-shadow: 0 1px rgba(0,0,0,.1);
            background-image: -webkit-linear-gradient(top,#4d90fe 0,#4787ed 100%);
            background-image: -o-linear-gradient(top,#4d90fe 0,#4787ed 100%);
            background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));
            background-image: linear-gradient(to bottom,#4d90fe 0,#4787ed 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#ff4d90fe‘, endColorstr=‘#ff4787ed‘, GradientType=0);
            filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
            background-repeat: repeat-x;
            border: 1px solid #3079ed;
        }
        .btn-success {
            color: #fff;
            text-shadow: 0 1px rgba(0,0,0,.1);
            background-image: -webkit-linear-gradient(top,#35aa47 0,#35aa47 100%);
            background-image: -o-linear-gradient(top,#35aa47 0,#35aa47 100%);
            background-image: -webkit-gradient(linear,left top,left bottom,from(#35aa47),to(#35aa47));
            background-image: linear-gradient(to bottom,#35aa47 0,#35aa47 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#ff35aa47‘, endColorstr=‘#ff35aa47‘, GradientType=0);
            filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
            background-repeat: repeat-x;
            border: 1px solid #359947;
        }
         .gallery .img-item{
              position: relative;
          }
          .gallery .img-item .delete{
              position: absolute;
              display: block;
              width: 20px;
              height:20px;
              color: #fff;
              background: rgba(0,0,0,0.7);
              line-height: 20px;
              text-align: center;
              border-radius: 50%;
              top: 25px;
              right: 25px;
              cursor: pointer;
          }
          .img{
            width: 300px;
            margin: 20px;
          }
    </style>
</head>
<body>
<div>
    <form action="" id="formdata">
        <div id="upload" class="btn btn-primary" >选择图片</div>
        <div class="btn btn-success" id="uploadImg">上传</div>
        <input id="file" type="file"  multiple=‘multiple‘  multiple style="display:none" >
        <div class="gallery" id="gallery"></div>
    </form>
</div>
<script>
    var files=[];
    var that = this;
    $("#upload").click(function(){
        $("#file").trigger("click");
    })


// function xmTanUploadImg(obj) {  
    $("#file").change(function(){
     
    //    var fl=obj.files.length; 
    //    console.log(fl) 
        // document.getElementById("gallery").innerHTML="";
        var img=document.getElementById("file").files; 

        var div=document.createElement("div");

        for(var i=0;i<img.length;i++){
            var file=img[i]; var url=URL.createObjectURL(file); 


            var box=document.createElement("img"); 
            var imgBox=document.createElement("div");
            var deleteIcon = document.createElement("span");
            box.setAttribute("src",url); 
            box.className=‘img‘;
            
            imgBox.style.display=‘inline-block‘;
            imgBox.className=‘img-item‘;
           
            deleteIcon.className = ‘delete‘;
            deleteIcon.innerText = ‘x‘;
            deleteIcon.dataset.filename = img[i].name;
           
            imgBox.appendChild(deleteIcon);
            imgBox.appendChild(box);
            document.getElementById("gallery").appendChild(imgBox);
            that.files = img;
            $(deleteIcon).click(function () {
                var filename = $(this).data("filename");
                $(this).parent().remove();
                var fileList = Array.from(that.files);

                for(var j=0;j<fileList.length;j++){
                    if(fileList[j].name = filename){
                        fileList.splice(j,1);
                        break;
                    }
                }
                that.files = fileList
            })
        }
    })
    $("#uploadImg").click(function(){
        var files = that.files;
        var uploadFile = new FormData($("#formdata")[0]);
        for(var i=0;i<files.length;i++){
            uploadFile.append(‘imgs[]‘,files[i]);
        }
        if("undefined" != typeof(uploadFile) && uploadFile != null && uploadFile != ""){
            $.ajax({
                url:‘index.php‘,
                type:‘POST‘,
                data:uploadFile,
                async: false,
                cache: false,
                contentType: false, //不设置内容类型
                processData: false, //不处理数据
                success:function(data){

                },
                error:function(){
                    alert("上传失败！");
                }
            })
        }else {

        }
    })


    </script>
</body>
</html>

技术图片

以上是关于图片上传，可删除，多图片上传的主要内容，如果未能解决你的问题，请参考以下文章

Vue结合element ui 实现图片上传可预览，可删除,以base64字符串上传到服务器

求js多张图片上传，可预览右上角带删除图标的代码

HTML5可预览多图片ajax上传(使用formData传递数据)

PHP仿微信多图片预览上传

基于HTML5的可预览多图片Ajax上传

图片上传 ，可删除 ，多图片上传

图片上传，可删除，多图片上传