javascript कोणीय सामग्री के साथ फ़ाइल अपलोड करें




html angularjs (8)

उपर्युक्त सभी उत्तरों को जोड़ना (यही कारण है कि मैंने इसे एक समुदाय विकी बना दिया है), संभवतः किसी भी input<type="text"> को tabindex="-1" साथ चिह्नित करना सबसे अच्छा है, खासकर अगर विकलांग के बजाय रीडोनली का उपयोग करना (और शायद <input type="file"> , हालांकि इसे छुपाया जाना चाहिए, यह अभी भी दस्तावेज में है, जाहिर है)। टैब का उपयोग करते समय लेबल सही ढंग से कार्य नहीं करते थे / कुंजी संयोजनों को दर्ज करते थे, लेकिन बटन ने किया था। इसलिए यदि आप इस पृष्ठ पर किसी अन्य समाधान की प्रतिलिपि बना रहे हैं, तो आप उन परिवर्तनों को बदलना चाहेंगे।

मैं AngularJS और कोणीय-सामग्री के साथ एक वेब ऐप लिख रहा हूं। समस्या यह है कि कोणीय-सामग्री में फ़ाइल इनपुट के लिए कोई अंतर्निहित घटक नहीं है। (मुझे लगता है कि फाइल अपलोडिंग सामग्री डिजाइन में फिट नहीं है, लेकिन मुझे इसे अपने ऐप में चाहिए)

क्या आपके पास इस समस्या का अच्छा समाधान है?


एक और हैक समाधान, हालांकि प्रॉक्सी बटन को लागू करके थोड़ा क्लीनर हो सकता है:

HTML:

<input id="fileInput" type="file">
<md-button class="md-raised" ng-click="upload()">
  <label>AwesomeButtonName</label>
</md-button>

जे एस:

app.controller('NiceCtrl', function ( $scope) {
  $scope.upload = function () {
    angular.element(document.querySelector('#fileInput')).click();
  };
};

इस उत्तर के आधार पर। इस दृष्टिकोण को काम करने में मेरे लिए कुछ समय लगा, इसलिए मुझे आशा है कि मेरा जवाब किसी के समय को बचाएगा।

कोडपेन पर डेमो

निर्देशक:

angular.module('app').directive('apsUploadFile', apsUploadFile);

function apsUploadFile() {
    var directive = {
        restrict: 'E',
        templateUrl: 'upload.file.template.html',
        link: apsUploadFileLink
    };
    return directive;
}

function apsUploadFileLink(scope, element, attrs) {
    var input = $(element[0].querySelector('#fileInput'));
    var button = $(element[0].querySelector('#uploadButton'));
    var textInput = $(element[0].querySelector('#textInput'));

    if (input.length && button.length && textInput.length) {
        button.click(function (e) {
            input.click();
        });
        textInput.click(function (e) {
            input.click();
        });
    }

    input.on('change', function (e) {
        var files = e.target.files;
        if (files[0]) {
            scope.fileName = files[0].name;
        } else {
            scope.fileName = null;
        }
        scope.$apply();
    });
}

upload.file.template.html

<input id="fileInput" type="file" class="ng-hide">
<md-button id="uploadButton"
           class="md-raised md-primary"
           aria-label="attach_file">
    Choose file
</md-button>
<md-input-container md-no-float>
    <input id="textInput" ng-model="fileName" type="text" placeholder="No file chosen" ng-readonly="true">
</md-input-container>

मैंने हाल ही में यह पाया: https://github.com/shuyu/angular-material-fileinput

यह अच्छा फिट बैठता है और एक आकर्षण की तरह काम करता है।

दस्तावेज़ सरल और प्रत्यक्ष है इसका उपयोग कैसे करें।


समाधान का एक और उदाहरण। निम्नलिखित की तरह दिखेगा

कोडपेन लिंक there

  <choose-file layout="row">
    <input id="fileInput" type="file" class="ng-hide">
    <md-input-container flex class="md-block">
      <input type="text" ng-model="fileName" disabled>
      <div class="hint">Select your file</div>
    </md-input-container>
    <div>
      <md-button id="uploadButton" class="md-fab md-mini">
        <md-icon class="material-icons">attach_file</md-icon>
      </md-button>
    </div>
  </choose-file>   

.directive('chooseFile', function() {
    return {
      link: function (scope, elem, attrs) {
        var button = elem.find('button');
        var input = angular.element(elem[0].querySelector('input#fileInput'));

        button.bind('click', function() {
          input[0].click();
        });

        input.bind('change', function(e) {
          scope.$apply(function() {
            var files = e.target.files;
            if (files[0]) {
              scope.fileName = files[0].name;
            } else {
              scope.fileName = null;
            }
          });
        });
      }
    };
  });

आशा करता हूँ की ये काम करेगा!


leocaseiro द्वारा अच्छा समाधान

<input class="ng-hide" id="input-file-id" multiple type="file" />
<label for="input-file-id" class="md-button md-raised md-primary">Choose Files</label>

codepen में देखें


jameswyse से https://github.com/angular/material/issues/3310

एचटीएमएल

<input id="fileInput" name="file" type="file" class="ng-hide" multiple>
<md-button id="uploadButton" class="md-raised md-primary"> Choose Files </md-button>

नियंत्रक

    var link = function (scope, element, attrs) {
    const input = element.find('#fileInput');
    const button = element.find('#uploadButton');

    if (input.length && button.length) {
        button.click((e) => input.click());
    }
}

मेरे लिए काम किया


आप इनपुट को लेबल के अंदर लपेटकर शैली बदल सकते हैं और इनपुट डिस्प्ले को किसी भी में बदल सकते हैं। फिर, आप उस पाठ को निर्दिष्ट कर सकते हैं जिसे आप एक स्पैन तत्व के अंदर प्रदर्शित करना चाहते हैं। नोट: यहां मैंने बूटस्ट्रैप 4 बटन शैली (बीटीएन बीटीएन-रूपरेखा-प्राथमिक) का उपयोग किया था। आप अपनी इच्छित शैली का उपयोग कर सकते हैं।

<label class="btn btn-outline-primary">
      <span>Select File</span>
      <input type="file">
</label>

input {
  display: none;
}






angular-material