发表新帖
发表新帖

File Upload using AngularJS

前端 未结
关注
29 2028
野趣味
野趣味 2020-11-21 07:24

Here is my HTML form:
相关标签:
29条回答
  • 挽巷
    2020-11-21 08:20

    The code will helps to insert file 

    <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);
?>
    0 讨论(0)
  • 别跟我提以往
    2020-11-21 08:21

    The easiest is to use HTML5 API, namely FileReader

    HTML is pretty straightforward:

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

    In your controller define 'add' method:

    $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);
}

    Browser Compatibility

    Desktop Browsers

    Edge 12, Firefox(Gecko) 3.6(1.9.2), Chrome 7, Opera* 12.02, Safari 6.0.2

    Mobile Browsers

    Firefox(Gecko) 32, Chrome 3, Opera* 11.5, Safari 6.1

    Note : readAsBinaryString() method is deprecated and readAsArrayBuffer() should be used instead.

    0 讨论(0)
  • 走了就别回头了
    2020-11-21 08:22

    You can achieve nice file and folder upload using flow.js.

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

    Check out a demo here

    http://flowjs.github.io/ng-flow/

    It doesn't support IE7, IE8, IE9, so you'll eventually have to use a compatibility layer

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

    0 讨论(0)
  • 旧时难觅i
    2020-11-21 08:23

    Some of the answers here propose using FormData(), but unfortunately that is a browser object not available in Internet Explorer 9 and below. If you need to support those older browsers, you will need a backup strategy such as using <iframe> or Flash.

    There are already many Angular.js modules to perform file uploading. These two have explicit support for older browsers:

    • https://github.com/leon/angular-upload - uses iframes as a fallback
    • https://github.com/danialfarid/ng-file-upload - uses FileAPI/Flash as a fallback

    And some other options:

    • https://github.com/nervgh/angular-file-upload/
    • https://github.com/uor/angular-file
    • https://github.com/twilson63/ngUpload
    • https://github.com/uploadcare/angular-uploadcare

    One of these should fit your project, or may give you some insight into how to code it yourself.

    0 讨论(0)
  • 情歌与酒
    2020-11-21 08:24

    this works

    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);
  ?>
    0 讨论(0)
 看不清?
提交回复
热议问题