Angularjs 用于图像、视频、音频和预览的Angular Js文件上传
在我的项目中，我有一个带有上传选项的表单，当用户单击图像按钮Angularjs 用于图像、视频、音频和预览的Angular Js文件上传,angularjs,ng-file-upload,Angularjs,Ng File Upload,在我的项目中，我有一个带有上传选项的表单，当用户单击图像按钮时，有三种类型的上传可用。必须触发图像上传，并且像其他两个一样，必须显示其他部分。我使用ng if条件显示它。如果未添加条件，则功能正常工作。如果添加了条件，则会引发异常 HTML文件： <body ng-app="fileUpload" ng-controller="mediaController"> <div class="formWrapper"> <button class="btn btn
时，有三种类型的上传可用。必须触发图像上传，并且像其他两个一样，必须显示其他部分。我使用ng if
条件显示它。如果未添加条件，则功能正常工作。如果添加了条件，则会引发异常
HTML文件：
<body ng-app="fileUpload" ng-controller="mediaController">
<div class="formWrapper">
<button class="btn btn-primary" ng-click="UploadFunction('image');">Image</button>
<button class="btn btn-primary" ng-click="UploadFunction('audio')">Audio</button>
<button class="btn btn-primary" ng-click="UploadFunction('video')">Video</button>
<form name="mediaForm" novalidate>
<fieldset>
<div class="row1">
<div class="inpWrapper">
<input type="text" name="mediaName" ng-model="mediaValues.mediaName" class="form-control" required ng-class="{'submitted': submitted}" placeholder="Media Name">
<div ng-messages='mediaForm.mediaName.$error' ng-if='submitted && mediaForm.mediaName.$invalid'>
<div ng-message='required' class="has-error">Please enter the media Name</div>
</div>
</div>
<div class="inpWrapper">
<input type="text" ng-model="mediaValues.mediaDesc" name="mediaDesc" class="form-control" required ng-class="{'submitted': submitted}" placeholder="Media Description" />
<div ng-messages='mediaForm.mediaDesc.$error' ng-if='submitted && mediaForm.mediaDesc.$invalid'>
<div ng-message='required' class="has-error">Please enter the media Description</div>
</div>
</div>
<div class="inpWrapper" ng-show="mediaValues.fileupload == 'image'">
<input type="file" ngf-select ng-model="picFile" name="file" accept="image/*" ngf-max-size="2MB" required ngf-model-invalid="errorFile">
<div ng-show="mediaForm.file.$error.maxSize">File too large max 2M</div>
<img ng-show="myForm.file.$valid" ngf-thumbnail="picFile" class="thumb"/>
<button ng-click="picFile = ''" ng-show="picFile">Remove</button>
<div class="progress" ng-show="picFile.progress >= 0">
<div style="width:{{picFile.progress}}%;" class="progress-bar">{{picFile.progress}}%</div>
</div>
<span ng-show="picFile.result">Upload Successful</span>
<span class="err" ng-show="errorMsg">{{errorMsg}}</span>
</div>
<div class="inpWrapper" ng-show="mediaValues.fileupload == 'audio'">
<input type="file" ngf-select ng-model="picFile1" name="file" accept="audio/*" ngf-max-size="2MB" required ngf-model-invalid="errorFile">
<div ng-show="mediaForm.file.$error.maxSize">File too large max 2M</div>
<audio controls ng-show="mediaForm.file.$valid" ngf-src="picFile1" ngf-accept="audio/*" ></audio>
<button ng-click="picFile1 = ''" ng-show="picFile1">Remove</button>
<div class="progress" ng-show="picFile1.progress >= 0">
<div style="width:{{picFile1.progress}}%;" class="progress-bar">{{picFile1.progress}}%</div>
</div>
<span ng-show="picFile1.result">Upload Successful</span>
<span class="err" ng-show="errorMsg">{{errorMsg}}</span>
</div>
<div class="inpWrapper" ng-if="mediaValues.fileupload == 'video'">
<input type="file" ngf-select ng-model="picFile" name="file" accept="video/*" ngf-max-size="2MB" required ngf-model-invalid="errorFile">
<div ng-show="mediaForm.file.$error.maxSize">File too large max 2M</div>
<video controls ng-show="mediaForm.file.$valid" ngf-src="picFile" ngf-accept="video/*" ></video>
<button ng-click="picFile = ''" ng-show="picFile">Remove</button>
<div class="progress" ng-show="picFile.progress >= 0">
<div style="width:{{picFile.progress}}%;" class="progress-bar">{{picFile.progress}}%</div>
</div>
<span ng-show="picFile.result">Upload Successful</span>
<span class="err" ng-show="errorMsg">{{errorMsg}}</span>
</div>
<div class="inpWrapper">
<div class="row">
<div class="col-md-2 col-sm-2 col-xs-6">
<button class="success transparentBtn" ng-disabled="!mediaForm.$valid" ng-click="uploadPic(picFile)">Save</button>
</div>
<div class="col-md-2 col-sm-2 col-xs-6">
<input type="button" class="cancel transparentBtn" data-dismiss="modal" ng-click="reset();" value="Cancel"/>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</body>
什么例外？它没有读取上传文件名。在服务器端？你能详细说明错误的细节吗？可能是JSFIDLE或屏幕截图。什么例外？它没有读取上传文件名。在服务器端？您能详细说明错误的细节吗？可能是JSFIDLE或屏幕截图。
//inject angular file upload directives and services.
var app = angular.module('fileUpload', ['ngFileUpload']);
app.controller('mediaController', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
$scope.mediaValues = {};
var defaultObj = $scope.mediaValues;
$scope.mediaValues.fileupload = 'image';
$scope.uploadPic = function(file) {
$scope.submitted = true;
var formName = $scope.mediaValues.mediaName;
var desc = $scope.mediaValues.mediaName;
if($scope.submitted && $scope.mediaForm.$valid ){
file.upload = Upload.upload({
url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
headers: {
'Content-Type': 'multipart/form-data'
},
method: 'POST',
data: {username: formName, file: file}
});
file.upload.then(function (response) {
$timeout(function () {
file.result = response.data;
});
}, function (response) {
if (response.status > 0)
$scope.errorMsg = response.status + ': ' + response.data;
}, function (evt) {
// Math.min is to fix IE which reports 200% sometimes
file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
});
}
}
$scope.UploadFunction = function(value){
$scope.mediaValues.fileupload = value;
alert($scope.mediaValues.fileupload);
};
$scope.reset = function(picFile){
var uploadType = $scope.mediaValues.fileupload;
/*alert(uploadType);
if(uploadType == 'image')
$scope.picFile = null;
else
$scope.picFile == '';*/
$scope.mediaValues = angular.copy(defaultObj);
$scope.submitted = false;
$scope.mediaForm.$setPristine();
}
}]);