使用AngularJS上传文件

这是我的HTML表单:

<form name="myForm" ng-submit="">
<input ng-model='file' type="file"/>
<input type="submit" value='Submit'/>
</form>

我想从本地机器上传一个图像，并想读取上传文件的内容。所有这些我都想用AngularJS来做。

当我试图打印$scope.file的值时，它是未定义的。

836710 次浏览
小开

下面是文件上传的工作示例:

http://jsfiddle.net/vishalvasani/4hqVu/

在这个函数中

setFiles

从视图更新控制器中的文件数组

或

你可以使用AngularJS检查jQuery文件上传

http://blueimp.github.io/jQuery-File-Upload/angularjs.html

小开

http://jsfiddle.net/vishalvasani/4hqVu/在chrome和IE中工作良好(如果你在background-image中稍微更新CSS)。

用于更新进度条 
 scope.progress = Math.round(evt.loaded * 100 / evt.total)

但是在FireFox中，angular的[percent]数据没有在DOM中成功更新，尽管文件上传成功。

小开
最佳答案

这里的一些答案建议使用FormData()，但不幸的是，这是一个浏览器对象，在Internet Explorer 9及以下版本中不可用。如果你需要支持这些旧的浏览器，你将需要一个备份策略，如使用<iframe>或Flash。

已经有很多Angular.js模块来执行文件上传。这两种浏览器都明确支持旧浏览器:

还有一些其他的选择:

  • https://github.com/nervgh/angular-file-upload/ < a href = " https://github.com/nervgh/angular-file-upload/ " > < / >
  • https://github.com/uor/angular-file < a href = " https://github.com/uor/angular-file " > < / >
  • https://github.com/twilson63/ngUpload < a href = " https://github.com/twilson63/ngUpload " > < / >
  • https://github.com/uploadcare/angular-uploadcare < a href = " https://github.com/uploadcare/angular-uploadcare " > < / >

其中一个应该适合你的项目，或者可能会给你一些关于如何自己编写代码的见解。

小开

最简单的是使用HTML5 API，即FileReader

HTML非常简单:

<input type="file" id="file" name="file"/>
<button ng-click="add()">Add</button>

在你的控制器中定义'add'方法:

$scope.add = function() {
var f = document.getElementById('file').files[0],
r = new FileReader();


r.onloadend = function(e) {
var data = e.target.result;
//send your binary data via $http or $resource or do anything else with it
}


r.readAsBinaryString(f);
}

浏览器兼容性

桌面浏览器

移动浏览器

< p > Firefox(壁虎)32, Chrome 3, 歌剧* 11.5, Safari 6.1 < / p >

注意:readAsBinaryString()方法已弃用，readAsArrayBuffer()应该被使用。

小开

你可以使用flow.js实现良好的文件和文件夹上传。

https://github.com/flowjs/ng-flow

点击这里查看演示

< a href = " http://flowjs.github。io / ng-flow noreferrer“rel = > http://flowjs.github.io/ng-flow/ < / >

它不支持IE7, IE8, IE9，所以你最终必须使用兼容层

https://github.com/flowjs/fusty-flow.js

小开

我尝试了@ anoz(正确答案)给出的所有替代方案…最好的解决方案是https://github.com/danialfarid/angular-file-upload

一些特点:

  • 进步
  • 多文件
  • 字段
  • 旧浏览器(IE8-9)

这对我来说很好。你只需要注意说明。

在服务器端，我使用NodeJs, Express 4和Multer中间件来管理多部分请求。

小开

你可以考虑用IaaS来上传文件，比如Uploadcare。它有一个Angular包:https://github.com/uploadcare/angular-uploadcare

从技术上讲，它被实现为一个指令，提供了不同的上传选项，以及小部件中上传图像的操作:

<uploadcare-widget
ng-model="object.image.info.uuid"
data-public-key="YOURKEYHERE"
data-locale="en"
data-tabs="file url"
data-images-only="true"
data-path-value="true"
data-preview-step="true"
data-clearable="true"
data-multiple="false"
data-crop="400:200"
on-upload-complete="onUCUploadComplete(info)"
on-widget-ready="onUCWidgetReady(widget)"
value="\{\{ object.image.info.cdnUrl }}"
/>

更多的配置选项可以使用:https://uploadcare.com/widget/configure/

小开

简单的指令

Html:

<input type="file" file-upload multiple/>

JS:

app.directive('fileUpload', function () {
return {
scope: true,        //create a new scope
link: function (scope, el, attrs) {
el.bind('change', function (event) {
var files = event.target.files;
//iterate files since 'multiple' may be specified on the element
for (var i = 0;i<files.length;i++) {
//emit event upward
scope.$emit("fileSelected", { file: files[i] });
}
});
}
};

在指令中，我们确保创建了一个新的作用域，然后监听对文件输入元素所做的更改。当检测到更改时，以文件对象作为参数向所有祖先作用域(向上)发出事件。

在你的控制器中:

$scope.files = [];


//listen for the file selected event
$scope.$on("fileSelected", function (event, args) {
$scope.$apply(function () {
//add the file object to the scope's files collection
$scope.files.push(args.file);
});
});

然后在ajax调用中:

data: { model: $scope.model, files: $scope.files }

http://shazwazza.com/post/uploading-files-and-json-data-in-the-same-request-with-angular-js/

小开

这应该是对@jquery-guru的答案的更新/评论，但由于我没有足够的代表，它将在这里。它修复了现在由代码生成的错误。

https://jsfiddle.net/vzhrqotw/

变化主要是:

FileUploadCtrl.$inject = ['$scope']
function FileUploadCtrl(scope) {

:

app.controller('FileUploadCtrl', function($scope)
{

如果需要，请随意搬到更合适的地方。

小开

我想这是angular文件的上传:

ng-file-upload

用来上传文件的轻量级Angular JS指令。

下面是演示页面。特性

  • 支持上传进度，取消/中止上传，同时进行，文件拖放(html5)，目录拖放(webkit)， CORS, PUT(html5)/POST方法，文件类型和大小验证，显示所选图像/音频/视频的预览。
  • 跨浏览器文件上传和FileReader (HTML5和非HTML5)与Flash polyfill FileAPI。允许在上传文件之前进行客户端验证/修改
  • 直接上传到数据库服务CouchDB, imgur等…与文件的内容类型使用Upload.http()。这将为angular http POST/PUT请求启用进度事件。
  • 单独的shim文件，FileAPI文件按需加载非HTML5代码，这意味着如果你只是需要HTML5支持，没有额外的加载/代码。
  • 轻量级使用常规的$http上传(非html5浏览器使用shim)，所以angular的$http特性都可用

https://github.com/danialfarid/ng-file-upload

小开

你可以使用安全且快速的FormData对象:

// Store the file object when input field is changed
$scope.contentChanged = function(event){
if (!event.files.length)
return null;


$scope.content = new FormData();
$scope.content.append('fileUpload', event.files[0]);
$scope.$apply();
}


// Upload the file over HTTP
$scope.upload = function(){
$http({
method: 'POST',
url: '/remote/url',
headers: {'Content-Type': undefined },
data: $scope.content,
}).success(function(response) {
// Uploading complete
console.log('Request finished', response);
});
}
小开

以上接受的答案不兼容浏览器。如果有人有兼容性问题，试试这个。

小提琴

视图代码

 <div ng-controller="MyCtrl">
<input type="file" id="file" name="file"/>
<br>
<button ng-click="add()">Add</button>
<p>\{\{data}}</p>
</div>

控制器代码

var myApp = angular.module('myApp',[]);


function MyCtrl($scope) {
$scope.data = 'none';
$scope.add = function(){
var f = document.getElementById('file').files[0],
r = new FileReader();
r.onloadend = function(e){
var binary = "";
var bytes = new Uint8Array(e.target.result);
var length = bytes.byteLength;


for (var i = 0; i < length; i++)
{
binary += String.fromCharCode(bytes[i]);
}


$scope.data = (binary).toString();


alert($scope.data);
}
r.readAsArrayBuffer(f);
}
}
小开

这是现代浏览器的方式，没有第三方库。适用于所有最新的浏览器。

 app.directive('myDirective', function (httpPostFactory) {
return {
restrict: 'A',
scope: true,
link: function (scope, element, attr) {


element.bind('change', function () {
var formData = new FormData();
formData.append('file', element[0].files[0]);
httpPostFactory('upload_image.php', formData, function (callback) {
// recieve image name to use in a ng-src
console.log(callback);
});
});


}
};
});


app.factory('httpPostFactory', function ($http) {
return function (file, data, callback) {
$http({
url: file,
method: "POST",
data: data,
headers: {'Content-Type': undefined}
}).success(function (response) {
callback(response);
});
};
});

HTML:

<input data-my-Directive type="file" name="file">

PHP:

if (isset($_FILES['file']) && $_FILES['file']['error'] == 0) {


// uploads image in the folder images
$temp = explode(".", $_FILES["file"]["name"]);
$newfilename = substr(md5(time()), 0, 10) . '.' . end($temp);
move_uploaded_file($_FILES['file']['tmp_name'], 'images/' . $newfilename);


// give callback to your angular code with the image src name
echo json_encode($newfilename);
}

js小提琴(仅前端) https://jsfiddle.net/vince123/8d18tsey/31/ < / p >

小开

我已经阅读了所有的线程，HTML5 API解决方案看起来最好。但它会改变我的二进制文件，以一种我没有调查过的方式破坏它们。最适合我的解决方案是:

HTML:

<input type="file" id="msds" ng-model="msds" name="msds"/>
<button ng-click="msds_update()">
Upload
</button>

JS:

msds_update = function() {
var f = document.getElementById('msds').files[0],
r = new FileReader();
r.onloadend = function(e) {
var data = e.target.result;
console.log(data);
var fd = new FormData();
fd.append('file', data);
fd.append('file_name', f.name);
$http.post('server_handler.php', fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(){
console.log('success');
})
.error(function(){
console.log('error');
});
};
r.readAsDataURL(f);
}

服务器端(PHP):

$file_content = $_POST['file'];
$file_content = substr($file_content,
strlen('data:text/plain;base64,'));
$file_content = base64_decode($file_content);
小开

您的文件和json数据同时上传。

// FIRST SOLUTION
var _post = function (file, jsonData) {
$http({
url: your url,
method: "POST",
headers: { 'Content-Type': undefined },
transformRequest: function (data) {
var formData = new FormData();
formData.append("model", angular.toJson(data.model));
formData.append("file", data.files);
return formData;
},
data: { model: jsonData, files: file }
}).then(function (response) {
;
});
}
// END OF FIRST SOLUTION


// SECOND SOLUTION
// If you can add plural file and  If above code give an error.
// You can try following code
var _post = function (file, jsonData) {
$http({
url: your url,
method: "POST",
headers: { 'Content-Type': undefined },
transformRequest: function (data) {
var formData = new FormData();
formData.append("model", angular.toJson(data.model));
for (var i = 0; i < data.files.length; i++) {
// add each file to
// the form data and iteratively name them
formData.append("file" + i, data.files[i]);
}
return formData;
},
data: { model: jsonData, files: file }
}).then(function (response) {
;
});
}
// END OF SECOND SOLUTION

小开

超文本标记语言

<html>
<head></head>


<body ng-app = "myApp">


<form ng-controller = "myCtrl">
<input type = "file" file-model="files" multiple/>
<button ng-click = "uploadFile()">upload me</button>
<li ng-repeat="file in files">\{\{file.name}}</li>
</form>

脚本

  <script src =
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
angular.module('myApp', []).directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('change', function(){
$parse(attrs.fileModel).assign(scope,element[0].files)
scope.$apply();
});
}
};
}]).controller('myCtrl', ['$scope', '$http', function($scope, $http){




$scope.uploadFile=function(){
var fd=new FormData();
console.log($scope.files);
angular.forEach($scope.files,function(file){
fd.append('file',file);
});
$http.post('http://localhost:1337/mediaobject/upload',fd,
{
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
}).success(function(d)
{
console.log(d);
})
}
}]);


</script>

小开

我知道这是一个较晚的条目，但我已经创建了一个简单的上传指令。你可以在任何时间工作!

<input type="file" multiple ng-simple-upload web-api-url="/api/Upload" callback-fn="myCallback" />

ng-simple-upload更多的Github使用Web API的例子。

小开

使用onchange事件将输入文件元素传递给函数。

<input type="file" onchange="angular.element(this).scope().fileSelected(this)" />

因此，当用户选择一个文件时，您就有了对该文件的引用，而不需要用户单击“添加”或“上传”按钮。

$scope.fileSelected = function (element) {
var myFileSelected = element.files[0];
};
小开

超文本标记语言

<input type="file" id="file" name='file' onchange="angular.element(this).scope().profileimage(this)" />

添加'profileimage()'方法到你的控制器

    $scope.profileimage = function(selectimage) {
console.log(selectimage.files[0]);
var selectfile=selectimage.files[0];
r = new FileReader();
r.onloadend = function (e) {
debugger;
var data = e.target.result;


}
r.readAsBinaryString(selectfile);
}
小开

简单地说

in Html -只添加以下代码

     <form name="upload" class="form" data-ng-submit="addFile()">
<input type="file" name="file" multiple
onchange="angular.element(this).scope().uploadedFile(this)" />
<button type="submit">Upload </button>
</form>

控制器中的 .输出说明 -当你单击“上传文件按钮”时，这个函数被调用。它将上传文件。你可以安慰它。

$scope.uploadedFile = function(element) {
$scope.$apply(function($scope) {
$scope.files = element.files;
});
}

add more in controllers -下面的代码添加到函数中。此函数在单击使用"点击api (POST)"的按钮时被调用。它将发送文件(上传)和表单数据到后端。

var url = httpURL + "/reporttojson"
var files=$scope.files;


for ( var i = 0; i < files.length; i++)
{
var fd = new FormData();
angular.forEach(files,function(file){
fd.append('file',file);
});
var data ={
msg : message,
sub : sub,
sendMail: sendMail,
selectUsersAcknowledge:false
};


fd.append("data", JSON.stringify(data));
$http.post(url, fd, {
withCredentials : false,
headers : {
'Content-Type' : undefined
},
transformRequest : angular.identity
}).success(function(data)
{
toastr.success("Notification sent successfully","",{timeOut: 2000});
$scope.removereport()
$timeout(function() {
location.reload();
}, 1000);


}).error(function(data)
{
toastr.success("Error in Sending Notification","",{timeOut: 2000});
$scope.removereport()
});
}

在这种情况下…我添加了下面的代码作为表单数据

var data ={
msg : message,
sub : sub,
sendMail: sendMail,
selectUsersAcknowledge:false
};
小开

默认情况下，<input type=file>元素不能与ng-model指令元素一起使用。它需要一个自定义指令:

使用ng-model1 < a href = " https://stackoverflow.com/a/43074638/5535245 " > < / >工作的select-ng-files指令的工作演示

angular.module("app",[]);


angular.module("app").directive("selectNgFiles", function() {
return {
require: "ngModel",
link: function postLink(scope,elem,attrs,ngModel) {
elem.on("change", function(e) {
var files = elem[0].files;
ngModel.$setViewValue(files);
})
}
}
});
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
<h1>AngularJS Input `type=file` Demo</h1>
    

<input type="file" select-ng-files ng-model="fileList" multiple>
    

<h2>Files</h2>
<div ng-repeat="file in fileList">
\{\{file.name}}
</div>
</body>

$http.post从文件列表

$scope.upload = function(url, fileList) {
var config = { headers: { 'Content-Type': undefined },
transformResponse: angular.identity
};
var promises = fileList.map(function(file) {
return $http.post(url, file, config);
});
return $q.all(promises);
};

当发送带有文件对象的POST时，设置'Content-Type': undefined是很重要的。然后，XHR发送方法将检测文件对象并自动设置内容类型。

小开 
<form id="csv_file_form" ng-submit="submit_import_csv()" method="POST" enctype="multipart/form-data">
<input ng-model='file' type="file"/>
<input type="submit" value='Submit'/>
</form>

在angularJS控制器中

$scope.submit_import_csv = function(){


var formData = new FormData(document.getElementById("csv_file_form"));
console.log(formData);


$.ajax({
url: "import",
type: 'POST',
data:  formData,
mimeType:"multipart/form-data",
contentType: false,
cache: false,
processData:false,
success: function(result, textStatus, jqXHR)
{
console.log(result);
}
});


return false;
}
小开 
app.directive('ngUpload', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {


var options = {};
options.enableControls = attrs['uploadOptionsEnableControls'];


// get scope function to execute on successful form upload
if (attrs['ngUpload']) {


element.attr("target", "upload_iframe");
element.attr("method", "post");


// Append a timestamp field to the url to prevent browser caching results
element.attr("action", element.attr("action") + "?_t=" + new Date().getTime());


element.attr("enctype", "multipart/form-data");
element.attr("encoding", "multipart/form-data");


// Retrieve the callback function
var fn = attrs['ngUpload'].split('(')[0];
var callbackFn = scope.$eval(fn);
if (callbackFn == null || callbackFn == undefined || !angular.isFunction(callbackFn))
{
var message = "The expression on the ngUpload directive does not point to a valid function.";
// console.error(message);
throw message + "\n";
}


// Helper function to create new  i frame for each form submission
var addNewDisposableIframe = function (submitControl) {
// create a new iframe
var iframe = $("<iframe id='upload_iframe' name='upload_iframe' border='0' width='0' height='0' style='width: 0px; height: 0px;
border: none; display: none' />");


// attach function to load event of the iframe
iframe.bind('load', function () {


// get content - requires jQuery
var content = iframe.contents().find('body').text();


// execute the upload response function in the active scope
scope.$apply(function () { callbackFn(content, content !== "" /* upload completed */); });


// remove iframe
if (content != "") // Fixes a bug in Google Chrome that dispose the iframe before content is ready.
setTimeout(function () { iframe.remove(); }, 250);




submitControl.attr('disabled', null);
submitControl.attr('title', 'Click to start upload.');
});


// add the new iframe to application
element.parent().append(iframe);
};


// 1) get the upload submit control(s) on the form (submitters must be decorated with the 'ng-upload-submit' class)
// 2) attach a handler to the controls' click event
$('.upload-submit', element).click(
function () {


addNewDisposableIframe($(this) /* pass the submit control */);


scope.$apply(function () { callbackFn("Please wait...", false /* upload not completed */); });






var enabled = true;
if (options.enableControls === null || options.enableControls === undefined || options.enableControls.length >= 0) {
// disable the submit control on click
$(this).attr('disabled', 'disabled');
enabled = false;
}


$(this).attr('title', (enabled ? '[ENABLED]: ' : '[DISABLED]: ') + 'Uploading, please wait...');


// submit the form
$(element).submit();
}
).attr('title', 'Click to start upload.');
}
else
alert("No callback function found on the ngUpload directive.");
}
};
});






<form class="form form-inline" name="uploadForm" id="uploadForm"
ng-upload="uploadForm12"  action="rest/uploadHelpFile"  method="post"
enctype="multipart/form-data" style="margin-top: 3px;margin-left:
6px"> <button type="submit" id="mbUploadBtn" class="upload-submit"
ng-hide="true"></button> </form>


@RequestMapping(value = "/uploadHelpFile", method =
RequestMethod.POST)   public @ResponseBody String
uploadHelpFile(@RequestParam(value = "file") CommonsMultipartFile[]
file,@RequestParam(value = "fileName") String
fileName,@RequestParam(value = "helpFileType") String
helpFileType,@RequestParam(value = "helpFileName") String
helpFileName) { }
小开

我们使用了HTML, CSS和AngularJS。下面的例子展示了如何使用AngularJS上传文件。

<html>


<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>


<body ng-app = "myApp">


<div ng-controller = "myCtrl">
<input type = "file" file-model = "myFile"/>
<button ng-click = "uploadFile()">upload me</button>
</div>


<script>
var myApp = angular.module('myApp', []);


myApp.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;


element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);


myApp.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function(file, uploadUrl){
var fd = new FormData();
fd.append('file', file);


$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})


.success(function(){
})


.error(function(){
});
}
}]);


myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
$scope.uploadFile = function(){
var file = $scope.myFile;


console.log('file is ' );
console.dir(file);


var uploadUrl = "/fileUpload";
fileUpload.uploadFileToUrl(file, uploadUrl);
};
}]);


</script>


</body>
</html>
小开

工作示例使用简单指令(ng-file-model):

.directive("ngFileModel", [function () {
return {
$scope: {
ngFileModel: "="
},
link: function ($scope:any, element, attributes) {
element.bind("change", function (changeEvent:any) {
var reader = new FileReader();
reader.onload = function (loadEvent) {
$scope.$apply(function () {
$scope.ngFileModel = {
lastModified: changeEvent.target.files[0].lastModified,
lastModifiedDate: changeEvent.target.files[0].lastModifiedDate,
name: changeEvent.target.files[0].name,
size: changeEvent.target.files[0].size,
type: changeEvent.target.files[0].type,
data: changeEvent.target.files[0]
};
});
}
reader.readAsDataURL(changeEvent.target.files[0]);
});
}
}
}])

并使用FormData在函数中上传文件。

var formData = new FormData();
formData.append("document", $scope.ngFileModel.data)
formData.append("user_id", $scope.userId)

所有学分 https://github.com/mistralworks/ng-file-model < / p >

我有一个小问题，你可以在这里检查: https://github.com/mistralworks/ng-file-model/issues/7 < / p >

最后，这里是一个fork repo: https://github.com/okasha93/ng-file-model/blob/patch-1/ng-file-model.js

小开

我能够通过使用下面的代码使用AngularJS上传文件:

根据你的问题，需要为函数ngUploadFileUpload传递的参数的file是$scope.file。

这里的关键点是使用transformRequest: []。这将防止$http与文件内容混淆。

       function getFileBuffer(file) {
var deferred = new $q.defer();
var reader = new FileReader();
reader.onloadend = function (e) {
deferred.resolve(e.target.result);
}
reader.onerror = function (e) {
deferred.reject(e.target.error);
}


reader.readAsArrayBuffer(file);
return deferred.promise;
}


function ngUploadFileUpload(endPointUrl, file) {


var deferred = new $q.defer();
getFileBuffer(file).then(function (arrayBuffer) {


$http({
method: 'POST',
url: endPointUrl,
headers: {
"accept": "application/json;odata=verbose",
'X-RequestDigest': spContext.securityValidation,
"content-length": arrayBuffer.byteLength
},
data: arrayBuffer,
transformRequest: []
}).then(function (data) {
deferred.resolve(data);
}, function (error) {
deferred.reject(error);
console.error("Error", error)
});
}, function (error) {
console.error("Error", error)
});


return deferred.promise;


}
小开

该代码将帮助插入文件

<body ng-app = "myApp">
<form ng-controller="insert_Ctrl"  method="post" action=""  name="myForm" enctype="multipart/form-data" novalidate>
<div>
<p><input type="file" ng-model="myFile" class="form-control"  onchange="angular.element(this).scope().uploadedFile(this)">
<span style="color:red" ng-show="(myForm.myFile.$error.required&&myForm.myFile.$touched)">Select Picture</span>
</p>
</div>
<div>
<input type="button" name="submit"  ng-click="uploadFile()" class="btn-primary" ng-disabled="myForm.myFile.$invalid" value="insert">
</div>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="insert.js"></script>
</body>

insert.js

var app = angular.module('myApp',[]);
app.service('uploadFile', ['$http','$window', function ($http,$window) {
this.uploadFiletoServer = function(file,uploadUrl){
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(data){
alert("insert successfull");
$window.location.href = ' ';//your window location
})
.error(function(){
alert("Error");
});
}
}]);
app.controller('insert_Ctrl',  ['$scope', 'uploadFile', function($scope, uploadFile){
$scope.uploadFile = function() {
$scope.myFile = $scope.files[0];
var file = $scope.myFile;
var url = "save_data.php";
uploadFile.uploadFiletoServer(file,url);
};
$scope.uploadedFile = function(element) {
var reader = new FileReader();
reader.onload = function(event) {
$scope.$apply(function($scope) {
$scope.files = element.files;
$scope.src = event.target.result
});
}
reader.readAsDataURL(element.files[0]);
}
}]);

save_data.php

<?php
require "dbconnection.php";
$ext = pathinfo($_FILES['file']['name'],PATHINFO_EXTENSION);
$image = time().'.'.$ext;
move_uploaded_file($_FILES["file"]["tmp_name"],"upload/".$image);
$query="insert into test_table values ('null','$image')";
mysqli_query($con,$query);
?>
小开

这是

file.html

<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app = "app">
<div ng-controller = "myCtrl">
<input type = "file" file-model = "myFile"/>
<button ng-click = "uploadFile()">upload me</button>
</div>
</body>
<script src="controller.js"></script>
</html>

controller.js

     var app = angular.module('app', []);


app.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function(file, uploadUrl){
var fd = new FormData();
fd.append('file', file);


$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
}).success(function(res){
console.log(res);
}).error(function(error){
console.log(error);
});
}
}]);


app.controller('fileCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
$scope.uploadFile = function(){
var file = $scope.myFile;


console.log('file is ' );
console.dir(file);


var uploadUrl = "/fileUpload.php";  // upload url stands for api endpoint to handle upload to directory
fileUpload.uploadFileToUrl(file, uploadUrl);
};
}]);


</script>

fileupload.php

  <?php
$ext = pathinfo($_FILES['file']['name'],PATHINFO_EXTENSION);
$image = time().'.'.$ext;
move_uploaded_file($_FILES["file"]["tmp_name"],__DIR__. ' \\'.$image);
?>
小开

上传文件

<input type="file" name="resume" onchange="angular.element(this).scope().uploadResume()" ng-model="fileupload" id="resume" />




$scope.uploadResume = function () {
var f = document.getElementById('resume').files[0];
$scope.selectedResumeName = f.name;
$scope.selectedResumeType = f.type;
r = new FileReader();


r.onloadend = function (e) {
$scope.data = e.target.result;
}


r.readAsDataURL(f);


};

下载文件:

          <a href="\{\{applicant.resume}}" download> download resume</a>


var app = angular.module("myApp", []);


app.config(['$compileProvider', function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);


}]);

提交答案