`

AngularJS封装jQuery-File-Upload

阅读更多

        在实际开发中,我们经常需要文件上传功能。一个很棒的例子是BlueImpd的File Upload控件(https://github.com/blueimp/jQuery-File-Upload),它使用了jQuery和jQuery UI(或者Bootstrap)。它们的API都非常简单,这也使指令变得非常简单。

directive.js

angular.module('myApp.directives', [])
  .directive('fileupload', function() {
	  return {
		restrict:'A',
		scope: {
		  	done: '&',
		  	progress: '&'
	  	},
	  	link: function(scope, element, attrs) {
	  		var optionsObj = {
	  			dataType: 'json'
	  		};
	  		if(scope.done) {
	  			optionsObj.done = function(e, data) {
	  				scope.$apply(function() {
	  					scope.done({e: e, data: data});
	  				});
	  			};
	  		}
	  		if(scope.progress) {
	  			optionsObj.progress = function(e, data) {
	  				scope.$apply(function() {
	  					scope.progress({e: e, data: data});
	  				});
	  			};
	  		}
	  		//以上内容可以简单地在一个循环中完成,这里是为了覆盖Fileupload控件所提供的API
	  		element.fileupload(optionsObj);
	  	}
	  };
  });

        这段代码允许我们用一种很简单的方式来定义指令,并为onDone和onProgress添加引用。我们使用了函数绑定的方式,这样AngularJS总是能够使用正确的作用域调用正确的方法。

        这是通过定义独立的scope来实现的,它上面绑定了两个函数,一个是progress,另一个是done。以上代码会在scope上创建一个函数,这个函数带有一个参数(一个object)。例如,scope.done带有一个object型的参数,该object上有两个key,分别是e和data,它们会被当作参数传递给原来的函数。

index.jsp

<!DOCTYPE html>
<html ng-app="myApp">
	<head lang="en">
		<meta charset="utf-8"></meta>
		<title>File Upload With AngularJS</title>
		<!-- 由于我们在加载AngularJS之前会加载jQuery,所以Angular将会使用jQuery库来代替自已的jQueryLite实现 -->
		<script src="jquery/jquery-1.8.3.js"></script>
		<script src="jQuery-File-Upload/jquery.ui.widget.js"></script>
		<script src="jQuery-File-Upload/jquery.iframe-transport.js"></script>
		<script src="jQuery-File-Upload/jquery.fileupload.js"></script>
		<script src="jQuery-File-Upload/jquery.xdr-transport.js"></script>
		<script src="angular/angular.js"></script>
		<script src="controller.js"></script>
		<script src="directive.js"></script>
	</head>
	<body ng-controller="MainCtrl">
		File Upload:
		<!-- 我们会在MainCtrl中定义uploadFinished,然后把它绑定到作用域上,所以在这里它已经是可用的了 -->
		<input id="testUpload" type="file" fileupload name="files[]" data-url="servlet/Upload" multiple done="uploadFinished(e, data)" progress="uploading(e, data)"></input>
	</body>
</html>

        input标签带有以下新增的属性:

a.fileupload

        此属性让input标签成为了一个文件上传元素。

b.data-url

        FileUpload插件使用此属性来决定把文件上传到哪里。在我们的例子中,我们上传到server API在servlet/Upload路径上等待处理插件所发送的数据。

c.multiple

        multiple属性告诉指令(以及fileupload控件)允许一次选择多份文件。我们可以从插件中获得此功能,而且不用编写额外的代码,这是内置插件提供的又一项福利。

d.done

        这是当插件文件上传之后需要调用的AngularJS函数。它同时还会指定调用指令时所需要的两个参数。

e.progress

        同done

controller.js

var app = angular.module("myApp", ['myApp.directives']);

app.controller('MainCtrl', function($scope) {
	$scope.uploadFinished = function(e, data) {
		console.log('We just finished uploading this baby...');
	};
	$scope.uploading = function(e, data) {
		var progress = parseInt(data.loaded / data.total * 100, 10);
        console.log(progress + '%');
	};
});

运行效果:


        点击“选择文件”,弹出如下选择框


        选择文件


        我们在服务器的控制台及浏览器的console上能看到上传的信息。也可以到服务器的上传目录下找到刚上传的文件,如下所示:

 

        有了它之后,我们就拥有了一个简单的、可运行的、可复用的文件上传指令。

 

附:

1.后台应用服务代码

Upload.java

package com.bijian.study;

import java.io.File;
import java.io.IOException;
import java.util.Iterator;
import java.util.List;
import java.util.UUID;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

@SuppressWarnings("serial")
public class Upload extends HttpServlet {

    @SuppressWarnings("unchecked")
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        String savePath = this.getServletConfig().getServletContext().getRealPath("");
        savePath = savePath + "/uploads/";

        File f1 = new File(savePath);
        System.out.println(savePath);
        if (!f1.exists()) {
            f1.mkdirs();
        }
        DiskFileItemFactory fac = new DiskFileItemFactory();
        ServletFileUpload upload = new ServletFileUpload(fac);
        upload.setHeaderEncoding("utf-8");
        List fileList = null;
        try {
            fileList = upload.parseRequest(request);
        } catch (FileUploadException ex) {
            return;
        }
        Iterator<FileItem> it = fileList.iterator();
        String name = "";
        String extName = "";
        while (it.hasNext()) {
            FileItem item = it.next();
            if (!item.isFormField()) {
                name = item.getName();
                long size = item.getSize();
                String type = item.getContentType();
                System.out.println(size + " " + type);
                if (name == null || name.trim().equals("")) {
                    continue;
                }
                // 扩展名格式:
                if (name.lastIndexOf(".") >= 0) {
                    extName = name.substring(name.lastIndexOf("."));
                }
                File file = null;
                do {
                    // 生成文件名:
                    name = UUID.randomUUID().toString();
                    file = new File(savePath + name + extName);
                } while (file.exists());
                File saveFile = new File(savePath + name + extName);
                try {
                    item.write(saveFile);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
        response.getWriter().print(name + extName);
    }
}
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
    
  <servlet>
    <servlet-name>upload</servlet-name>
    <servlet-class>com.bijian.study.Upload</servlet-class>
  </servlet>
 
  <servlet-mapping>
    <servlet-name>upload</servlet-name>
    <url-pattern>/servlet/Upload</url-pattern>
  </servlet-mapping>
 
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>
2.工程目录结构

说明:jquery.xdr-transport.js在IE下应载入此文件解决跨域问题。

 

资料来源:《用AngularJS开发下一代Web应用》

jQuery-File-Upload学习资料:http://avnpc.com/pages/single-file-upload-component-by-jquery-file-upload

  • 大小: 13.1 KB
  • 大小: 37.7 KB
  • 大小: 45.9 KB
  • 大小: 31.3 KB
  • 大小: 26.7 KB
分享到:
评论
2 楼 liang100100 2015-04-27  
为什么uploadFinished这个方法不会被执行,上传完了没执行这个方法
1 楼 Thin_bing 2015-01-12  
太感谢了,正在做angularJS 的上传,找了好久没找到该怎么处理,也是刚接触angularJS ,真的非常感谢;例子 我借用了

相关推荐

    jQuery-File-Upload页面上传框架

    在jQuery-File-Upload中,FormData用于封装上传文件和相关参数,然后通过Ajax发送到服务器。 ### 使用步骤 1. **引入依赖**:首先需要在页面中引入jQuery库和jQuery-File-Upload插件的JavaScript和CSS文件。 2. **...

    jQuery File Upload 可跨域的多图片上传

    **jQuery File Upload 知识点详解** `jQuery File Upload` 是一个流行的JavaScript库,它允许用户在网页上实现多文件上传功能,特别是支持跨域上传,这对于现代Web应用来说至关重要。该框架以其易于使用、高度可...

    JQUER-FILE-UPLOAD

    **jQuery File Upload插件详解** `jQuery File Upload`是一款广泛使用的、功能强大的jQuery插件,专为实现优雅、高效且用户友好的文件上传功能而设计。这个插件以其易用性、灵活性和丰富的自定义选项著称,尤其适用...

    jersey-file-upload-sample:使用 JAX-RS Jersey 和 jQuery File Upload 演示文件上传的简单应用程序

    本项目名为"jersey-file-upload-sample",它是一个使用JAX-RS Jersey框架和jQuery File Upload库实现的简单文件上传应用示例。这个应用程序的目的是展示如何在Java Web环境中处理文件上传请求,特别是在客户端使用...

    upload file

    "jQuery File Upload" 是一个非常流行的、高度可定制的文件上传解决方案,它为开发者提供了简单而强大的API来处理文件上传任务。这个插件在描述中被称为"upload封装好的插件,非常实用",说明它在简化文件上传操作...

    jquery ajax file upload

    在Web开发中,jQuery AJAX File Upload 是一个常见且实用的技术,它允许用户在不刷新整个页面的情况下上传文件。这一技术极大地提升了用户体验,因为用户可以一边浏览网页,一边进行文件上传,提高了交互性和效率。...

    ASP.NET-file-upload.rar_.net 上传

    在这个"ASP.NET-file-upload.rar"压缩包中,我们关注的核心知识点是ASP.NET中的文件上传功能,这是一个常见的需求,尤其在需要用户提交图片、文档或其他类型文件的Web应用中。 文件上传功能在ASP.NET中通常通过...

    基于weui图片上传封装插件

    本项目"基于weui图片上传封装插件"是个人原创的,针对使用jQueryWeui框架的前端开发者,提供了一个实用且方便的图片上传解决方案。这个插件的核心功能在于将图片上传的过程进行封装,使得开发者无需深入了解上传技术...

    JS上传图片插件

    本文将深入探讨“JS上传图片插件”的相关知识点,以及如何使用jQuery-File-Upload-9.5.6这个插件来实现图片上传功能。 一、JavaScript图片上传基础 1. HTML5 File API:现代浏览器支持File API,使得通过...

    jQuery File Upload 基于Jquery的图片上传组件.zip

    《jQuery File Upload:基于jQuery的图片上传组件详解》 在Web开发中,用户交互体验是至关重要的,尤其是在处理文件上传时。jQuery File Upload是一个强大的、易于使用的插件,它允许用户方便地上传图片,同时也...

    jquery-bulk-uploader:上载多个文件并向图像添加可选字段

    在实现这一功能时,通常会使用HTML5的FormData对象,它可以封装文件和表单数据,然后通过XMLHttpRequest(或者jQuery的$.ajax方法)发送到服务器。服务器端的处理可能涉及图像的预处理(如缩略图生成)、元数据的...

    ajax文件异步上传工具

    &lt;script src="jQuery-File-Upload-8.8.2/js/vendor/jquery.ui.widget.js"&gt; &lt;script src="jQuery-File-Upload-8.8.2/js/jquery.iframe-transport.js"&gt; &lt;script src="jQuery-File-Upload-8.8.2/js/jquery....

    jquery实现多附件上传

    压缩包中的`blueimp-jQuery-File-Upload-5f6bc7f`很可能就是该插件的某个版本。 8. **服务器端处理**:无论是否使用插件,服务器端都需要处理上传的文件,这可能涉及到文件存储、权限验证、大小限制、类型检查等多...

    基于jQuery的html5文件上传库.zip

    `jquery-html5-uploader`就是这样一个库,它封装了HTML5的File API,提供了一套简洁的API和方法,以便在jQuery环境中实现复杂的文件上传功能。 ### 3. `jquery-html5-uploader`核心功能 - **多文件选择**:HTML5的...

    完美解决上传进度条和upload控件不能修改样式的问题

    JQueryUpLoad,这个文件名可能是使用jQuery库实现的一个上传组件。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互。结合jQuery来实现文件上传,可以使得代码更加简洁易懂,同时...

    MVC5异步批量支持拖拽上传文件示例

    这个示例项目名为"jQuery-File-Upload.MVC5-master",它结合了jQuery File Upload插件与ASP.NET MVC5的强大力量,为用户提供了一种高效且友好的文件上传体验。 首先,让我们了解MVC5的基本概念。ASP.NET MVC5是微软...

    jqueryUpload

    在网页开发中,文件上传功能是常见的需求,jQuery Upload通过封装复杂的HTML5 File API,使得开发者能够轻松地在网站上实现这一功能。 **jQuery** 是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、...

    一次选择多个文件进行批量上传

    4. **事件处理**:jQuery File Upload组件提供了一系列的事件,如fileuploadstart、fileuploadprogress、fileuploadcomplete等,开发者可以监听这些事件来处理上传过程中的各种状态,如显示进度条、错误提示等。...

    一个基于html5 css3的ajax异异步上传插件 好用

    这个基于"blueimp-jQuery-File-Upload-3c5d440"的插件,充分利用了这些技术的优势,为用户提供了一种直观且高效的文件上传体验。 首先,HTML5在其中起到了重要的角色。它的File API允许浏览器直接访问用户的本地...

Global site tag (gtag.js) - Google Analytics