手机移动端开发多文件上传+页面回显，到后台如何接参数

最新推荐文章于 2024-09-19 11:13:39 发布

南瓜匠

最新推荐文章于 2024-09-19 11:13:39 发布

阅读量2.7k

点赞数 2

分类专栏：手机端页面文章标签：手机端H5上传多个文件+页面回显

本文链接：https://blog.csdn.net/qq_40387112/article/details/90201796

版权

手机端页面专栏收录该内容

1 篇文章 1 订阅

订阅专栏

手机移动端开发多文件上传+页面回显
第一次写不太熟练需要的看不懂的可以下面问我

思路

[ 公司有一个多文件上传需求，百度了好久都不适用，自己搞了一个，首先说下我的思路：]
1、使用input file标签上传文件加img图片回显，首先点击上传按钮选择文件，然后多文件进行处理，在img src后面跟上处理后的base64文件流，图片回显成功，然后把文件放进全局的var arr数组里面，然后把arr数组放进formdata中传到后台。
2、注意点：文件上传我的理解能治用form表单提交，所以使用了new formdata(此处有坑，因为formdata默认的事调用toString()方法，所以此处需要把文件数组循环放入formdate中)
3、对了还有一点提交post请求的时候我这面必须设置一个 headers:{
‘Content-Type’:‘multipart/form-data’ //hearder 很重要，Content-Type 要写对
},详见下面代码
4、此篇文章只是针对前端提交异步请求到后端的流程代码(前端引用发送请求的js和路由js需要你们根据自己项目中的去修改)，具体业务需要自己添加
5、使用的时候看下代码 F12调试下具体图片可以让你们UI切一个给你们引进来就可以了

直接上代码（前端代码）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>上传文件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="../../../js/jquery3.3.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../../css/upload.css">
    <script type="text/javascript" src="../../../js/ajaxfileupload.js"></script>
    <script type="text/javascript" src="../../../js/upload.js"></script>
    <script src="../../../js/address.js"></script>
    <script src="../../../js/mui.min.js "></script>
    <script src="../../../js/mui.view.js "></script>
    <!--<script src='../../js/feedback.js'></script>-->
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../../../js/moment.js"></script>
    <link rel="stylesheet" href="../../../vuejs/vant.css">
    <script src="../../../vuejs/vue.min.js"></script>
    <script src="../../../vuejs/vant.min.js"></script>
    <script src="../../../vuejs/bscroll.min.js"></script>
    <script src="../../../vuejs/axios.min.js"></script>
    <script src="../../../js/address.js"></script>
    <script src="../../../js/qs.js"></script>
    <script src="../../../js/jquery3.3.1.min.js"></script>
    <script type="text/javascript" src="../../../js/getUrlParam.js"></script>
    <style>
        html{
            background: #fff;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="content bg1">
        <div class="inter_box">
            <div class="inter_d1_load">
                <div class="inter_d1_load_title">
                    <span>图片</span>
                    <input type="hidden" id="pic_urls" />
                    <input type="hidden" id="pic_num" value="0"/>
                    <input type="hidden" id="is_upload" value="1"/>
                    <a href="javascript:void(0)" class="load_icon" id="load_icon" onclick="saveImg();">上传</a>
                </div>
                <div class="inter_d1_load_box clearfix">
                    <div id="imgdiv">
                    </div>
                    <div class="inter_d1_loadimg" id="remind1">
                        <img src="upload.png" id="1"/>
                        <!-- 注：file input 表单必须填写name属性，否则后台获取$_FILES会为null -->
                        <input type="file" class="imgfile" name="file" id="files1" onchange="uploadImg(this);" accept="image/*" multiple="multiple" />
                    </div>
                    <div class="inter_d1_loadimg" id="remind2">
                        <img src="upload.png" id="2"/>
                        <!-- 注：file input 表单必须填写name属性，否则后台获取$_FILES会为null -->
                        <input type="file" class="imgfile" name="file" id="files2" onchange="uploadImg(this);" accept="image/*" multiple="multiple" />
                    </div>
                    <div class="inter_d1_loadimg" id="remind3">
                        <img src="upload.png" id="3"/>
                        <!-- 注：file input 表单必须填写name属性，否则后台获取$_FILES会为null -->
                        <input type="file" class="imgfile" name="file" id="files3" onchange="uploadImg(this);" accept="image/*" multiple="multiple" />
                    </div>
                    <div class="inter_d1_loadimg" id="remind4">
                        <img src="upload.png" id="4"/>
                        <!-- 注：file input 表单必须填写name属性，否则后台获取$_FILES会为null -->
                        <input type="file" class="imgfile" name="file" id="files4" onchange="uploadImg(this);" accept="image/*" multiple="multiple" />
                    </div>
                    <div class="inter_d1_loadimg" id="remind5">
                        <img src="upload.png" id="5"/>
                        <!-- 注：file input 表单必须填写name属性，否则后台获取$_FILES会为null -->
                        <input type="file" class="imgfile" name="file" id="files5" onchange="uploadImg(this);" accept="image/*" multiple="multiple" />
                    </div>
                    <div class="loading_box" id="loading_box">
                        <div class="pop_cover"></div>
                        <img class="wid30" src="img/load.gif" />正在上传...
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<div class="pop_txt_box2" id="msg">success</div>
<script src="../../../vuejs/axios.min.js"></script>
<script>
    var arr = new Array();//用来存放文件的数组
    function saveImg() {
        var fd = new FormData();
        for(var i =0;i<arr.length;i++){
            fd.append('file', arr[i]);
        }
        axios.post(url + 'upload/upload',fd, {}, {
            headers:{
                'Content-Type':'multipart/form-data'   //hearder 很重要，Content-Type 要写对
            },
            withCredentials: true,
            changeOrigin: true
        }).then((response) => {

        }).catch(function (error) {
            mui.alert(error)
        });
    }
    function uploadImg(evn) {
        var name = event.target.files[0].name;//获取上传的文件名
        var divObj= $(evn).prev()  //获取div的DOM对象
        //  $(divObj).html(name) //插入文件名
        var id = $(evn).attr('id');//获取id
        var num = id.substr(5,1)
        var file = event.target.files[0];
        if (window.FileReader) {
            var reader = new FileReader();
            reader.readAsDataURL(file);
            //监听文件读取结束后事件
            reader.onloadend = function (e) {
                $("#"+num).prop("src",e.target.result);    //e.target.result就是最后的路径地址
            };
            console.log(arr);
        }
        arr[num-1] =file ;
    }
</script>
</body>
</html>

upload.css(控制页面样式的)

@charset "utf-8";
/* CSS Document */

body{ font:12px/24px "Microsoft YaHei","微软雅黑"; color:#666; background-color:#dcdddd; word-wrap:break-word;max-width: 750px;margin: 0 auto;}
*{ margin:0; padding:0; -webkit-tap-highlight-color:rgba(0,0,0,0);    -webkit-overflow-scrolling: touch;}
ul,ol,li{ list-style:none outside;}
.nowrap{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
a{ color:#666; text-decoration:none;}
a:hover{ text-decoration:none;}
.left{ float:left;}
.right{ float:right;}
.center{ text-align:center;}
.tx_l{ text-align:left;}
.tx_r{ text-align:right;}
.tx_2{ text-indent:2em;}
.bold{ font-weight:bold;}
img{ border:medium none; vertical-align:middle;}
textarea{ resize:none; vertical-align:middle;}
input,button,select,textarea{ -webkit-appearance:none; border:medium none; background:none; outline:none; font:1em/normal "Microsoft YaHei","微软雅黑";}
.btn{ cursor:pointer;}
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after { display: table; line-height: 0; content: ""; }
.clearfix:after { clear: both;}

.align_right{text-align: right;}

html,body{font-size: 62.5%;}
html, body {width: 100%;height: 100%;overflow: hidden;}
.wrapper{width: 100%;height: 100%;display: -webkit-flex;flex-direction: column;overflow:hidden;}
.content{width: 100%;height: auto;-webkit-flex:1;flex: 1;box-sizing: border-box;overflow-y:scroll;}

.bg1{background: #dcdddd url(../images/bg1.jpg) no-repeat bottom center;-webkit-background-size:100% 100%;}
.inter_box{width: 90%;margin: 0 auto; padding-top: 150px;}
.inter_d1_load_title{padding: 10px 0 6px 0;display: -webkit-flex;justify-content: space-between;font-size: 1.3rem;line-height: 20px;color: #3e8b34;}
.inter_d1_load_title a{color: #3e8b34;}
.inter_d1_load_title .load_icon{background: url(../images/load_icon.png) no-repeat left center;-webkit-background-size:18px 16px;padding-left: 19px;}
.inter_d1_load_box{width: 100%;border: 1px solid #408c34;border-radius: 8px;padding: 6px 2% 0;box-sizing: border-box;}
.inter_d1_loadimg{width: 31%;float: left;margin: 0 1% 5px;position: relative;}
.inter_d1_loadimg img{width: 100%;height: 64px;}
.inter_d1_loadimg  img.load_close{width: 10px;height: 10px;position: absolute;top: 0;right: 0;}
/*input file*/
.imgfile{position: absolute; top: 0; left: 0; width: 100%; height: 64px; z-index: 1; opacity: 0;}
/*load box*/
.loading_box {font-size:16px; line-height:35px; color:#3e3a39; height:40px; text-align:center; padding:30px 0;margin-top:2px;position: absolute;top:40%;left:35%;display:none;}
.pop_cover{width: 100%; height: 100%; background: rgba(0,0,0,0.2); position: fixed; top: 0; left: 0;}
.wid30 { width:35px; height:35px; vertical-align:middle; margin-right:8px;z-index:999;}

后端代码

 @PostMapping("/upload")
    public ResponseData uploadFile(@RequestParam(value="file",required=false) MultipartFile[] file) {
        Map<String, Object> map = new HashMap<String, Object>();
        //此处是我们项目中写的上传到图片服务器的工具类(你们使用的话 要根据自己需求来写)
        String[] picStrings = FastDFSClientUtils.upload(file);
        map.put("url",picStrings);
        
        return ResponseData.ok(map);
    }