AngularJS封装jQuery-File-Upload -

bijian1013

浏览: 3224054 次
性别:
来自: 深圳

最近访客更多访客>>

dy.f

godandghost

lovefiger

marsgrayson

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

AngularJS封装jQuery-File-Upload

博客分类：

AngularJS

JavaScript angularJS 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.工程目录结构