FormData多图片上传

<!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='
+dataURL+'" alt="" class="img">
'
; //直接传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>

你可能感兴趣的:(js,js)