Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >angularjs上传视频?

angularjs上传视频?

提问于 2019-03-27 10:30:01
回答 2关注 0查看 806

需要angularjs上传视频到服务器的样例

回答 2

用户4280978

提问者

发布于 2019-04-02 07:02:11

这个是把文件上传到腾讯的存储视频空间?

西风

发布于 2019-03-28 04:08:17

angular-file-upload插件实现

前台html代码:

代码语言:js
AI代码解释
复制
<div class="uploading form-group">
    <input class="form-control" ng-model="fileItem.name" readonly/>
    <a href="javascript:;" class="choose-book">
        <input type="file" name="certificate" nv-file-select accept="video/*" uploader="uploader" ng-click="clearItems()"  />
        <input type="file" name="certificate" nv-file-select accept="image/*" uploader="uploader" ng-click="clearItems()" />
    </a>
</div>

其中的accept是限制,这个是有一个ng-click事件,也就是说,点击添加文件后他自动上传。

代码语言:js
AI代码解释
复制
accept="application/msexcel"
 
accept="application/msword"
 
accept="application/pdf"
 
accept="application/poscript"
 
accept="application/rtf"
 
accept="application/x-zip-compressed"
 
accept="audio/basic"
 
accept="audio/x-aiff"
 
accept="audio/x-mpeg"
 
accept="audio/x-pn/realaudio"
 
accept="audio/x-waw"
 
accept="image/*"
 
accept="image/gif"
    
accept="image/jpeg"
 
accept="image/tiff"
 
accept="image/x-ms-bmp"
 
accept="image/x-photo-cd"
 
accept="image/x-png"
 
accept="image/x-portablebitmap"
 
accept="image/x-portable-greymap"
 
accept="image/x-portable-pixmap"
 
* accept="image/x-rgb"
 
* accept="text/html"
 
* accept="text/plain"
 
* accept="video/quicktime"
 
* accept="video/x-mpeg2"
 
* accept="video/x-msvideo"

后台引入js

代码语言:js
AI代码解释
复制
<script type="text/javascript" src="../lib/angular/angularFileUpload/angular-file-upload.min.js"></script>
<script type="text/javascript" src="../lib/angular/angularFileUpload/angular-file-upload.js"></script>

然后在app上加入

代码语言:js
AI代码解释
复制
var starter = angular.module('starter', ['ui.router' , "toastr", 'serviceList','filter','directiveList','angularFileUpload'])

之后在ctrl中

代码语言:js
AI代码解释
复制
starter.controller("XXXX", function ($rootScope, $scope,Apis,Util,$state,FileUploader) {

加入

代码语言:js
AI代码解释
复制
FileUploader

这样你就可以使用fileUoloader

代码语言:js
AI代码解释
复制
var uploader = $scope.uploader = new FileUploader({
    url:'上传的后台的路径  可以是PHP 也可以用java的后台处理',
    method: 'POST',
    queueLimit: 1,//文件个数
    autoUpload: true

});
uploader.headers['头']= 令牌; //头信息 令牌
$scope.clearItems = function(){    //重新选择文件时,清空队列,达到覆盖文件的效果
    uploader.clearQueue();
}
uploader.onAfterAddingFile = function(fileItem) {
    $scope.fileItem = fileItem._file;    //添加文件之后,把文件信息赋给scope
};
uploader.onSuccessItem = function(fileItem, response, status, headers) {
    $scope.uploadStatus = true;   //上传成功则把状态改为true
    alert(response.path);
};
$scope.UploadFile = function(){
    uploader.uploadAll();
    if(status){
            alert('上传成功!');
    }else{
            alert('上传失败!');
    }
}

后台java代码 两种方案

第一种 利用MultipartHttpServletRequest

代码语言:js
AI代码解释
复制
 /**
     * 文件上传
     * */
    @RequestMapping(value="/test", method = {RequestMethod.GET, RequestMethod.POST} )
    @ResponseBody
    public String ngUpload(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String path = "";
        CommonsMultipartResolver multipartResolver =
                new CommonsMultipartResolver(request.getSession().getServletContext());
        //先判断request中是否包涵multipart类型的数据,
        if(multipartResolver.isMultipart(request)){
            //再将request中的数据转化成multipart类型的数据
            MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
            Iterator iter = multiRequest.getFileNames();
            while(iter.hasNext()){
                //这里的name为fileItem的alias属性值,相当于form表单中name
                String name=(String)iter.next();
                System.out.println("name:"+name);
                //根据name值拿取文件
                MultipartFile file = multiRequest.getFile(name);
                if(file != null){
                    String fileName = file.getOriginalFilename();
                    path = "D:/test/" + fileName;
                    File localFile = new File(path);
                    if(!localFile.getParentFile().exists()) {
                        //如果目标文件所在的目录不存在,则创建父目录
                        localFile.getParentFile().mkdirs();
                    }
                    //写文件到本地
                    try {
                        file.transferTo(localFile);
                    } catch (IOException e) {
                        // TODO Auto-generated catch block
                        e.printStackTrace();
                        return path;
                    }
                }
            }
        }else {

            return path;
        }

        return path;

}

第二种 最常见 利用commons-fileupload

代码语言:js
AI代码解释
复制
import org.apache.commons.fileupload.FileItem;  
import org.apache.commons.fileupload.disk.DiskFileItemFactory;  
import org.apache.commons.fileupload.servlet.ServletFileUpload;  
  
public class EntityServlet1 extends HttpServlet {  
  
    private static final long serialVersionUID = 1L;  
    private String uploadPath = "D:\\temp"; // 上传文件的目录  
    File tempPathFile;  
  
    // 重写doPost方法,处理事件识别请求  
    protected void doPost(HttpServletRequest request,  
            HttpServletResponse response) throws ServletException, IOException {  
        try {  
            // Create a factory for disk-based file items  
            DiskFileItemFactory factory = new DiskFileItemFactory();  
  
            // Set factory constraints  
            factory.setSizeThreshold(4096); // 设置缓冲区大小,这里是4kb  
            factory.setRepository(tempPathFile);// 设置缓冲区目录  
  
            // Create a new file upload handler  
            ServletFileUpload upload = new ServletFileUpload(factory);  
  
            // Set overall request size constraint  
            upload.setSizeMax(4194304); // 设置最大文件尺寸,这里是4MB  
  
            List<FileItem> items = upload.parseRequest(request);// 得到所有的文件  
            Iterator<FileItem> i = items.iterator();  
            while (i.hasNext()) {  
                FileItem fi = (FileItem) i.next();  
                String fileName = fi.getName();  
                if (fileName != null) {  
                    File fullFile = new File(new String(fi.getName().getBytes(), "utf-8")); // 解决文件名乱码问题  
                    File savedFile = new File(uploadPath, fullFile.getName());  
                    fi.write(savedFile);  
                }  
            }  
            System.out.print("upload succeed");  
        } catch (Exception e) {  
  
        }  
    }  
}  

GitHub 地址 https://github.com/nervgh/angular-file-upload

和开发者交流更多问题细节吧,去 写回答
相关文章
【AngularJS】 # AngularJS入门
ng-app 指令定义一个 AngularJS 应用程序。 若不声明,将直接显示表达式。
全栈程序员站长
2022/09/15
23.9K0
【AngularJS】 # AngularJS入门
angularjs input上传图片前获取图片的Size
首先我们需要一个指令来追踪input的change。ngChage不适用input[file]。 app.directive("fileread", [function () { return
MJ.Zhou
2018/01/04
1.7K0
视频截图并上传
本文,我们来谈谈,我们对视频进行截图之后,预览没问题之后,进行上传,我们应该怎么做呢?
Jimmy_is_jimmy
2022/09/26
2K0
【AngularJS】—— 1 初识AngularJs
怀着激动与忐忑的心情,开始了学习AngularJS的旅程,很久之前就听说了这个前端框架,但是由于自己一直没有从事相关的工作,因此也没有进行学习。这次正好学习AngularJS,直接复习一下前端的知识。目前这里还是弱点,慢慢深入的学习。   AngularJS是Google的优秀的前端框架,目前已经应用于多个产品。   通过w3cschool.cc的学习,简单的了解了下它的使用方法,但是对于原理还没有理解。   AngularJs相对于其他的框架来说,有一下的特性:   1 MVVM   2 模块化
用户1154259
2018/01/17
2.9K0
UGSV短视频上传失败
移动直播 iOS 或者 Android 端 SDK,调用TXUGCPublish上传接口publishVideo返回失败,或者上传完成回调返回失败。
腾讯视频云-Zachary
2019/09/05
2.3K0
Instagram视频上传延迟优化
视频传输延迟,尤其是在某些互动社交环境中,会严重影响用户的体验。Instagram多年来以降低视频上传延迟为重要指标,实现了多种优化策略。本文来自Instagram媒体基础设施团队软件工程师Ryan Peterman。
LiveVideoStack
2019/07/01
2.5K0
Instagram视频上传延迟优化
【AngularJS】—— 2 初识AngularJs(续)
前一篇了解了AngularJS的一些简单的使用,这里继续跟着w3c学习一下剩下的内容。   本篇根据w3cschool.cc继续学习AngularJS剩余的内容,包括:   1 事件   2 模块   3 表单   4 数据验证   5 bootstrap CSS风格   6 include包含其他页面   7 应用程序   8 参考手册   首先看一下html的事件   关于html的事件,文中给出了三个例子,点击、隐藏、显示。使用方法基本相同:   先看一下点击的例子,点击按钮后,会触发ng-clic
用户1154259
2018/01/17
2.4K0
AngularJS
scope:单个controller的作用域。可以直接在某controller下的页面引用scope下的变量 rootScope:多个controller作用域的桥梁。可以直接在全局页面引用rootScope下的变量
城市中的游牧民族
2019/02/21
1.5K0
java视频上传与播放功能
参考:https://wenku.baidu.com/view/63fb1da364ce0508763231126edb6f1aff0071c7.html
全栈程序员站长
2022/09/08
3.1K0
GitHub 支持上传视频文件
https://github.blog/2021-05-13-video-uploads-available-github/
@超人
2021/05/24
2.7K0
GitHub 支持上传视频文件
uniapp对接oss视频上传+压缩
首先是文件上传的代码: module.exports = { getUUID() { //生成UUID return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'
阿超
2022/08/21
8.9K0
AngularJS XMLHttpRequest
注意:以上代码的 get 请求是本站的服务器,你不能直接拷贝到你本地运行,会存在跨域问题,解决办法就是将 Customers_JSON.php 的数据拷贝到你自己的服务器上,附:PHP Ajax 跨域问题最佳解决方案。
陈不成i
2021/07/23
2.5K0
AngularJS 模块
你可以通过 AngularJS 的 angular.module 函数来创建模块:
陈不成i
2021/07/23
2.1K0
AngularJs(3)
<script type="text/javascript" src="angular.min.js"></script>
py3study
2020/01/14
1.7K0
【技巧】ionic3视频上传
有人问到视频上传这个问题,那我还是写一下吧,其实基本参考《ionic3多文件上传》这文章也行,不过对于单文件上传就不用那么复杂了,步骤如下:
IT晴天
2018/08/20
8790
视频切片并上传到GitHub
利用 jsDeliver + GitHub 实现免费 CDN 加速静态资源,例如图片、CSS、JS等,相信大家都知道。也有人想过存放视频,但是 jsDeliver 不支持加载超过 20M 的资源,所以视频需要压缩到 20M 以下。如果想要放部电影,那就需要用到 HLS切片 了。这里我用了狐妖小红娘竹业篇做测试,整部视频大小为 1.76G,以 20S 为一段共切了 506 段。
骤雨重山
2022/01/17
1.5K0
视频切片并上传到GitHub
视频切片并上传到GitHub
GitHub对项目大小的限制,因此请注意自己项目的大小和切片文件的大小,尽可能避免被GitHub警告。
赤月未咲
2023/03/17
1.6K0
angularjs[ngRepeat:dupes]
最近在开发过程中,发现一个问题,在使用angularjs的ng-repeat遍历过程中,如果遍历的数组中包含相同的项,则会抛错。 如下例:
奋飛
2019/08/15
1.6K0
AngularJS API
API 意为 Application Programming Interface(应用程序编程接口)。
陈不成i
2021/07/24
1.1K0
AngularJS 路由
通过 AngularJS 可以实现多视图的单页 Web 应用(single page web application,SPA)
陈不成i
2021/07/26
1.7K0

相似问题

视频点播Web上传SDK上传视频失败?

0395

上传视频失败?

1376

怎么上传视频?

1194

上传视频打开乱码?

2387

上传视频封面失败?

1323
相关问答用户
擅长4个领域
高级数据分析师擅长5个领域
萃橙科技 | 合伙人擅长4个领域
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档