多文件上传前端

最新推荐文章于 2024-08-23 11:53:54 发布
最新推荐文章于 2024-08-23 11:53:54 发布
阅读量4.2k 收藏 24
点赞数 12
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41471077/article/details/84336116
版权


 <!--系统主页-->
<!DOCTYPE html>
<!--HTML标签的lang属性：用于指定网页的自然语言-->
<html lang="zh-cn" ng-app="papp" ng-controller="pCtrl">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        
        <!--css文件引入--start-->
        <link href="css/bootstrap.css" rel="stylesheet" />                
        <link href="css/simple-line-icons.css" rel="stylesheet" />
        <link href="css/font-awesome.min.css" rel="stylesheet" />
        <!--css文件引入--end-->
        
        <!--自定义css文件引入--start-->
        <link href="css/custom/synwork.css" rel="stylesheet" />
        <link href="css/custom/app.css" rel="stylesheet" />
        <!--自定义css文件引入--end-->
            
        <!--js文件引入--start-->
        <script src="js/default/angular1.5.min.js" type="text/javascript"></script>
        <script src="js/default/jquery.min.js" type="text/javascript"></script>
        <script src="js/default/jquery.autocompleter.js" type="text/javascript"></script>    
        
        <script src="js/default/bootstrap.js" type="text/javascript"></script>
        <script src="js/layer/layer.js"></script>
        <!--js文件引入--end-->
        
       

    <body>        
            
        <div>
            <!--文件上传--start-->
            <div class="form-group row">
                <label class="col-lg-1 control-label">照&nbsp; &nbsp;片:</label>
                <div class="col-lg-1">
                    <a href='javascript:void(0);' class="file">添加附件
                        <input type="file" class="file" multiple="multiple" name="files" id="fileInput" οnchange='angular.element(this).scope().fileChanged(this)'>
                    </a>                    
                </div>
                
                <div class="col-lg-1">
                    <a href="javascript:;" class="file" ng-click="qinkong()">取消附件</a>
                </div>
                
            </div>
            <!--文件上传--end-->
            
            
            <br>
            <!--显示文件名--start-->
            <div class="form-group row">
                <label class="col-lg-1 control-label">文件名:</label>
                <div class="col-lg-4">
                    <table>
                        <tr ng-repeat="it in names" style="height: 10px;">
                            <td>{{it.name}}</td>            
                              <td>&nbsp;&nbsp;<a ng-click="delFile(it,$index)"><i class="fa fa-window-close"></i></a></td>
                        </tr>
                    </table>
                </div>
            </div>    
            <!--显示文件名--end-->
            
            <div class="form-group row">
                <label class="col-lg-1 control-label">视&nbsp; &nbsp;频:</label>
                <div class="col-lg-1">
                    <a href='javascript:void(0);' class="file">添加附件
                        <input type="file" class="file" multiple="multiple" name="files2" id="fileInput" οnchange='angular.element(this).scope().fileChanged2(this)'>
                    </a>                    
                </div>
                <div class="col-lg-1">
                    <a href="javascript:;" class="file" ng-click="qinkong2()">取消附件</a>
                </div>
                
            </div>
            
            <div class="form-group row">
                <label class="col-lg-1 control-label">文件名:</label>
                <div class="col-lg-4">
                    <table>
                        <tr ng-repeat="it in names2" style="height: 10px;">
                            <td>{{it.name}}</td>            
                              <td>&nbsp;&nbsp;<a ng-click="delFile2(it,$index)"><i class="fa fa-window-close"></i></a></td>
                        </tr>
                    </table>
                </div>
            </div>    
            
        </div>
        
        <a class="btn btn-success" ng-click="add()">上传</a>
        
        
    </body>
    <script>
        var app = angular.module('papp', []);
        app.controller('pCtrl',function($scope, $http, $rootScope, $window) {
            
            //定义空数组，存放要上传的文件名
            $scope.names = new Array();
            $scope.names2 = new Array();
            
            //定义空数组，存放要上传的文件
            var fd = new FormData();
            
            //定义空数组，存放要上传的文件，作为间接变量
            var fd1=new FormData();            
            var fd2=new FormData();
            
            //文件数量
            $scope.amount=0;
            $scope.amount2=0;
            
            //文件key值，文件名id
            $scope.index=0;
            $scope.index2=0;
            
            /*
             * 添加附件--start
             */
            $scope.fileChanged = function(ele){   
                //获取选择的所有文件
                var files = document.querySelector('input[name="files"]').files;
                for (var i=0; i<files.length; i++) {
                    //追加文件
                    fd1.append($scope.index, files[i]);    
                    //追加文件名
                    $scope.names.push({id:$scope.index, name: files[i].name});
                    //文件数量加1
                    $scope.amount=$scope.amount+1;
                    //key值加1
                    $scope.index=$scope.index+1
                  }  
                //传播model变化
                $scope.$apply(); 
            }
            $scope.fileChanged2 = function(ele){   
                //获取选择的所有文件
                var files2 = document.querySelector('input[name="files2"]').files;
                for (var i=0; i<files2.length; i++) {
                    //追加文件
                    fd2.append($scope.index2, files2[i]);    
                    //console.log(fd.get('0'))
                    //追加文件名
                    $scope.names2.push({id:$scope.index2, name: files2[i].name});
                    //文件数量加1
                    $scope.amount2=$scope.amount+1;
                    //key值加1
                    $scope.index2=$scope.index+1
                  }  
                //传播model变化
                $scope.$apply(); 
            }
            /*添加附件--end*/
            
        /*
         * 删除单个附件--start
         * 参数index：文件名索引
         * 参数t:文件名对象
         */
        $scope.delFile = function(t,index){             
            //删除当前文件
            fd1.delete(t.id);            
            //删除当前文件名
            $scope.names.splice(index,1);
            //文件数量减1
            $scope.amount=$scope.amount-1;                        
        }
        $scope.delFile2 = function(t,index){             
            //删除当前文件
            fd2.delete(t.id);            
            //删除当前文件名
            $scope.names2.splice(index,1);
            //文件数量减1
            $scope.amount2=$scope.amount-1;                        
        }
        /*删除单个附件--end*/
            
        /*
         * 添加函数--start
         * 上传数据，传入后台
         */
        $scope.add = function(){    
            
            //遍历取出剩下的未删除的文件，添加到fd
            for(var i=0;i<$scope.names.length;i++){
                $scope.id=$scope.names[i].id;
                fd.append('files',fd1.get($scope.id));
                console.log(fd.get('files'))
            }
            for(var i=0;i<$scope.names2.length;i++){
                $scope.id=$scope.names2[i].id;
                fd.append('files2',fd2.get($scope.id));
                console.log(fd.get('files2'))
            }                        
            
            //往后台传递添加的数据
            $http({
                method:'POST',
                url  : 'http://192.168.100.121:8080/asset/addRepository',
                data: fd,  //文件
                headers: {'Content-Type':undefined},
                transformRequest: angular.identity
            }).success(function (response) {
                //上传成功，提示信息，然后跳转到record.html页面
                layer.msg('上传成功', {
                    time: 1000, 
                    icon: 1
                });    
                fd = new FormData();

            }).error(function () {

                //上传失败，提示信息
                layer.msg('上传失败', {
                    time: 1000, 
                    icon: 2
                });    
               });
        };    
        /*添加函数--end*/
        
        /*
         * 清空文件--start
         */
        $scope.qinkong = function() {
                $scope.names=[];
                $scope.amount=0;
                fd1=new FormData();
                var file = document.getElementById("fileInput");
                if (file.outerHTML) {
                    file.outerHTML = file.outerHTML;
                } else {
                    file.value = "";
                    
                }
        };
        
        $scope.qinkong2 = function() {
                $scope.names2=[];
                $scope.amount2=0;
                fd2=new FormData();
                var file = document.getElementById("fileInput");
                if (file.outerHTML) {
                    file.outerHTML = file.outerHTML;
                } else {
                    file.value = "";
                    
                }
        };
        /*清空文件--end*/
    });
    </script>
</html>

qq_41471077
关注
文件上传前端前端html
07-24
文件上传前端前端html
前端如何实现FormData多文件上传功能并且传入参数
weixin_49250653的博客
12-02 3176
前端如何实现FormData多文件上传功能并且传入参数 <el-form-item label="图片上传（选填）" prop="people"> <div class="errorUpload"> <el-upload action="#" v-
前端多文件 ajax上传 + 后端JAVA接收 + 传递参数 实测有效
漫漫长夜，为代码作伴。
03-27 2462
<input type="file" name="files" id="files" multiple="multiple"/> <button type="button" class="layui-btn" id="testListAction"> <i class="fas fa-upload"></i>开始上传 </button&gt...
Vue3 + Element Plus 手动批量上传文件组件详解
最新发布
前端学步
08-23 910
通过以上步骤，我们实现了基于Vue3和Element Plus的手动批量文件上传组件。该组件支持批量选择.xls和.xlsx文件，并在用户确认后手动上传这些文件。你可以根据自己的需求进一步扩展此组件的功能，例如添加文件预览、上传进度条等功能。
SPRINGBOOT+VUE实现多文件上传
alisky119的博客
04-09 477
操作系统比较多，终端系统不统一，研发部门的同事用Windows,macOS多一些，后端运维同事用Linux多一些，主要就是centos和ubuntu，客户那边政府部门用信创国产化的多一些，有中标麒麟，银河麒麟，统信UOS，龙芯，华为鲲鹏。我们主要是做政府项目，客户也都是政府单位的，对用户体验要求比较高，要让他们感觉用的方便，对稳定性要求比较高，基本上一年365天都不希望你出问题，对安全性要求也比较高，涉密了，信创国产化，不能连外网的，都是内网。合作过程中也可能出现新的需求，或者二次开发，或者定制开发需求。
element 表单多文件上传及其一些处理，前后端
m0_73419038的博客
03-19 2114
我需要做一个表单上传多文件，语言是typescript+vue+element+springboot首先你要先明白，使用element组件进行多文件上传得需要一个FormData，将文件得二进制添加到FormData中详细的视频请看【【前后端的那些事】文件上传】 https://www.bilibili.com/video/BV1m1421Z7ER/?佬的评论区会有一些写的博客，可以看看。
一次理清前端文件上传操作（单个，多个，大文件切片）
Moonlightboi的博客
04-06 3340
相信大家在工作中也会遇到前端文件上传的需求，虽然已经在项目中使用FormData和elementUI中upload组件都实现过类似上传效果，但自己对这块一直一知半解，因此做一个笔记梳理一下前端方面的文件上传操作，以供日常参考。
使用layui实现多文件列表上传
12-28
在“使用layui实现多文件列表上传”这个项目中，主要涉及到了layui的文件上传功能，这在网页应用中是非常常见且实用的功能，尤其对于需要用户提交多份文件的场景。 首先，layui的文件上传组件是基于HTML5的File API...
ko.tar.gz_文件上传前端
09-24
总的来说，这个项目涵盖了前端开发中的多个关键知识点，包括文件上传技术、前端框架的应用、Linux环境下的服务部署、以及Web服务器的配置管理。通过研究和实践这个项目，开发者可以深入理解前端文件上传的实现细节，...
前端实现大文件的上传操作
03-14
在前端开发中，大文件上传是一项常见的需求，尤其在处理如视频、图像或者大型文档等大量数据时。本文将深入探讨如何在前端实现大文件的上传操作，包括关键技术和最佳实践。 1. 分块上传（Chunked Upload）： 大...
php jquery 多文件上传简单实例
10-26
在给定的文件内容中，我们看到一个简单的多文件上传实例的前端代码部分，使用了jQuery插件来实现上传功能。这个插件的设置选项包括上传的URL地址、使用的方法类型（POST方法）、允许上传的文件类型（如jpg、png、gif...
前端使用FormData上传多个文件
qq_39409541的博客
03-02 4585
FormData构造函数使用方式
上传多个文件的前端代码
weixin_35756892的博客
12-20 511
如果要使用前端代码来上传多个文件，可以使用 HTML 的 <input type="file" multiple> 标签，该标签会创建一个文件选择器，用户可以通过它选择多个文件。 你可以使用 JavaScript 来访问选择的文件，使用 FileReader 对象来读取文件内容，然后使用 XMLHttpRequest 或者 fetch 函数来将文件发送到服务器。 下面是一个示例代码，它...
web前端文件上传可选择的4种方式
热门推荐
jimojianghu的专栏
11-23 1万+
本文总结了前端web当前能够添加读取文件的4种方式，如果我们需要开发一个比较完善的图片上传组件，那么可能需要点击、拖拽、粘贴多种功能，这就需要使用到前三种文件读取方式。文件系统访问API鉴于兼容性还有待提升，我们可以作为后备的方案使用。有了文件读取的方式，那我们要完成上传功能，就可以使用HTML表单提交，或者FormData对象上传了。
前端文件的上传与下载
u014562688的博客
11-14 3508
最近发现很多人对文件上传下载不太理解，从网上百度来的代码也经常出错，遂对前端文件上传与下载作简单总结。
功能：多文件上传，统一提交
snowball的博客
06-07 3140
一、需求：前端实现多文件上传，统一提交上传后服务器返回来的数据，最后一个文件上传完成后立即提交保存，不能间隔时间。二、思路分析：2.1、点击上传-->调用file方法-->调用upload方法，我们定义两个变量flagA和flagB，分别记录两个方法执行的次数，每次执行+=1，file先执行，upload后执行，所以upload方法结束后我们我们比较flagA和flagB的值，如果flagA大于flagB说明还有文件要上传，如果flagA等于flagB说明已经是最后一个文件了。这个时机就是我们调用保存的时机
前端文件上传，这8种场景
大灰狼的小绵羊哥哥的博客
02-25 1万+
在日常工作中，文件上传是一个很常见的功能。在项目开发过程中，我们通常都会使用一些成熟的上传组件来实现对应的功能。一般来说，成熟的上传组件不仅会提供漂亮 UI 或好的交互体验，而且还会提供多种不同的上传方式，以满足不同的场景需求。 一般在我们工作中，主要会涉及到 8 种文件上传的场景，每一种场景背后都使用不同的技术，其中也有很多细节需要我们额外注意。今天阿宝哥就来带大家总结一下这 8 种场景，让大家能更好地理解成熟上传组件所提供的功能。阅读本文后，你将会了解以下的内容： 单文件上传：利用 inpu
【前端】-【前端文件操作与文件上传】-【前端接受后端传输文件指南】
CaraYQ的博客
05-05 6014
/ 进度条可以用axios的onUploadProgress方法，且发送切片时可以并行发送请求，后续可以自行优化。// 将切割后的Blob对象转成File对象（第二个参数是文件名），之后就可以上传切割后的File对象。// multiple的多文件上传其实很不友好，需要用户在选择文件时按住ctrl多选，否则就会变成单选。// 直接将转换结果赋值给img的src，设置src的大小即可获得浓缩图。//切片上传，在上传的时候进行切片，文件改变时只赋值。// 使用blob的slice方法可以切割文件。
前端文件上传
qq_43853213的博客
03-27 1023
files: 通过input 标签读取过来的文件对象，是blob的子类。多用于把文件读取为某种形式，如base64 ， text文本。不可变的二进制内容，包含很多操作方法。files 对象转blob 对象。blob 对象转 files对象。formData 传输。转为base64传输。
多文件上传 前端 后端 详解
05-13
多文件上传指的是一次上传多个文件，而不是一次只上传一个文件。下面我会分别介绍前端和后端的实现方式。 前端实现： 前端通常使用HTML中的`<input type="file" multiple>`元素来实现多文件上传功能，其中`multiple`属性表示允许选择多个文件。用户选择文件后，前端会将文件信息存储在FormData对象中，然后通过ajax请求将FormData对象发送到后端。 示例代码： ```html <form id="file-form"> <input type="file" id="file-input" multiple> <button type="submit">上传文件</button> </form> <script> const form = document.getElementById('file-form'); const fileInput = document.getElementById('file-input'); form.addEventListener('submit', (e) => { e.preventDefault(); const formData = new FormData(); for (let i = 0; i < fileInput.files.length; i++) { formData.append('files', fileInput.files[i]); } fetch('/upload', { method: 'POST', body: formData }) .then(response => { console.log(response); }) .catch(error => { console.error(error); }); }); </script> ``` 后端实现： 后端通常使用框架提供的文件上传中间件来处理文件上传，例如Node.js中的`multer`中间件。后端接收到前端发送的FormData对象后，通过中间件解析出文件信息，然后将文件保存到指定目录。 示例代码（使用Express框架和multer中间件）： ```javascript const express = require('express'); const multer = require('multer'); const app = express(); const upload = multer({ dest: 'uploads/' }); app.post('/upload', upload.array('files'), (req, res) => { console.log(req.files); res.send('上传成功'); }); app.listen(3000, () => { console.log('服务已启动'); }); ``` 在上面的示例中，`multer`中间件的`upload.array('files')`表示接收名为`files`的文件数组。在处理上传成功后，后端会返回一个响应，告诉前端上传成功。 需要注意的是，在上传大文件时，为了避免内存溢出，通常需要对文件进行分片上传和断点续传等优化处理。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值