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

本文介绍了一种在移动端实现多图一次性上传的技术方案。通过动态创建 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();
        }
}
评论 24
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值