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

AngularJS中的异步Excel文件上传方法详解

一、文件上传框HTML代码示例：

在HTML中，我们首先需要创建一个文件上传的表单。这个表单包含一个按钮和一个隐藏的文件输入元素。点击按钮会触发文件输入元素的点击事件，从而允许用户选择文件。设置表单的enctype属性为multipart/form-data是很重要的，以便能够上传文件。以下是HTML代码示例：

```html

```

二、JavaScript代码分析：

接下来，我们在AngularJS的控制器中处理文件上传的逻辑。我们定义了一个函数`import_asset`，它触发文件输入元素的点击事件，以便用户可以开始文件选择过程。然后，我们监听文件输入元素的change事件，当用户选择文件后，该事件将被触发。以下是JavaScript代码示例：

```javascript

$scope.import_asset = function () {

$("file_asset").click();

};

$("file_asset").on("change", function(){

var formData = new FormData(); // 创建FormData对象用于存储文件数据

var file = document.getElementById("file_asset").files[0]; // 获取用户选择的文件

if(file.name){ // 检查是否有文件被选择

var fileName = file.name.substring(file.name.lastIndexOf(".") + 1); // 获取文件的扩展名

if(fileName == "xlsx" || fileName == "xls"){ // 检查文件是否为Excel文件

formData.append('file', file); // 将文件添加到FormData对象中

$http({ // 使用AngularJS的$http服务发送POST请求

method:"post",

url:monService.projectName + "/so/assetmanage/upload", // 设置请求的URL

data:formData, // 将FormData对象作为请求的数据发送

headers : { // 设置请求头

'Content-Type' : undefined // 不设置Content-Type，以便让浏览器设置正确的MIME类型

},

transformRequest : angular.identity // 不做任何转换，直接发送FormData对象

}).then(function (response) { // 请求成功后的回调函数

if(response.status == 200){ // 如果服务器返回的状态码为200，表示上传成功

alert("文件上传成功！！！"); // 提示用户上传成功

}else{ // 如果服务器返回的状态码不是200，表示上传失败

alert("文件上传失败！！！"); // 提示用户上传失败

}

});

}else{ // 如果文件不是Excel文件，弹出提示并清空文件输入框

alert("文件格式不正确，请上传以.xlsx，.xls 为后缀名的文件。");

$("file_asset").val("");

}

}

});

``` 以上的代码实现了AngularJS中的异步Excel文件上传功能。当用户选择了一个Excel文件后，代码会将该文件通过POST请求发送到服务器。如果服务器返回的状态码为200，表示文件上传成功；否则表示上传失败。代码还检查了文件的格式，确保只有Excel文件才能被上传。