移动端一次上传多个图片（动态创建file类型的input）

本文链接：https://blog.youkuaiyun.com/itlsq/article/details/80675368

本文介绍了一种在移动端实现多图一次性上传的技术方案。通过动态创建 type=file 的 input 控件并利用 FormData 进行整合提交，解决了移动端无法一次性选择多张图片的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

描述

最近在做公司的一个移动端上传图片的业务，如果这是在PC端，将非常的简单，因为给input设置属性multiple后PC端按住ctrl键就可以一次性选择多个图片，但是在移动端确不可以，移动端选择一张图片后会自动返回到APP中，想再添加一张的话还需要再次进入，所以体验不是很好，目前没找到合适的方法，只能暂时先这样了，我们今天的焦点是：如何一次性上传多张图片（注意：不是一次性选择多个图片）？
因为移动端无法一次性选择多个图片的缘故，用单个type=”file”的input也无法做到让服务器端接收到多个图片源，所以解决思路就是：动态创建type=”file”的input，每添加一张图片前，就创建一个type=”file”类，然后js控制立即触发，即可进入到手机的图片选择界面，多张图片添加完之后最后通过FormData将整个form表单（动态创建的type=”file”都在form中）一次性提交。

效果 ##

这里写图片描述

目录结构

这里写图片描述
目录结构很简单，就用了jquery,这个大家自己下载一个，为了让大家更多的将关注点放在技术功能上，在这里我简化了代码，去掉了bootstrap的样式，但功能是完整的，下面是代码

toUpload.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>文件上传</title>
    <style type="text/css">
        #images{min-height:7em;max-height:21em;text-align:left;overflow-y:auto}
        #images img{
            width: 7em;
            height: 7em;
            margin:0.5em;
        }
        .inputFiles{display:none;}
    </style>
</head>
<body>
<div class="content" >
    <div id="images"></div>
    <form id="uploadForm" enctype="multipart/form-data" method="post"  target="saveTo">
        <div class="inputFiles"></div>
    </form> 
    <div class="btn_submit">
        <button  type="button" class="btn btn-success btn_upImg" onClick="addinputFile()">选择图片</button> 
        <button  id="save"  type="button" class="btn btn-success" onClick="uploadFile()">提交</button>
    </div> 
</div>
<iframe name="saveTo" style="display: none"></iframe>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/toUpload.js"></script>
</body>
</html>

toUpload.js


//选择图片，马上预览  
    function xmTanUploadImg(obj) {  

        var fl=obj.files.length;  
        for(var i=0;i<fl;i++){  
            var file=obj.files[i];  
            var reader = new FileReader();  

            //读取文件过程方法  
            reader.onload = function (e) {  
                var imgstr='<img  src="'+e.target.result+'"/>';  
                var oimgbox=$("#images");  
                oimgbox.append(imgstr);  

            }  

            reader.readAsDataURL(file);   
        }  

    }  
    // 提交 
    function uploadFile() {
        //看最后一个file类型的input是否有文件，没有则移除
        if($("input[type='file']:last").prop('files')){
            if($(":file").prop('files').length==0){
                $("input[type='file']:last").remove();
                if($("input[type='file']").length==0){
                    alert("请选择图片");
                }
            }

            var form = new FormData($("#uploadForm")[0]);
            $.ajax({
                type:"post",
                url:url,//根据自己项目的需要写请求地址
                data:form,
                processData:false,
                contentType:false,
                success:function(msg){
                    console.log(msg);
                },
                error:function(e){
                    console.log(e.responseText);
                }
            })
        }else{
            alert("请选择图片");
            }
    }  
//新增type="file"
function addinputFile(){
    //检查最后一个type="file"有没有选择图片，没有则去使用，不再建新的
    var lastObj=$("input[type='file']:last");
    if(lastObj.prop('files')){
        if(lastObj.prop('files').length==0){
            lastObj.click();
        }else{
            $(".inputFiles").append("<input type='file' name='fileAttach'  multiple='multiple' accept='image/*' onChange='xmTanUploadImg(this);' />");
            $("input[type='file']:last").click();  
            }
    }else{
        //第一个
        $(".inputFiles").append("<input type='file' name='fileAttach'  multiple='multiple' accept='image/*' onChange='xmTanUploadImg(this);' />");
        $("input[type='file']:last").click();
        }
}