angularjs上传
A. AngularJS $http 在本机能请求成功并获取到json数据,但程序上传至服务器就获取不到了,是什么原因呢
LZ你的url请求,附上'/'看看
B. angularjs 上传excel文件 是使用formdata吗
这是
Struts2
自动帮你封装的,你只需要写好File的名字与前台对应就可以了,多个文件上传的话Struts也是有文件数组可以完成的,设置好getset方法即可
C. angularjs使用$http post上传文件的时候,怎样获取文件上传的进度
angular在1.5.5以上的版本中,在$http中也加入了eventHandler和uploadEventHandlers等方法,所以可以直接这样写:
$http({
method: 'POST',
url: url,
eventHandlers: {
progress: function(c) {
console.log('Progress -> ' + c);
console.log(c);
}
},
uploadEventHandlers: {
progress: function(e) {
console.log('UploadProgress -> ' + e);
console.log(e);
}
},
data: uploadData,
}).success(function(data) {
console.log(data);
}).error(function(data, status) {
console.log(data);
});
最后,也可以用比较成熟的组件去解决,推荐angular-file-upload
D. angularjs结合nodejs实现文件的上传怎么弄
下面就用“multiparty”实现一个版本。
1.使用express(版本是4.11.x)创建一个项目,采用默认的jade作为模版引擎。
2.在项目目录中,通过npm install multiparty进行安装必要组件。
3.修改views/index.jade,如下做一个简单的用于文件上传的form。
1 extends layout
2
3 block content
4 form(method='post', action='/file/uploading', enctype='multipart/form-data')
5 input(name='inputFile', type='file', multiple='mutiple')
6 input(name='btnUp', type='submit',value='上传')
4.修改routes/index.js,实现上传页面和上传响应的后台代码。
1 var express = require('express');
2 var router = express.Router();
3 var multiparty = require('multiparty');
4 var util = require('util');
5 var fs = require('fs');
6
7 /* 上传页面 */
8 router.get('/', function(req, res, next) {
9 res.render('index', { title: 'Express' });
10 });
11
12 /* 上传*/
13 router.post('/file/uploading', function(req, res, next){
14 //生成multiparty对象,并配置上传目标路径
15 var form = new multiparty.Form({uploadDir: './public/files/'});
16 //上传完成后处理
17 form.parse(req, function(err, fields, files) {
18 var filesTmp = JSON.stringify(files,null,2);
19
20 if(err){
21 console.log('parse error: ' + err);
22 } else {
23 console.log('parse files: ' + filesTmp);
24 var inputFile = files.inputFile[0];
25 var uploadedPath = inputFile.path;
26 var dstPath = './public/files/' + inputFile.originalFilename;
27 //重命名为真实文件名
28 fs.rename(uploadedPath, dstPath, function(err) {
29 if(err){
30 console.log('rename error: ' + err);
31 } else {
32 console.log('rename ok');
33 }
34 });
35 }
36
37 res.writeHead(200, {'content-type': 'text/plain;charset=utf-8'});
38 res.write('received upload:\n\n');
39 res.end(util.inspect({fields: fields, files: filesTmp}));
40 });
41 });
42
43 mole.exports = router;
完成。
“multiparty”的用法详见:
www.npmjs.com/package/multiparty
github.com/andrewrk/node-multiparty
E. Angular中文社区angular 怎么上传文件
上传可以使用多种插件上传,如果要用jQuery,请参考 jQuery File Upload Demo AngularJS Requirements jQuery v. 1.6+ jQuery UI widget factory v. 1.9+ (included) jQuery Iframe Transport plugin (included) javaScript Templates engine v. 2.2.1+ (optional) JavaScript Load Image function v. 1.7.3+ (optional) JavaScript Canvas to Blob function v. 2.0.6+ (optional) Bootstrap CSS Toolkit v. 2.3+ (optional)
F. angularjs上传文件怎么设置$http为multipart/form-data
前言:很久没更新博客,最近公司pc端技术选型用angular,这几天就赶鸭子上架,硬着头皮直接上手angular。其中有许多小坑陆陆续续踩起走。今天就遇到一个比较常见的问题:图片上传。 主题:图片上传服务器,然后通过服务器传阿里云。 不废话了直接贴前端代码: $http({ method: ‘POST‘, url: ‘/wechatapp/User/setAvatar‘, data: data, headers: { ‘Content-Type‘: undefined }, transformRequest: function(data) { var formData = new FormData(); formData.append(‘avatar_data‘, data.adata); formData.append(‘avatar_file‘, data.file); return formData; }, data: { adata: scope.avatar_data, file: scope.avatar_file } }).success(function(d) { //请求成功 cb(d); }).error(function(err, status) { console.log(err); cb(err); }); 其实没神马难点,主要是取消post默认的Content-Type,然后已FormData的方式上传。一般ajax上传文件都是以FormData方式传。 以上就是本文给大家介绍Angular Js文件上传之form-data,希望大家喜欢。
G. angularjs怎么通过ajax上传文件
ngularJS提供$http控制,可以作为一项服务从服务器读取数据。服务器可以使一个数据库调用来获取记录。 AngularJS需要JSON格式的数据。一旦数据准备好,$http可以用以下面的方式从服务器得到数据。
function studentController($scope,$http) {
var url="data.txt";
$http.get(url).success( function(response) {
$scope.students = response;
});
}
在这里,data.txt中包含的学生记录。 $http服务使Ajax调用和设置针对其学生的属性。 “学生”模型可以用来用来绘制 HTML 表格。
例子
data.txt[
{
"Name" : "Mahesh Parashar",
"RollNo" : 101,
"Percentage" : "80%"
},
{
"Name" : "Dinkar Kad",
"RollNo" : 201,
"Percentage" : "70%"
},
{
"Name" : "Robert",
"RollNo" : 191,
"Percentage" : "75%"
},
{
"Name" : "Julian Joe",
"RollNo" : 111,
"Percentage" : "77%"
}
]
testAngularJS.html<html>
<head>
<title>Angular JS Includes</title>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">
<table>
<tr>
<th>Name</th>
<th>Roll No</th>
<th>Percentage</th>
</tr>
<tr ng-repeat="student in students">
<td>{{ student.Name }}</td>
<td>{{ student.RollNo }}</td>
<td>{{ student.Percentage }}</td>
</tr>
</table>
</div>
<script>
function studentController($scope,$http) {
var url="data.txt";
$http.get(url).success( function(response) {
$scope.students = response;
});
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
输出
要运行这个例子,需要部署textAngularJS.html,data.txt到一个网络服务器。使用URL在Web浏览器中打开textAngularJS.html请求服务器。看到结果如下:
H. angularjs 上传文件java 怎么接收
首先java文件里面 你User aUser = new User();你虽然new了这个实体,但是你并没有给这个实体赋值,new出来的实体里面的所有属性都是null的。所以你输出再回是null。然后是jsp文件你输出的是null说明你的response.userName值就是null,
I. AngularJS中文社区angular 怎么上传文件
利用angular-file-upload组件就可以了。
angular-file-upload 是一个基于HTML5技术的文件上传轻量级 AngularJS指令(directive),当浏览器不支持时转为采用 FileAPI polyfill技术实现(基于Flash)。
参考:
//inject angular file upload directives and service.angular.mole('myApp', ['angularFileUpload']);var MyCtrl = [ '$scope', '$upload', function($scope, $upload) {
$scope.onFileSelect = function($files) { //$files: an array of files selected, each file has name, size, and type.
for (var i = 0; i < $files.length; i++) { var file = $files[i];
$scope.upload = $upload.upload({
url: 'server/upload/url', //upload.php script, node.js route, or servlet url
//method: 'POST' or 'PUT',
//headers: {'header-key': 'header-value'},
//withCredentials: true,
data: {myObj: $scope.myModelObj},
file: file, // or list of files ($files) for html5 only
//fileName: 'doc.jpg' or ['1.jpg', '2.jpg', ...] // to modify the name of the file(s)
// customize file formData name ('Content-Disposition'), server side file variable name.
//fileFormDataName: myFile, //or a list of names for multiple files (html5). Default is 'file'
// customize how data is added to formData. See #40#issuecomment-28612000 for sample code
//formDataAppender: function(formData, key, val){}
}).progress(function(evt) { console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
}).success(function(data, status, headers, config) { // file is uploaded successfully
console.log(data);
}); //.error(...)
//.then(success, error, progress);
// access or attach event listeners to the underlying XMLHttpRequest.
//.xhr(function(xhr){xhr.upload.addEventListener(...)})
} /* alternative way of uploading, send the file binary with the file's content-type. Could be used to upload files to CouchDB, imgur, etc... html5 FileReader is needed. It could also be used to monitor the progress of a normal http post/put request with large data*/
// $scope.upload = $upload.http({...}) see 88#issuecomment-31366487 for sample code.
};
}];
html:
<!-- shim is needed to support upload progress/abort for HTML5 and non-HTML5 FormData browsers.--><!-- angular-file-upload-html5-shim.js could be used instead of angular-file-upload-shim if your app targets HTML5 browsers only (not IE8-9) --><!-- Note: shim.js MUST BE PLACED BEFORE angular.js and angular-file-upload.js AFTER angular.js--><script src="angular-file-upload-shim.min.js"></script>
<script src="angular.min.js"></script>
<script src="angular-file-upload.min.js"></script>
<div ng-controller="MyCtrl">
<input type="text" ng-model="myModelObj">
<input type="file" ng-file-select="onFileSelect($files)">
<input type="file" ng-file-select="onFileSelect($files)" multiple accept="image/*">
<div class="button" ng-file-select="onFileSelect($files)" data-multiple="true"></div>
<div ng-file-drop="onFileSelect($files)" ng-file-drag-over-class="optional-css-class-name-or-function"
ng-show="dropSupported">drop files here</div>
<div ng-file-drop-available="dropSupported=true"
ng-show="!dropSupported">HTML5 Drop File is not supported!</div>
<button ng-click="upload.abort()">Cancel Upload</button>
</div>
J. angularjs插件怎么使用
查看webstorm的setting里的plugin里是否有angular的库,
如果有angular的库,
且把angular的文件引入了本地,
且路径是纯文件路径【不是 tp自带的__PUBLIC__】,
且写的时候没提示,
那么,打开你的plugin,将angular库右侧的激活给取消,restart一次之后,
再次把angular库右侧的激活给勾选,restart一次就可以使用了。