angularjs上传文件

1.下载上传文件依赖

npm install -g ng-file-upload

2.引入相关文件

<script src="lib/ng-file-upload/ng-file-upload-shim.js"></script>

<script src="lib/ng-file-upload/ng-file-upload.js"></script>

3.注入模块

var stuSystemApp = angular.module('StuSystemApp',[

'ui.router',

'ngFileUpload',

'stuSystemCtrls'

]);

4.编写Html选择文件组件

(1)选择文件，然后上传文件

<div class="btn btn-default btn-sm" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'"

ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100">

选择文件

</div>

<button class="btn btn-primary btn-sm " ng-click="submit()">上传文件</button>

(2)选择文件立即上传

<div class="btn btn-default btn-sm" ngf-select="upload($file)" ngf-pattern="'image/*'"

ngf-accept="'image/*'">

选择并上传文件

</div>

5.编写controller(内涵两种上传方法，第一种(先触发submit()方法,然后触发上传文件;第二种直接触发上传文件方法,第4步一看便知)

stuSystemCtrls.controller('stuCtrl',['$scope','Upload',function($scope,Upload){

$scope.file="";

$scope.info="";

$scope.progress=0;

$scope.uploadFile="";

$scope.submit = function() {

if ($scope.file) {

$scope.upload($scope.file);

}

};

$scope.upload = function (file) {

Upload.upload({

url: 'http://localhost:8090/AngularJS01/upload.do?catalog=image',

data: {file: file}

}).then(function (resp) {

console.log(angular.toJson(resp.data))

$scope.info="上传成功:"+angular.toJson(resp.data);

console.log('Success uploaded. Response: ' + resp.data);

$scope.uploadFile=resp.data.url;

}, function (resp) {

console.log('Error status: ' + resp.status);

}, function (evt) {

var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);

console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);

$scope.info="上传进度:"+progressPercentage+"%";

$scope.progress=progressPercentage;

});

};

// for multiple files:

$scope.uploadFiles = function (files) {

if (files && files.length) {

for (var i = 0; i < files.length; i++) {

//Upload.upload({..., data: {file: files[i]}, ...})...;

}

// or send them all together for HTML5 browsers:

//Upload.upload({..., data: {file: files}, ...})...;

}

}

}]);

6.编写上传文件后台，本实例是java上传后台

package com.servlet;

import java.io.BufferedInputStream;

import java.io.BufferedOutputStream;

import java.io.File;

import java.io.FileOutputStream;

import java.io.IOException;

import java.io.PrintWriter;

import java.util.Arrays;

import java.util.HashMap;

import java.util.Iterator;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

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;

import org.apache.commons.fileupload.util.Streams;

@WebServlet("/upload.do")

public class FileUploadServlet extends HttpServlet {

/**

*KindEditor

*/

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

doPost(request, response);

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

PrintWriter writer = null;

//定义允许上传的文件扩展名

HashMap<String, String> extMap = new HashMap<String, String>();

extMap.put("image", "gif,jpg,jpeg,png,bmp");

extMap.put("flash", "swf,flv");

extMap.put("media", "swf,flv,mp3,mp4,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");

extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2,avi,mp4");

//最大文件大小 默认1M 单位是字节

long maxSize = 20000000;

if(!ServletFileUpload.isMultipartContent(request)){

writer = encodehead(request, response);

writer.println("请选择文件。");

writer.close();

return;

}

String dirName = request.getParameter("type");

if (dirName == null) {

dirName = "image";

}

if(!extMap.containsKey(dirName)){

writer = encodehead(request, response);

writer.println("目录名不正确。");

writer.close();

return;

}

String fileUrl = "";

// 文件存放的目录

String catalog = request.getParameter("catalog");

String savePath = request.getSession().getServletContext().getRealPath(

"/")

+ "\\upload\\" + dirName+"\\"+catalog + "\\";

File tempDirPath = new File(savePath);

if (!tempDirPath.exists()) {

tempDirPath.mkdirs();

}

String saveUrl = "upload/" +dirName+"/"+ catalog + "/";

File dirFile = new File(savePath);

if (!dirFile.exists()) {

dirFile.mkdirs();

}

// 创建磁盘文件工厂

DiskFileItemFactory fac = new DiskFileItemFactory();

// 创建servlet文件上传组件

ServletFileUpload upload = new ServletFileUpload(fac);

// 文件列表

List fileList = null;

// 解析request从而得到前台传过来的文件

try {

fileList = upload.parseRequest(request);

} catch (FileUploadException ex) {

ex.printStackTrace();

return;

}

String name=request.getParameter("name");

// 保存后的文件名

String imageName = null;

// 便利从前台得到的文件列表

Iterator<FileItem> it = fileList.iterator();

while (it.hasNext()) {

FileItem item = it.next();

String fileName = item.getName();

long fileSize = item.getSize();

// 如果不是普通表单域，当做文件域来处理

if (!item.isFormField()) {

//检查文件大小

if(item.getSize() > maxSize){

writer = encodehead(request, response);

writer.println("上传文件大小超过限制。");

writer.close();

return;

}

//检查扩展名

String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();

if(!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)){

writer = encodehead(request, response);

writer.println("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。");

writer.close();

return;

}

String extName = item.getName().substring(

item.getName().lastIndexOf("."));

if (name!=null) {

imageName=name+extName;

}else{

imageName=item.getName();

}

BufferedInputStream in = new BufferedInputStream(item.getInputStream());

BufferedOutputStream out = new BufferedOutputStream(

new FileOutputStream(new File(dirFile + "\\"

+ imageName)));

fileUrl = "{\"error\":0,\"url\":\"" + saveUrl + imageName

+ "\"}";

Streams.copy(in, out, true);

String iconPath=request.getSession().getServletContext().getRealPath("/")+"images\\ofbiz.png";

}

}

fileUrl = fileUrl.replace('\'', '"');

writer = encodehead(request, response);

writer.println(fileUrl);

writer.close();

}

private PrintWriter encodehead(HttpServletRequest request,

HttpServletResponse response) throws IOException {

request.setCharacterEncoding("utf-8");

response.setContentType("text/html; charset=utf-8");

return response.getWriter();

}

}