`

AngularJS实现文件异步上传

 
阅读更多
实现:前端AngularJs+后端servelt

依赖包:commons-fileupload.x.x.jar commons-io-x.x.jar

下载: http://commons.apache.org/proper/commons-fileupload/
http://commons.apache.org/proper/commons-io/ 文件上传前端利用AngularJs封好的http发起异步请求传递二进制文件。
代码:
第一步:

<div class="row " ng-show="up_doc">
            <div class="col-md-12 col-sm-12">
                <div class="z_up_common">
                    <div class="z_up_common_inner">
                        <div class="z_up_image">
                            <input id="file"
                                onchange="angular.element(this).scope().file_up_onclick(this)"
                                type="file"> </input>
                        </div>
                    </div>
                    <p class="up-tips">从我的电脑选择要上传的文档:按住CTRL可以上传多份文档</p>
                </div>
            </div>
        </div>


第二步:点击上传文档按钮确认选中文档开始上传

触发 file_up_onclick事件调用js方法
        $scope.file_up_onclick=function(){
        //1.获取文件对象
        var _file=document.getElementById("file");
        //2.实例化FormData对象
                   var $$fd=new FormData();
            //3.添加文件对象到FormData中
        $$fd.append("file",_file.files[0]);
            //4.开始异步上传
        $http({
            method:'post',
            data: $$fd,
            url:'//servlet/FileCommand',
            headers: {'Content-Type':undefined},
             /*序列化 formdata object*/
              transformRequest: angular.identity         
        }).success(function(data){    
        });
    };

第四步:servelt接收二进制文件
public class FileCommand extends HttpServlet{

    // 1.文件上传路径
    private static final String UPLOAD_DIRECTORY = "D:/文件上传";
    // 2.设置临时存储文件大小,当超过大小时,将先存储超出大小文件在临时目录
    private static final int MEMORY_THRESHOLD = 1024 * 1024 * 30; 
    // 3.设置最大文件上传值
    private static final int MAX_FILE_SIZE = 1024 * 1024 * 2000; 
    // 4.最大请求值
    private static final int MAX_REQUEST_SIZE = 1024 * 1024 * 2048; 

public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {

  doPost(request, response);
}

/**
 * @摘要 提供文件上传的方法
 */
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
    //1.设置字符编码为utf-8
    request.setCharacterEncoding("utf-8");
    response.setCharacterEncoding("utf-8");
    response.setContentType("text/html;charset=utf-8");
    // 2.检测是否为多媒体上传
    if (!ServletFileUpload.isMultipartContent(request)) {
        // 2.1如果不是则停止
        PrintWriter writer = response.getWriter();
        writer.println("Error: 表单必须包含 enctype=multipart/form-data");
        writer.flush();
        return  ;
    }
    // 3.配置上传参数
    DiskFileItemFactory factory = new DiskFileItemFactory();
    //4. 设置内存临界值 - 超过后将产生临时文件并存储于临时目录中
    factory.setSizeThreshold(MEMORY_THRESHOLD);
    // 5.设置临时存储目录 java.io.tmpdir默认的临时文件路径为服务器的temp目录
    factory.setRepository(new File(System.getProperty("java.io.tmpdir")));

    ServletFileUpload upload = new ServletFileUpload(factory);

    // 6.设置最大文件上传值
    upload.setFileSizeMax(MAX_FILE_SIZE);

    // 7.设置最大请求值 (包含文件和表单数据)
    upload.setSizeMax(MAX_REQUEST_SIZE);

    //8. 如果目录不存在则创建
    File uploadDir = new File(UPLOAD_DIRECTORY);
    if (!uploadDir.exists()) {
        uploadDir.mkdir();
    }
    try {
        // 10.解析请求的内容提取文件数据
        List<FileItem> formItems = upload.parseRequest(request);
        System.out.println("name="+request.getSession().getAttribute("name"));
            // 10.1迭代表单数据
        if (formItems != null && formItems.size() > 0) {
            for (FileItem item : formItems) {
                if (!item.isFormField()){
                    String nFileName = new File(item.getName()).getName();

                    String nPrefix=nFileName.substring(nFileName.lastIndexOf(".")+1);

                    nFileName=nFileName.substring(0,nFileName.lastIndexOf("."))    ;                

                    item.write(new File(UPLOAD_DIRECTORY+"/"+nFileName));

                    item.delete();

                    PrintWriter nWriter=response.getWriter();

                    nWriter.print("{\"prefix\":\""+nPrefix+"\",\"filename\":\""+nFileName+"\",\"filesize\":\""+item.getSize()+"\"}");
                }
                }
            }  
    } catch (Exception ex) {
        PrintWriter writer=response.getWriter();
        writer.print("error");
    }
}

第五步:查看文件是否在指定目录即可
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    angularJS和bootstrap实现多文件上传

    文件上传功能通常伴随着用户体验的优化,例如使用Ajax异步上传,提供上传取消功能,或者添加预览图片的功能。在提供的`files.sql`和`fileinput`文件中,虽然没有具体的代码示例,但它们可能包含了相关的数据库设计或...

    【ASP.NET编程知识】ASP.NET WebAPi(selfhost)实现文件同步或异步上传.docx

    ASP.NET WebAPI(SelfHost)实现文件同步或异步上传主要涉及到两个方面:客户端的HTML/JavaScript处理和服务器端的ASP.NET WebAPI处理。这里我们将深入探讨如何在ASP.NET环境中,利用SelfHost模式来构建一个文件上传...

    angularjs实现多张图片上传并预览功能

    通过上述分析,我们了解到实现AngularJS多图片上传及预览功能需要理解AngularJS指令的编写方式,以及如何利用浏览器提供的File API和AngularJS的promise进行异步操作。本篇内容将为开发人员提供一个实用的示例代码,...

    Angularjs实现多图片上传预览功能

    这部分代码通常在Controller中实现,需要注意的是,由于文件上传通常涉及到异步操作,所以需要使用Promise或AngularJS的`$q`服务来处理。 6. **样式与界面**:为了提供良好的用户体验,你可能还需要设计一个美观的...

    angularjs中$http异步上传Excel文件方法

    本文将详细介绍如何使用AngularJS框架中的$http服务实现异步上传Excel文件的方法。 ### 1. 创建文件上传界面 首先,我们需要构建一个HTML表单,允许用户选择Excel文件。这通常使用标签来实现。在AngularJS中,我们...

    ASP.NET WebAPi(selfhost)实现文件同步或异步上传

    前面我们讲过利用AngularJs上传到WebAPi中进行处理,同时我们在MVC系列中讲过文件上传,本文结合MVC+WebAPi来进行文件的同步或者异步上传,顺便回顾下css和js,MVC作为客户端,而WebAPi利用不依赖于IIS的selfhost...

    详解angularJS+Ionic移动端图片上传的解决办法

    本文将详细解读AngularJS和Ionic结合使用时实现移动端图片上传的方法和步骤。 首先,了解AngularJS和Ionic的基本概念是非常重要的。AngularJS是一个非常流行的JavaScript框架,主要用于开发单页面的web应用程序。...

    AngularJS实现图片上传和预览功能的方法分析

    这使得我们需要通过一些特别的处理来实现AngularJS与文件上传的兼容。 ### HTML5原生实现图片上传和预览 HTML5中提供了简单的原生方法来实现图片上传和预览功能,这是通过监听input元素的onchange事件来获取用户...

    Angularjs实现上传图片预览功能

    本文聚焦于如何利用AngularJS实现上传图片功能并预览所选图片,以下是详细介绍。 首先,需要了解的是在Web开发中实现文件上传功能,通常会使用HTML的元素,并将其type属性设置为file。用户可以通过点击该元素来选择...

    上传文件AJAX

    虽然可以手动实现AJAX文件上传,但有许多优秀的库和框架可以帮助我们简化工作,如jQuery的`$.ajax`或`$.fileUpload`,AngularJS的`ng-file-upload`,React的`react-dropzone`等。 ### 总结 "上传文件AJAX"技术使得...

    ProfileImageUpload-AngularJS-源码.rar

    上传文件可以使用Ajax技术,通过XMLHttpRequest或者更高级的Fetch API来实现异步发送请求。一般来说,我们会创建一个HTTP POST请求,将文件数据作为FormData对象的一部分发送到服务器。以下是一个使用$http服务进行...

    springMVC多文件上传demo

    这个"springMVC多文件上传demo"是一个实例,它展示了如何在Spring MVC应用中实现这个功能。下面将详细介绍相关知识点。 1. **Spring MVC概述** Spring MVC是Spring框架的一部分,它提供了一个用于构建Web应用程序...

    asp.net 超大文件上传服务器

    在ASP.NET环境中,处理大文件上传是一个常见的挑战,特别是当涉及到超过几百MB甚至达到2G或3G的大文件...通过以上技术,开发者可以在ASP.NET MVC框架中实现高效、可靠的超大文件上传服务器,提供给用户流畅的上传体验。

    AngularJS上传文件的示例代码

    在开发Web应用时,文件上传是一项常见的功能。AngularJS,作为一个强大的前端JavaScript框架,提供了...同时,为了安全性和性能,建议对上传的文件进行验证和优化,比如限制文件类型、大小,以及使用异步上传等策略。

    带进度和多文件上传,基于ssm

    标题中的“带进度和多文件上传,基于SSM”指的是使用Spring、SpringMVC和MyBatis(简称SSM)框架实现的一个具有文件上传功能的Web应用,且该功能支持显示上传进度,并允许用户同时上传多个文件。在现代Web开发中,...

    asp.net大文件上传源码(上传大小无限制).

    7. **性能优化**:为了提高上传速度和服务器效率,可以采用多线程处理文件块,或者利用异步编程模型来避免阻塞主线程。 8. **客户端库**:在前端,可以使用JavaScript库如jQuery、AngularJS或React等来处理文件选择...

    文件上传插件 ng-file-upload

    1. **异步上传**:支持基于Ajax的异步文件上传,这意味着用户可以在上传过程中继续与页面交互,无需刷新页面。 2. **文件预览**:允许在上传之前预览图像和其他类型的支持预览的文件。 3. **上传进度**:提供实时的...

    AngularJS FormData多部分文件上传

    本教程聚焦于使用AngularJS进行多部分文件上传,结合FormData对象来实现这一功能。以下是相关知识点的详细说明: **1. AngularJS基础知识** AngularJS是一个用于构建单页应用程序(SPA)的MVC框架,由Google维护。...

Global site tag (gtag.js) - Google Analytics