[英]how to upload image file in http.post with other paramters in AngularJS
i am new angularjs, im posting successfully multiple parameters in http.post but when i try to add a file in that parameter django returns Invalid boundary in multipart: None from web service which is django based, browsable api page work fine so there is nothing wrong on web service side on localhost. 我是新的angularjs,即时通讯成功在http.post中发布了多个参数,但是当我尝试在该参数中添加文件django返回多部分无效边界时:基于django的Web服务中没有 ,可浏览的api页面工作正常,因此没有任何作用在本地主机上的Web服务端出错。
my html code is 我的html代码是
<form name="myform" ng-controller="addEventController">
<b>Title: </b><input type="text" ng-model="eventtitle" style="margin-bottom: 10px;"/><br/>
<b>Banner: </b><input type="file" id="files" name="file" /><div id="progress_bar"><div class="percent">0%</div></div>
<b>Description: </b><input type="text" ng-model="eventdescription" style="margin-bottom: 10px;"/><br/>
<input type="submit" value="Submit Form" ng-click="AddThisEvent()" style="margin-top: 10px; margin-bottom: 10px; margin-left: 35px;"/>
<h2 style="color: green;">{{OKans}}</h2><h2 style="color: red;">{{NAans}}</h2>
<b>Status: </b> {{res.statusText}}<br>
my angularjs controller code is 我的angularjs控制器代码是
eventsApp.controller('addEventController', function($scope, $http) {
var reader;
var progress = document.querySelector('.percent');
function errorHandler(evt) {
switch(evt.target.error.code) {
case evt.target.error.NOT_FOUND_ERR:
alert('File Not Found!');
break;
case evt.target.error.NOT_READABLE_ERR:
alert('File is not readable');
break;
case evt.target.error.ABORT_ERR:
break; // noop
default:
alert('An error occurred reading this file.');
};
}
function updateProgress(evt) {
// evt is an ProgressEvent.
if (evt.lengthComputable) {
var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
// Increase the progress bar length.
if (percentLoaded < 100) {
progress.style.width = percentLoaded + '%';
progress.textContent = percentLoaded + '%';
}
}
}
function handleFileSelect(evt) {
// Reset progress indicator on new file selection.
progress.style.width = '0%';
progress.textContent = '0%';
reader = new FileReader();
reader.onerror = errorHandler;
reader.onprogress = updateProgress;
reader.onabort = function(e) {
alert('File read cancelled');
};
reader.onloadstart = function(e) {
document.getElementById('progress_bar').className = 'loading';
};
reader.onload = function(e) {
// Ensure that the progress bar displays 100% at the end.
progress.style.width = '100%';
progress.textContent = '100%';
setTimeout("document.getElementById('progress_bar').className='';", 2000);
//$scope.eventbanner = { filename: evt.target.files[0].name, data: evt.target.files[0] }
$scope.eventbanner = evt.target.files[0];
//$scope.jsonFILES = ("file", $scope.eventbanner)
}
// Read in the image file as a binary string.
reader.readAsDataURL(evt.target.files[0]);
console.log(reader);
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
$scope.AddThisEvent = function() {
$scope.answer = 'logging . . . ';
$scope.OKans = '';
$scope.NAans = '';
$scope.jsonData = {
event_title: $scope.eventtitle,
event_banner_pic: $scope.eventbanner,
event_desc: $scope.eventdescription,
}
$http.post( '/organiser/events/', $scope.jsonData, { headers: {'Content-Type': 'multipart/form-data' } }
).then(function(res){
$scope.res = res
}, function(error) {
$scope.res = error
});
}
});
Thanks in advance. 提前致谢。
Answer at Angularjs $http post file and form data helped me and remove following code Angularjs $ http的回复文件和表单数据对我有帮助,并删除了以下代码
var reader;
var progress = document.querySelector('.percent');
function errorHandler(evt) {
switch(evt.target.error.code) {
case evt.target.error.NOT_FOUND_ERR:
alert('File Not Found!');
break;
case evt.target.error.NOT_READABLE_ERR:
alert('File is not readable');
break;
case evt.target.error.ABORT_ERR:
break; // noop
default:
alert('An error occurred reading this file.');
};
}
function updateProgress(evt) {
// evt is an ProgressEvent.
if (evt.lengthComputable) {
var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
// Increase the progress bar length.
if (percentLoaded < 100) {
progress.style.width = percentLoaded + '%';
progress.textContent = percentLoaded + '%';
}
}
}
function handleFileSelect(evt) {
// Reset progress indicator on new file selection.
progress.style.width = '0%';
progress.textContent = '0%';
reader = new FileReader();
reader.onerror = errorHandler;
reader.onprogress = updateProgress;
reader.onabort = function(e) {
alert('File read cancelled');
};
reader.onloadstart = function(e) {
document.getElementById('progress_bar').className = 'loading';
};
reader.onload = function(e) {
// Ensure that the progress bar displays 100% at the end.
progress.style.width = '100%';
progress.textContent = '100%';
setTimeout("document.getElementById('progress_bar').className='';", 2000);
//$scope.eventbanner = { filename: evt.target.files[0].name, data: evt.target.files[0] }
$scope.eventbanner = evt.target.files[0];
//$scope.jsonFILES = ("file", $scope.eventbanner)
}
// Read in the image file as a binary string.
reader.readAsDataURL(evt.target.files[0]);
console.log(reader);
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.