没有任何插件的角度js文件上传

-5

我想要使用angular进行多次上传的代码。在上传文件之前，在此任务中显示名称和大小。（没有任何插件）。该代码也适用于ie9。没有任何插件的角度js文件上传

2015-01-09 Dass Prakash

JS：

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

app.controller('fileCtrl',['$scope', function ($scope) { 
$scope.detail = false; 

var dropArea = document.getElementById("dropbox"); 

// initializing event handlers 
dropArea.addEventListener("dragenter", function (evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 
}, false); 
dropArea.addEventListener("dragleave", function(){ 
    evt.stopPropagation(); 
    evt.preventDefault(); 
}, false); 
dropArea.addEventListener("dragover", function(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 
}, false); 

dropArea.addEventListener("drop", function(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 
    var files = evt.dataTransfer.files; 
    if (files.length > 0) { 
     $scope.$apply(function(){ 
      $scope.files = []; 
      for (var i = 0; i < files.length; i++) { 
       $scope.files.push(files[i]); 
      } 
     }); 
    } 
}, false); 

//Drag and drop functionality 
$scope.setFiles = function(element) { 
    $scope.$apply(function($scope) { 
     $scope.files = []; 
     for (var i = 0; i < element.files.length; i++) { 
      $scope.files.push(element.files[i]) 
     } 
     $scope.progressVisible = false 
    }); 
}; 

//Function to upload file to the server 
$scope.uploadFile = function() { 
    var formData = new FormData(); 
    for (var i in $scope.files) { 
     formData.append("Files", $scope.files[i]); 
    } 
    var request = new XMLHttpRequest(); 
    request.upload.addEventListener("progress", uploadProgress, false); 
    request.addEventListener("load", transferComplete, false); 
    request.addEventListener("error", transferFailed, false); 
    request.addEventListener("abort", transferCanceled, false); 
    request.open("POST", "http://localhost:63342/fileupload",true); 
    $scope.progressVisible = true; 
    request.send(formData); 
}; 

//Function to calculate size of file being uploading 
function uploadProgress(evt) { 
    $scope.$apply(function(){ 
     if (evt.lengthComputable) { 
      $scope.progress = Math.round(evt.loaded * 100/evt.total) 
     } else { 
      $scope.progress = 'unable to compute'; 
     } 
    }); 
} 

//Function to display response from server 
function transferComplete(evt) { 
    alert(evt.target.responseText) 
}; 

//Function to display response 
function transferFailed(evt) { 
    alert(" Error in attempting to upload the file."); 
}; 

//Function to display response 
function transferCanceled(evt) { 
    $scope.$apply(function(){ 
     $scope.progressVisible = false 
    }); 
    alert("The upload has been canceled by the user.") 
}

}]）;

HTML：

<!DOCTYPE html> 
<html ng-app="fileApp"> 
    <head lang="en"> 
     <meta charset="UTF-8"> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 

     <style type="text/css"> 
      #dropbox { 
       width: 400px; 
       height: 200px; 
       border: dashed; 
       border-radius: 4px; 
       background-color: #bbbbbb; 
       text-align: center; 
       font-size: 40px; 
      } 
      .myImage { 
       float: right; 
       height: 40px; 
       width: 40px 
      } 
      .progress-bar { 
       width: 300px; height: 14px; 
       border-radius: 10px; 
       border: 1px solid #CCC; 
       background-color: #105cb6; 
      } 
      .name { 
       float: right; 
       color: #ffffff 
      } 
      .uploaded { 
       padding: 0; 
       height: 14px; 
       border-radius: 10px; 
       background-color: #00b3ee; 
      } 

      #dropbox:hover { 
       background-color: aquamarine; 
      } 
      .panel-footer { 
       background-color: #000000; 
       height: 60px; 
      } 
     </style> 
     <title>File Upload Assignment</title> 
    </head> 
    <body ng-controller="fileCtrl"> 
     <div class="container"> 
      <div class="panel panel-primary"> 
       <div class="panel-heading"> 
        <b>Upload Files</b> 
       </div> 
       <div class="panel-body"> 
        <div class="row"> 
         <div class="col-md-8"> 
          <form action="" method="post" name="fileUploadForm" novalidate="novalidate"> 
           <div class="form-group"> 
            <label for="fileToUpload">Select a File to Upload</label><br /> 
            <input type="file" ng-model-instant id="fileToUpload" onchange="angular.element(this).scope().setFiles(this)"/> 
           </div> 
           <div id="dropbox" ng-class="dropClass"> 
            <b>Drop your file here</b> 
           </div> 

           <div ng-show="files.length"> 
            <div ng-repeat="file in files.slice(0)"> 
             <span>{{file.webkitRelativePath || file.name}}</span> 
             (<span ng-switch="file.size > 1024*1024"> 
            <span ng-switch-when="true">{{file.size/1024/1024 | number:2}} MB</span> 
            <span ng-switch-default>{{file.size/1024 | number:2}} kB</span> 
           </span>) 
            </div> 
            <input type="submit" class="btn btn-success" ng-click="uploadFile()" value="Upload" /> 
            <input type="button" class="btn btn-primary" ng-click="detail=!detail" value="Preview"/> 
            <div ng-repeat="file in files" ng-show="detail" class="well well-sm"> 
             <b> 
              <span>File Name : {{file.name}} </span><br> 
              <span>File Size : {{file.size}}kb</span><br> 
              <span>File Type : {{file.type}} </span><br> 
             </b> 
            </div> 
            <div ng-show="progressVisible"> 
             <div class="percent">{{progress}}%</div> 
             <div class="progress-bar"> 
              <div class="uploaded" ng-style="{'width': progress+'%'}"></div> 
             </div> 
            </div> 
           </div> 
          </form> 
         </div> 
         <div class="col-md-4" style=" font-style: italic;"> 
          <b> 
          <p>1.Select one or multiple files from your computer.</p> 
          <p>2.Drag and Drop it inside the browse rectangular area.</p> 
          <p>3.To view the info of uploaded file/files click on preview button.</p> 
          <p>4.Click on upload button to submit the file.</p> 
          </b> 
         </div> 
        </div> 
       </div> 

       <div class="panel-footer" > 
        <div class="row"> 
         <div class="col-md-10" style="color: #ffffff;float: right"> 
          <img class="myImage" src="https://lh6.googleusercontent.com/-PFdmm2zza80/VDtlWHc2v-I/AAAAAAAAAIQ/eZY1FQ6TVQk/s132-no/57a8fc23-8b26-42dd-8b8b-fb26f6979a5a"> 
          <a style="float:right" href="https://www.linkedin.com/profile/view?id=318059658&trk=nav_responsive_tab_profile_pic"> 
           <b class="name">ved Prakash</b> 
           <br>Linkedin 
          </a> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

来源

2015-01-09 07:52:02 Ved

它的工作，我想多上传 –

使用拖放，就可以上传多.. – Ved

我想用浏览按钮来上传多个文件，然后它应该在IE9 –

没有任何插件的角度js文件上传

回答

相关问题