FormData多图片上传_formdata传多张图片-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_33414202/article/details/105390275
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/jquery.js"></script>
    <style>
        .content{
            display:flex;
            flex-wrap: wrap;
            margin-top:10px;
        }
        .uploadIcon,.imgItem{
            width:100px;
            height:100px;
            margin:0 15px;
            margin-bottom:15px;
            background: #F8F8F8;
            border-radius: 4px;
            position:relative;
        }
         .imgItem .img{
            height:100%;
            max-width: 100%;
            display:block;
            margin:0 auto;
        }
         .imgItem .del{
            position: absolute;
            top: 0;
            right: 0;
            width: 20px;
            transform: translate(50%, -30%);
        }
        .uploadIcon input{
            opacity: 0;
            width:100%;
            height:100%;
            position:absolute;
            top:0;
            left:0;
            z-index:10;
        }
        .uploadIcon img{
            height:40px;
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            z-index:9;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="uploadIcon">
            <input type="file" id="uploadImg" accept="" capture="camera" accept=".png,.jpg,.jpeg" multiple="multiple">
            <img src="images/addCase_upload.png" alt="">
        </div>
    </div>
    <button onclick="submitData()">提交</button>
</body>
<script>
    var filesList=[];  //文件
    //点击上传
    $('#uploadImg').change(function(e){
            var files=e.target.files;
            filesList=files;
            for(var i=0;i<files.length;i++){
                var reader = new FileReader();
            　　reader.readAsDataURL(files[i]);
                reader.onloadend = function (e) {
                    var dataURL = e.target.result;
                    var html='<div class="imgItem"><img src="'+dataURL+'" alt="" class="img"><img src="images/del.png" alt="" class="del" οnclick="delImg(this)"></div>'; 
                    //直接传this  可以在事件里得到这个元素 
                    $('.uploadIcon').before(html);
                }
            }
    }) 
    //删除图片
    function delImg(obj){
        var index=$(obj).parents('.imgItem').index();
        $(obj).parents('.imgItem').remove();
    }
    //提交信息
    function submitData(){
        var formData=new FormData();
        for(var i=0;i<filesList.length;i++){
            formData.append('img[]',filesList[i]);   //注意如果后台img是个数组,img需要带'[]',写成'img[]',否则后台接收不到
        }
        formData.append('name','小明'),
                    $.ajax({
                    type:'POST',
                    url:'http://admin.cialis.talkmed.com/api/case/add',
                    data:formData,
                    dataType:"json",
                    processData:false,//对data参数进行序列化处理
                    contentType:false,//内容编码类型
                    cache:false,//不使用缓存
                    success:function(res){
                        if(res.code==200){
                            console.log('成功');
                        }else{
                            console.log('失败');
                        }
                    }	
                })
    } 
</script>
</html>