在javascript中獲取文件

有沒有辦法在javascript中輸入type="file"輸入文件？
之後的目的是用XHR發送它。在javascript中獲取文件

例子：
<input type="file" id="myFile"/>

var file = $('#myFile');

隨着AngularJS：

<input type="file" file-changed/> 

.directive('fileChanged', function(){ 
    return { 
    link : function(scope, element){ 
     element.on('change', function(e){ 
      if(e.target.value != ""){ 
       scope.myCtrl.file = e.target; 
      } 
     }); 
    } 
    } 
) 

.controller('myCtrl', function(){ 

    var self = this; 
    self.file; 

    //self.file should be available here for XHR. 

});

全球需求：
多個輸入類型的文件需要被髮送到一個REST API。
我需要跟蹤每個文件上傳的進度，而不使用外部庫。

來源

2015-10-28 gr3g

也許這有助於第一部分：http://stackoverflow.com/questions/18571001/file-upload-using-angularjs（第二個答案） – juvian

是的，它可以用XHR2和['FormData']完成（ https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects） –

這可以很容易地通過FileReader

來實現這一點很好地支持這些天http://caniuse.com/#feat=filereader

下面是代碼HTMLGoodies片段，這將幫助你開始::

function readSingleFile(evt) { 
    //Retrieve the first (and only!) File from the FileList object 
    var f = evt.target.files[0]; 

    if (f) { 
     var r = new FileReader(); 
     r.onload = function(e) { 
      var contents = e.target.result; 
      alert("Got the file.n" + "name: " + f.name + "n" + "type: " + f.type + "n" + "size: " + f.size + " bytesn" + "starts with: " + contents.substr(1, contents.indexOf("n"))); 
     } 
     r.readAsText(f); 
    } else { 
     alert("Failed to load file"); 
    } 
} 

document.getElementById('fileinput').addEventListener('change', readSingleFile, false);

來源

2015-10-28 17:14:31 Jesse

謝謝！任何好的信息網站，以瞭解瀏覽器中'type =「file」'輸入的確切情況？ – gr3g

您可以使用下面的這個指令來獲取文件CH一些$範圍變量：

HTML：

<input type="file" file-model="myFile"/> 
    <button ng-click="uploadFile()">Upload</button>

指令：

angular.module('yourApp').directive('fileModel', ['$parse', function ($parse) { 
    "use strict"; 

    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 

      var model  = $parse(attrs.fileModel), 
       modelSetter = model.assign; 

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

}]);

控制器：

$scope.uploadFile = function() { 
    var file  = $scope.myFile, 
     uploadUrl = "URL://"; 

    fileUploadService.uploadFileToUrl(file, uploadUrl, function (err, data) { 
     $scope.ret = err || data; 
    }); 
};

希望這有助於。

來源

2015-10-28 17:57:01 felipekm

我明天試試吧，如果它能正常工作，這將非常棒！ – gr3g

在javascript中獲取文件

回答

相關問題