Angular.js: دعم الإدخال [نوع = ملف] الربط

لا يوجد ربط افتراضي يقدمه الزاوي لنوع الإدخال = ملف.

ولكن بعد ذلك ، يكون إدخال الملف حقيقيًا فقط لجافا سكريبت ، والفائدة الوحيدة التي يمكن أن يساعدها مثل هذا الربط هي مسح إدخال الملف. (لا يوفر Angular أيضًا دعمًا لإطار العمل لتحميل ملف ajax في الوقت الحالي على ما أعتقد)

coli : هذه ليست الحقيقة الكاملة.

سيكون من المنطقي أن تكون قادرًا على التقاط حدث onchange عند الإدخال [ملف].

في https://github.com/lgersman/jquery.orangevolt-ampere لدينا هذا السيناريو بالضبط: تحميل الملفات عبر XMLHTTPRequest V2.
لذلك قمنا بتنفيذ التوجيه الخاص بنا للقبض على أحداث تغيير المدخلات [file] لإنجاز تحميلات الملفات دون إعادة تحميل الصفحة.

أود أن أرى هذه الميزة في angularjs!

هل تم إحراز أي تقدم في الارتباط بإدخال من نوع الملف؟ لقد كنت أبحث عن حل ولا يمكنني العثور على حل يعمل ...

كان الحل هو Ajax فقط بدلاً من الطلب أو http.post

مرسل من جهازي الآي باد

في 1 آذار (مارس) 2013 ، الساعة 7:16 مساءً ، كتب "jgoldber" < [email protected] [email protected] >:

هل تم إحراز أي تقدم في الارتباط بإدخال من نوع الملف؟ لقد كنت أبحث عن حل ولا يمكنني العثور على حل.

-
قم بالرد على هذه الرسالة الإلكترونية مباشرة أو tHubhttps: //github.com/angular/angular.js/issues/1375#issuecomment -14321221.

أفضل حل وجدته: http://jsfiddle.net/marcenuc/ADukg/49/. يرجى المشاركة إذا وجدت حلاً أفضل.

نعم ، هذا يحتاج حقًا إلى النظر إليه ؛ تعد القدرة على تحديد ملف وتحميله أمرًا بالغ الأهمية إلى حد ما لمعظم تطبيقات الويب ، لذا فإن دعم هذا الإدخال يعد ميزة مفقودة واضحة جدًا.

صدم. هذا يحتاج إلى أن يضاف إلى حدث رئيسي.

صرخ آخر لدعم هذا.

يمكن لملف نموذج ng تعيين قيمة لملف من واجهة برمجة تطبيقات ملف HTML5 ، وهناك polyfills Flash و Silverlight لـ IE8 / IE9

نعم ، إما قم بتعيين القيمة إلى الملف أو على عنصر الإدخال (الذي يحتوي على مرجع للملف)

يعتمد هذا الحل على الملف الذي يتم تنفيذه:

...
.directive('file', function() {
    return {
        restrict: 'E',
        template: '<input type="file" />',
        replace: true,
        require: 'ngModel',
        link: function(scope, element, attr, ctrl) {
            var listener = function() {
                scope.$apply(function() {
                    attr.multiple ? ctrl.$setViewValue(element[0].files) : ctrl.$setViewValue(element[0].files[0]);
                });
            }
            element.bind('change', listener);
        }
    }
});

<file name="image" ng-model="inputFile" accept="image/png,image/jpg,image/jpeg" />

عليك بعد ذلك أن تفعل بعض الأشياء xhr بنفسك ولكنني أعتقد أن هذا خارج منطق ربط واجهة المستخدم والمزيد من منطق المعالجة.

وإذا كنت تفتقر إلى الخيال:

var file = $scope.inputFile;
$http.put('http://localhost:5984/demo/d06917e8d1fae1ae162ea7773c003f0b/' + file.name + '?rev=4-c10029f35a5c5ed9bd8cc31bf8589d3c', file, { headers: { 'Content-Type' : file.type } });

يعمل هذا بسبب xhr2 (http://www.html5rocks.com/en/tutorials/file/xhr2) ويرجى الاستغناء عن عنوان url للمثال الطويل للتحميل ، وهو نقطة نهاية مستند couchdb (مرفق).

من الممكن جعل هذا العمل في IE8 / 9 من خلال الجمع بين FileReader Polyfill المستند إلى الفلاش https://github.com/Jahdrien/FileReader وهذا js FormData polyfill النقي الذي يعتمد على FileReader https://github.com/francois2metz/ html5-formdata. _update_ Moxie هو بوليفيل أفضل

كان الحل سطحيًا جدًا ، على الأقل مثل jsfiddle أعلاه حيث تم خلط النموذج الأولي لوحدة التحكم ...

في وحدة التحكم:

    $scope.updateImage = '(' + function () {
      alert('moo');
    }.toString() + ')();';

قم بربط رد الاتصال الذي تريده عند التغيير وقم بلفه في الإغلاق.

   <input type="file" name="image" onchange="{{updateImage}}" ng-model="image">

أدخله في DOM باستخدام Angular

ليست جميلة تمامًا ولكنها تعمل في Webkit. لم أقم بأي اختبار عبر المتصفح.

أنا على الإصدار 1.0.5 وما زال مكسورًا. استخدمنا مثال Jgoldber وقمنا بتعديله قليلاً:
http://jsfiddle.net/ADukg/2589/

سيعمل هذا المثال فقط مع وحدة تحكم واحدة ، لذلك إذا كان لديك عدة وحدات تحكم ، كل منها به مدخلات ملف ، فستحتاج إلى إجراء بعض التغييرات.

لم تختبرها على IE حتى الآن ، لكن تخميني (بمعرفة IE) هو أنها لن تنجح.

بافتراض أنك تريد فقط استدعاء دالة في نطاقك تأخذ عنصر الإدخال كوسيطة ، فمن السهل جدًا تنفيذها في توجيه:

http://jsfiddle.net/neilsarkar/vQzKJ/

(معدل من jsfiddle أعلاه ، شكرًاprogrammist)

'use strict';

function filesModelDirective(){
  return {
    controller: function($parse, $element, $attrs, $scope){
      var exp = $parse($attrs.filesModel);

      $element.on('change', function(){
        exp.assign($scope, this.files);
        $scope.$apply();
      });
    }
  };
}

إعدادات:

angular.module(...).directive('filesModel', filesModelDirective)

استعمال:

<input type="file" files-model="someObject.files" multiple>

الرجاء إصلاح هذا قريبا.

لا يزال هناك مشاكل .. في بعض الإصدارات يعمل ولكنه غير مدعوم على أي حال

منذ 1.5.0 دولار يجب استدعاء الملخص إذا كنت تستخدم حل بديل:

<input type="file" onchange="angular.element(this).scope().myController.uploadFile(this.files[0]); angular.element(this).scope().$digest();">

+1 لدعم أفضل لتغيير ng والإدخال / الملف. حالة الاستخدام: بصفتي رافعًا للصورة ، أود أن أكون قادرًا على تحرير تلك الصورة (تغيير الحجم والقص) قبل التحميل للحصول على العرض الأمثل. التنفيذ: تصفح الصورة (باستخدام الإدخال / الملف) وفي حدث onchange ، انقل الملف إلى اللوحة القماشية وقم بتحريره باستخدام Fabricjs. لا أستطيع التفكير في تطبيق التغيير غير المتواصل.

cztomsik - أنا على 1.0.7 ولا يمكنني تشغيل الحل الخاص بك - وظيفة النطاق (هذه) تتحلل بشكل جيد ، ولكن لا يمكن العثور على وحدة التحكم ، يتم سرد وظيفة uploadFile كعضو في النطاق (هذا).

العبث ، لدي تعديل طفيف على التقنية ، والذي يبدو أنه يعمل بالنسبة لي (ما زلت لا أعرف لماذا كان لدي:

<input type = "file" name = "file" ng-model = "file" onchange = "invokeUploadFile (this)" />

var invokeUploadFile = function (that) {
angular.element (that) .scope (). uploadFile (that)
angular.element (that) .scope (). Digg () ؛
}

هل يمكنك توفير jsfiddle / plunker؟
شكرا

1. 
   
   1. 2013 ، 18:17 ، tb01923 [email protected] :
   
   

+1 لدعم أفضل لتغيير ng والإدخال / الملف. حالة الاستخدام: بصفتي رافعًا للصورة ، أود أن أكون قادرًا على تحرير تلك الصورة (تغيير الحجم والقص) قبل التحميل للحصول على العرض الأمثل. التنفيذ: تصفح الصورة (باستخدام الإدخال / الملف) وفي حدث onchange ، انقل الملف إلى اللوحة القماشية وقم بتحريره باستخدام Fabricjs. لا أستطيع التفكير في تطبيق التغيير غير المتواصل.

cztomsik - أنا على 1.0.7 ولا يمكنني الحصول على الحل الخاص بك للعمل - وظيفة النطاق (هذه) يتم حلها بشكل جيد ، ولكن لا يمكن العثور على وحدة التحكم ، يتم سرد وظيفة uploadFile كعضو في النطاق (هذا) الكائن ولكن عندما أكون إزالة وحدة التحكم التي أحصل عليها

خطأ في المرجع غير معلوم: لم يتم تعريف الملف upload blah.js: 15
نطاق $ .uploadFile blah.js: 15
invokeScope blah.js: 4
على التغيير

-
قم بالرد على هذا البريد الإلكتروني مباشرة أو قم بعرضه على GitHub.

+1. تحتاجه لبدء تحميل ملف HTML5 عندما يختار المستخدم ملفًا. من السهل حل المشكلة ، لكنني أتوقع أن ينجح هذا الأمر.

+1. الرجاء التنفيذ ، وليس التنفيذ ليس بديهيًا تمامًا.

+1

+1

هيا يا رفاق .. لقد مر أكثر من عام ولا يحتوي الزاوي 1.2.0 stil على روابط ملف الإدخال ... لا أفهم سبب عدم إضافة الميزة؟ كانت هناك بعض الحلول الجيدة للتنفيذ. أود الحصول على رد من أحد أعضاء الفريق بشأن هذه المسألة من فضلك.

فقط للاستشهاد بأحد أفضل الحلول (أعلم أنه طريقة واحدة لربط البيانات ولكن لا يزال أفضل من لا شيء ، يعمل التحقق من الصحة وتحديث النموذج حتى في IE7):

تعريف

  /**
   * <strong i="8">@ngdoc</strong> inputType
   * <strong i="9">@name</strong> angular.module.ng.$compileProvider.directive.input.file
   *
   * <strong i="10">@description</strong>
   * HTML file input field.
   *
   * <strong i="11">@param</strong> {string} ngModel Assignable angular expression to data-bind to.
   * <strong i="12">@param</strong> {string} multiple Allows multiple files selection.
   * <strong i="13">@param</strong> {string=} name Property name of the form under which the 
                                control is published.
   *
   * <strong i="14">@example</strong>
      <doc:example>
        <doc:source>
         <script>
           function Ctrl($scope) {
           }
         </script>
         <form name="myForm" ng-controller="Ctrl">
           file: <input type="file" ng-model="file"> single file selection.<br/>
           files: <input type="file" ng-model="files" multiple> multi-file selection.<br/>
           <tt>file.name = {{file.name}}</tt><br/>
           <tt>files.length = {{files.length}}</tt><br/>
          </form>
        </doc:source>
        <doc:scenario>
          it('should change state', function() {
            expect(binding('file.name')).toBeUndefined();

            input('file').select('a file name');
            expect(binding('file.name')).toEqual('a file name');
          });
        </doc:scenario>
      </doc:example>
   */
  'file': fileInputType,

وظيفة

function fileInputType(scope, element, attr, ctrl) {
  element.bind('change', function() {
    scope.$apply(function() {
      var files = element[0].files,
          isValid = true;

      if (msie < 10) {
        files = [element[0].value];
      }

      if (attr.accept) {
        var i, j, acceptType, fileType,
            types = map(attr.accept.split(','), function(t) { return trim(t).split('/'); });
        for (i = 0; i < files.length && isValid; ++i) {
          fileType = files[i].type.split('/');
          isValid = false;
          for (j = 0; j < types.length && !isValid; ++j) {
            acceptType = types[j];
            isValid = acceptType[0] === fileType[0] && (acceptType[1] === '*' || acceptType[1] === fileType[1]);
          }
        }
      }
      ctrl.$setValidity('file', isValid);

      var viewValue;
      if (isValid) viewValue = attr.multiple ? files : files[0];
      ctrl.$setViewValue(viewValue);
    });
  });
}

+1

+1

ntrp لماذا لا العلاقات العامة هذا التغيير؟

يحتاج هذا التغيير إلى مزيد من التفصيل واختباره ، وليس لدي وقت في الوقت الحالي للقيام بذلك.

+1

+1

-1: القزم:

تمزح +1

+1

+1

+1

+1

+1

المدخلات [type = file] ليست في الواقع أمرًا ملزمًا ثنائي الاتجاه ، إلا إذا استخدمنا بشكل صريح واجهة برمجة التطبيقات File API ، والتي لا تتوفر في جميع المتصفحات المستهدفة. إن إضافة هذا إلى ng-model ليس له معنى كبير ، ولكن هناك الكثير من المكونات الإضافية التي تدعم بعض الاختلافات في هذه الوظيفة. هل نحن لسنا بخير لتفويض هذا إلى المكونات الإضافية لفترة من الوقت؟

http://caniuse.com/fileapi

caitp صحيح ، ولكن من المنطقي أن تكون قادرًا على الارتباط بحدث التغيير ، عبر ng-change الذي لا يعمل.

الشيء الآخر الذي لا يعمل هو التحقق من صحة النموذج. أعتقد أنه يجب تنفيذ دعم الملفات للمتصفحات الجديدة مع احتياطي ربط البيانات في الطريق للمتصفحات القديمة. إذا لم يكن هذا الحل قابلاً للتطبيق ، ففي رأيي ، يجب أن يُذكر بوضوح على الويكي سبب عدم تنفيذ الوظيفة وكيفية حل المشكلات التي يسببها نقص الدعم. أتذكر ضياع الكثير من الوقت قبل حل احتياجات ملف الإدخال عندما استخدمتها لأول مرة.

الشيء هو أن أسماء الملفات ليست مرتبطة بنموذج ، ولن يكون من المنطقي حقًا ربطها بنموذج. كل خاصية لواجهة File هي للقراءة فقط ، وواجهة FileList ليست سوى مجموعة من الملفات. لا توجد سعة للربط ثنائي الاتجاه ، لذلك لا يوجد سبب حقيقي لاستخدام نموذج ng لهذه في المقام الأول. من السهل جدًا الارتباط بحدث change بدلاً من ذلك ، ويمكنك بسهولة كتابة توجيه لإضافة هذه الوظيفة بحيث يمكنك استخدامها بشكل إعلاني إذا كنت بحاجة إليها.

ولكن كيف يكون من المنطقي جعل هذا جزءًا من نموذج ng عندما لا يكون لديه القدرة على اتباع سلوك النموذج ng؟

لا يوجد سبب يمنع أي شخص من إنشاء واجهة مخصصة للملفات ، وقد يقوم الزاوي بذلك في مرحلة ما ، لكن هذا ليس منطقيًا حقًا مع نموذج ng في رأيي. لا أعرف ما يعتقده المطورون الآخرون حول هذا الأمر ، فقد يوافقون أو لا يفعلون. ولكن من وجهة نظري ، فإن التوجيه المنفصل سيكون أكثر منطقية ، لأن الإدخال [type = file] لا يتناسب مع النموذج ng

• لا شيء بخصوص قيمة إدخال الملف يمكن الكتابة عليه من سياق البرنامج النصي
• ليس لدينا طريقة حقيقية لإجراء التحقق من الصحة هنا بدون واجهة برمجة التطبيقات للملفات (وهي غير مدعومة في العديد من المتصفحات المستهدفة) ، فالمتصفح يقوم بذلك لنا بشكل أساسي. --- باستثناء التحقق من صحة ngRequired

الشيء الوحيد الذي يمكننا فعله حقًا للإدخال [type = file] هو $ setViewValue عندما تتغير القيمة (وهو أمر غير منطقي حقًا) ، وتغيير ngModel بطريقة ما لتجاهل التغييرات في قيمة النموذج الناتجة عن تغيير البرنامج النصي (أو بشكل أساسي فقط قم بتعطيل $ watch بالكامل). بالنسبة إلى التحقق من الصحة ، كل ما يمكننا دعمه حقًا هو مطلوب ، أعني ما الذي يمكننا فعله هناك؟

أود أن أكون قادرًا على دعم إدخال ملف باستخدام ngModel أيضًا ، لكنني لا أرى كيف سيعمل ، فهو لا يتناسب مع واجهة ngModel.

أتفق مع هذا البيان ولكن بعد ذلك ، كما قلت من قبل ، نحتاج إلى مزيد من التركيز على هذا في الويكي أو بشكل عام في الوثائق حتى يعرف المطورون ما يحتاجون إليه لتحقيق الوظيفة التي يحتاجون إليها.

ntrp well docs أكثر من موضع ترحيب ، وسيسعدني مراجعتها إذا قمت بإرسال واحدة :)

هل يمكن أن تكون إضافة توجيه محدد في الزاوية نفسها حلاً؟

أوافق على البيان السابق ، لكن يبدو غريبًا بعض الشيء على الأقل أن ملف
إطار مثل الزاوي ليس لديه طريقة واضحة ونظيفة لتحقيقه
هذه...
ربما كان هذا هو الشيء الأكثر إرباكًا الذي واجهته عند محاولتي
تحميل ملف ...

آه حسنًا caitp ، لقد قرأت منذ بعض الوقت أن طلب سحب الويكي لم يتم تقييمه فعليًا ، لذا لم أزعج نفسي بالمساهمة. إذا حصلت على بعض وقت الفراغ قريبًا ، فسأساهم بكل سرور :) شكرًا.

لم أكن أدرك أن توجيه ngChange يتطلب أن يكون ngModel موجودًا أيضًا ، وهو ما أعتقد أنه سبب وجود الكثير من المناقشات حول ngModel هنا (وهذا هو سبب ظهور هذا الخطأ ). أوافق على أن الربط ثنائي الاتجاه لمدخل [type = file] لا معنى له.

ولكن ما هو السبب الدقيق الذي يجعل ngChange يتطلب نموذج ngChange؟ في رأيي ، من المنطقي تمامًا أن تكون قادرًا على الارتباط بحدث التغيير لحقل إدخال [type = file] ، لنقل ما إذا كنت تريد إرسال النموذج تلقائيًا بمجرد اختيار ملف. في مثل هذه الحالة ، لا يهمني حقًا قيمة الحقل. أنا فقط أهتم أنه تغير. أفضل طريقة وجدتها للتعامل مع مثل هذا الشيء هي من خلال الحل البديل المذكور أعلاه بواسطة cztomsik :

onchange="angular.element(this).scope().fileChangedHandler()"

وهذا لا يبدو حقاً أفضل حل.

ng-change ، على الرغم من تسميته بشكل مشابه لتوجيهات معالج الأحداث الأخرى ، فإنه ليس في الواقع معالجًا لحدث change . إنه يضيف فقط $viewChangeListener إلى ngModelController ، والذي يتم تشغيله عندما يتم استدعاء $setViewValue .

أوافق على أنه اسم مؤسف

هذا مخادع # 1236 تم إغلاقه بهذا التعليق: https://github.com/angular/angular.js/issues/1236#issuecomment -29115377

ما لم نرى اقتراحًا حول كيفية تنفيذ هذا بحيث يكون خفيف الوزن ، ولكنه وظيفي ولا يتطلب فرض نمط ux على مستخدمي Framewok ، فسننظر فيه. لكن في الوقت الحالي ، نعتقد أن مشكلات تحميل الملفات معقدة بما يكفي بحيث تستدعي حلها كوحدة سواتل ، على الأرجح خارج النواة.

+1

IgorMinar ألق نظرة هنا ، مثال قذر بعض الشيء ، لكنه مثير جدًا للتطبيق: https://github.com/danialfarid/angular-file-upload. danialfarid يحقق تقدمًا كبيرًا في هذا الأمر.

تحقق من أنها مشكلة للجميع ، حيث تم فتح العديد من المشكلات مع العديد من التعليقات. يجب عليك توفير وحدة ngUpload لنا: ابتسامة :. ربما يمكنك تقديم تنفيذ html5 وإلحاق أمثلة استخدام مع https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills#file -api بـ http://docs.angularjs.org/guide /بمعنى آخر.

كيف تفكر في حل؟

+1

+1

+1

+1

+1

+1

+1

+1

واو ، إنه محرج بعض الشيء في هذه المرحلة.

+1

ليس من الممكن حقًا الحصول على ارتباطات ثنائية الاتجاه لإدخالات الملفات ، وبالتأكيد عندما لا تدعم المتصفحات المستهدفة واجهة برمجة التطبيقات للملف (http://caniuse.com/fileapi) --- ولكن حتى عندما يستطيعون ذلك ، input[type=file] لا يتناسب مع ذلك على أي حال. 2-طريقة الربط هناك أمر مستحيل حقًا

أنا آسف ولكن هذه مشكلة / ميزة أمان لمنصة الويب أكثر من أي شيء آخر. إذا كان ممكنًا ، فسيتم

caitp لقد

شيء بسيط مثل غلاف لهذا على سبيل المثال سيكون البداية.

بالنظر إلى الاتجاه الذي تتجه إليه Angular 2.0 (ترجمة الزاوي فقط ، وتعابير ليست من ECMA) ، لا أعتقد أن قيود "منصة الويب" يجب أن تكون مصدر قلق.

@ أي

تحرير: إزالة "مطلوب" من بيان التحويل.

_ مجرد توضيح سريع. _ لا يتطلب إنشاء تطبيقات Angular 2.0 لغة مُترجمة أو تعابير ليست من ECMA. يمكنك استخدام كود ES5 العادي على ما يرام. إذا كنت تريد إنشاء مصدر Angular 2.0 ، فأنت بحاجة إلى استخدام traceur للترجمة. بطبيعة الحال ، يمكنك استخدام traceur لإنشاء تطبيقاتك الخاصة والاستفادة من نفس الميزات التي نستخدمها داخل Angular ، ولكن هذا اختياري تمامًا. آسف إذا كان هناك بعض الالتباس حول هذه النقطة في إعلاناتنا.

تضمين التغريدة كنت أعرف ذلك ويجب أن يكون لدي تصحيح لغوي أفضل. لا قهوة!

لا يمكن لأطر العمل حقًا الالتفاف حول قيود منصة الويب. على سبيل المثال ، لا يمكننا إجبار المتصفح على السماح لنا بالكتابة إلى سمات IDL للقراءة فقط (التي تكسر بالفعل الربط ثنائي الاتجاه للملفات) ، ولا يمكننا إجبار المتصفح على كشف نظام الملفات لنا ، مما يمنعنا حقًا من القيام بذلك أي شيء مثير للاهتمام معها

caitp لقد كنت

ربما يمكننا إعادة توجيه هذه المحادثة إلى ، "كيف يمكن أن تدعم الزاوية هذا؟" بدلاً من "لن يتناسب مع أنماطنا الحالية".

من المؤكد أن الربط بإدخال الملف ممكن ، لقد فعلت ذلك في مشروع سابق لـ AngularJS في الواقع.

حقيقة أنه لا يمكنك الارتباط ثنائي الاتجاه بإدخالات الملفات هي ميزة أمان ، وهذا أمر منطقي. لن يتمكن المؤلفون أبدًا من تعيين مسار الملف عبر البرنامج النصي ، ولكن لماذا لا يتم ربطه في اتجاه واحد فقط؟

من المؤكد أنه يكسر النموذج ، ولكن من يهتم حقًا إذا كان ذلك يعني حصولك على تغيير ng والقدرة على الوصول إلى الملفات عبر واجهة برمجة التطبيقات للملفات دون اختراق؟ يمكن لـ jQuery الارتباط بحدث تغيير على مدخلات الملف ، فهل الطريقة الزاويّة مقدسة جدًا بحيث لا يمكننا ربطها داخل وحدة تحكم؟ هل هو قيد تقني مع العمارة أم مجرد حاجز أيديولوجي؟

متفق عليه ، لم أكن مهتمًا بدرجة 2 الملزمة. أردت ببساطة أن أنشر الملف مع بقية المستند دون القفز عبر الأطواق.

في 20 مايو 2014 ، الساعة 7:53 صباحًا ، كتب جاستن أرودا < [email protected] [email protected] >:

c aitphttps: //github.com/caitp لقد كنت

ربما يمكننا إعادة توجيه هذه المحادثة إلى ، "كيف يمكن أن تدعم الزاوية هذا؟" بدلاً من "لن يتناسب مع أنماطنا الحالية".

-
يمكنك الرد على هذه الرسالة الإلكترونية مباشرةً أو عرضها على Gi tHubhttps: //github.com/angular/angular.js/issues/1375#issuecomment -43636326.

ثم لديك حالة واحدة حيث يتصرف ng-model بشكل مختلف عن عنصر تحكم نموذج معين ، ثم يكون لديك أشخاص يسجلون أخطاء مثل "كيف يرسل عنصر التحكم في النموذج الملف الخطأ عندما أقوم بتغيير القيمة إلى" foobarblah.txt "أو أيًا كان. واجهة برمجة تطبيقات غير متناسقة -> سيئة.

إن ngModel ليس مثاليًا تمامًا لهذه الأشياء على وجه التحديد لأنه يعني أن لدينا نمطًا معينًا نلائمه ، ومن الصعب جدًا على مؤلفي التطبيق إيقاف تشغيله. هناك حلول لهذا الأمر في angular.dart والنموذج الأولي v2.0.0 ، لذلك سيكون هذا أفضل في المستقبل. لكننا في الحقيقة لا يمكننا إضافة سلوك آخر للنموذج ng يتجاهل كل ما يفعله النموذج ng حاليًا ، فلن يكون ذلك منطقيًا

يقبل ملفًا ويحمله عبر XHR باستخدام Angular

guruward ، لا يمكننا دعم هذا على جميع

لكنني لست متأكدًا من أنه شيء يمكننا وضعه في جوهره ، عليك أن تسأل إيغور عما يفكر به في شحن حشوة متعددة الصدمات في القلب.

أنا لا أقول إنها حالة استخدام لن يرغب الناس في فعلها أبدًا ، يمكنني أن أفهم الرغبة في القيام بذلك ، أنا أقول ببساطة إنها لا تتناسب مع نمط ngModel ، وتتطلب منا إضافة بعض التلاعب الإضافي من أجل يدعم جميع المتصفحات المستهدفة ، لذلك يكسر الإطار بهذه الطريقة.

ما الضرر في استخدام وحدات الطرف الثالث لهذا؟

لا يتطلب هذا polyfill فلاش.

jreading هذا ليس

ما يفعله هو الاعتماد على File API ، وهو غير متوفر في جميع المتصفحات المستهدفة ، وبالتالي فهو يمثل مشكلة بالنسبة لـ angular 1.x core.

بدون واجهة برمجة التطبيقات هذه ، لن يكون لديك طريقة للوصول إلى ملف البيانات بدون شيء مثل شوك ويف.

يستخدم إطارات iframe بدلاً من الفلاش ، ربما تفكر في ذلك . بدلاً من الجدل الدلالي ، ماذا عن خارطة الطريق؟ لنبدأ بـ ng-change على إدخال ملف للمتصفحات التي تدعم واجهة برمجة تطبيقات الملفات.

jreading للأسف ، هذا لا يساعد المتصفحات غير القادرة على api ، بما في ذلك IE9 ، والذي لا يزال مدعومًا. لا يمكننا شحن واجهة برمجة تطبيقات تعمل على المستعرض المدعوم A ولكن لا يتم دعم المستعرض B في جوهره دون أي حل بديل للأشخاص الذين يعتمدون على دعم IE9. ولا ، لا يعرض إطار iframe محتويات الملف على هيئة blob ويجعله قابلاً للتحميل. Hnnggggg.

توجد حلول لهذا في وحدات الطرف الثالث ، والتي يمكن للتطبيقات استخدامها إذا شعرت أنها مناسبة. وضع هذا في جوهر A) يمنح وحدات الطرف الثالث وقتًا أصعب ، و B) يفشل في دعم جميع المتصفحات المستهدفة ، لذلك فهذه مشكلة.

هذا مجرد رأيي ، ربما يختلف إيجور أو أي شخص آخر ، لكن لا أعتقد أن هذا هو النهج الصحيح هنا.

ما هو الضرر من استخدام وحدات الطرف الثالث إذا كانت تعمل من أجلك ، وأنت بحاجة إليها؟

لا تعني أبدًا أن النقطة بحاجة إلى أن تكون متاحة لوحدة التحكم. إنني أخرج من أحد الأطراف ، لكن أكبر حالة استخدام أراها هي القدرة على معرفة متى تغير إدخال الملف والقدرة على إرساله إلى نقطة نهاية ، وهي متوفرة مع حل iframe هذا أو ملف API والزاوية الخارقة.

وحدات الطرف الثالث هي الطريقة الوحيدة أو التحسينات القوية مثل منشور المدونة الخاص بي (لا يوجد تحميل لك !!) ، ولكن يمكنني فقط قلب السؤال وطرح السؤال "ما هو الضرر في وجود واجهة برمجة تطبيقات أفضل للمتصفحات الحديثة؟"

"ما الضرر في الحصول على واجهة برمجة تطبيقات أفضل للمتصفحات الحديثة؟"

هذه الحجة ضعيفة لأنها لا تأخذ في الاعتبار تكلفة الفرصة ؛ هناك الكثير من الأشياء الأخرى التي يتعين علينا (الفريق الأساسي) العمل عليها.

عادل بما يكفي. فقط يبدو وكأنه فجوة كبيرة وفاكهة معلقة منخفضة.

المشكلة هنا ليست حول كيفية جعل هذا العمل مع ngModel. أعتقد أن ngModel يمكن أن يعرض قائمة الملفات من حقل الإدخال إلى النطاق ، ولكن في الاتجاه الآخر ، نسمح فقط بتعيين النموذج على فارغ / غير محدد ليتم دعمه. من المحتمل ألا يقوم المحللون / المنسقون بأي شيء وسوف يقوم المدققون بأشياء بسيطة مثل التحقق من وجود الملف أو غيابه.

المشكلة هي (كما ذكرنا سابقًا) أنه بدون دعم ملف API ، فإن القيام بذلك بشكل صحيح غير ممكن للجوهر نظرًا لأن خط الأساس لدينا هو IE9 وأن ملء هذه الأشياء غير وارد بالنسبة للجوهر.

بالإضافة إلى ذلك ، فإن محاولة التعامل مع هذا الإدخال بطريقة غير متوافقة مع المستعرضات المختلفة تجعل الأمر أكثر صعوبة بالنسبة إلى حلول الجهات الخارجية ، والتي يتعين عليها الآن محاربة / تعطيل / حل بديل للحل الأساسي.

الحلول غير الأساسية التي تتعامل مع هذا موجودة بالفعل وقد تم ذكرها في مناقشة القضية هذه وكذلك في الإصدار السابق

هناك العديد من الأشياء الأخرى التي لها تأثير أكبر نريد إنجازها. أفهم أن هذه حالة شائعة نسبيًا ، لكنني ما زلت لم أسمع لماذا الحلول الحالية ليست كافية؟

هل يمكن إعادة توجيه بعض الطاقة الموضوعة في هذه المناقشة إلى تحسين الحلول الحالية إذا احتاجوا إليها ، أو إنشاء حل جديد أفضل من الحلول الحالية؟

سأغلق هذا تمامًا كما أغلقنا # 1236. يتم إنشاء Angular 2 لدعم المتصفحات الحديثة وبواسطة هذا الملف سيكون متاحًا بسهولة.

أريد ببساطة أن أعرف متى سيحدث حدث التغيير حتى أتمكن من الوصول إلى العنصر مباشرة والحصول على معلومات الملف وتحميله عبر AJAJ.

bjoshuanoah فماذا تحتاج ngModel ل؟ فقط قم بربط مستمع الحدث بالمدخل = p

caitp أريد التحكم في كل شيء في وحدة التحكم وليس

إذا وضعت ng-change = "uploadFile ({$ event: $ event})"

يمكنني الحصول على $ scale.uploadFile (حدث) في وحدة التحكم الخاصة بي. والتعامل معها هناك.

حالة الاستخدام الخاصة بي هي: تحميل الملف إلى s3 ، وتطبيق عنوان url على النموذج الخاص بي.

بدلاً من ذلك ، يتعين علي اقتحام النطاق لفعل الشيء نفسه. مزعج جدا:

<input name="highRes" scope="{{contentOptions.currentValue}}" key="value" type="file" onchange="angular.element(this).scope().setFile(this)">

أتمنى أن يقتل شخص ما هذه القضية. حتى نتمكن جميعًا من المضي قدمًا :)

في 25 تموز (يوليو) 2014 ، الساعة 9:22 صباحًا ، كتب بريان < [email protected] [email protected] >:

أريد ببساطة أن أعرف متى سيحدث حدث التغيير حتى أتمكن من الوصول إلى العنصر مباشرة والحصول على معلومات الملف وتحميله عبر AJAJ.

-
يمكنك الرد على هذه الرسالة الإلكترونية مباشرةً أو عرضها على Gi tHubhttps: //github.com/angular/angular.js/issues/1375#issuecomment -50171714.

+1

+1

+1000000000000000

+1

+1

+1

+1

+100500

+1
لست متأكدًا من سبب مشكلة Ajax. قد يرغب المرء في تحميل البيانات من ملف csv على الجهاز المحلي إلى نموذج Angular. إذا نجح ng-change في إدخال ملف داخل Angular ، فسيكون ذلك سهلاً ، ولكنه ليس كذلك حاليًا. هذا السيناريو لا يتطلب Ajax أو خادم API على الإطلاق. أنا أيضًا لست متأكدًا من سبب إغلاق هذا؟

الحل الحالي الخاص بي هو القيام بما يلي

 input(type="file", onchange="angular.element(this).scope().onFileSet(this.files)")

وفي وحدة التحكم لدي شيء مثل

$scope.onFileSet = function(files) { 
// work your magic here 
}

ينتن إلى حد كبير ، أشعر وكأنني أتخلى عن الزاوية كأداة. أي نظرة ثاقبة حول كيفية القيام بذلك بطريقة أكثر زاوية سيكون موضع تقدير كبير.

: قلب:: قلب:

هنا مركب شراعي:: المراكب الشراعية:

samccone أليس النطاق () غير متاح عند إيقاف وضع التصحيح؟

geetsce هذا صحيح (في 1.3.x والإصدارات الأحدث)

ويلب ، في 1.2 أرض كل شيء على ما يرام.

Narretz هل لديك حل أفضل مع ذلك؟

هذا يعمل بالنسبة لي ، مستوحى من https://jasonturim.wordpress.com/2013/09/01/angularjs-drag-and-drop

<input type="file" multiple="multiple" data-dbinf-on-files-selected="chooseAFunctionName(selectedFileList)">
<script>
/**Directive to propagate selected files from an HTML input element with type="file"
 * to the surrounding AngularJS controller.
 */
myApp.directive('dbinfOnFilesSelected', [function() {
    return {
        restrict: 'A',
        scope: {
              //attribute data-dbinf-on-files-selected (normalized to dbinfOnFilesSelected) identifies the action
              //to take when file(s) are selected. The '&' says to  execute the expression for attribute
              //data-dbinf-on-files-selected in the context of the parent scope. Note though that this '&'
              //concerns visibility of the properties and functions of the parent scope, it does not
              //fire the parent scope's $digest (dirty checking): use $scope.$apply() to update views
              //(calling scope.$apply() here in the directive had no visible effect for me).
            dbinfOnFilesSelected: '&'
        },
        link: function(scope, element, attr, ctrl) {
            element.bind("change", function()
            {  //match the selected files to the name 'selectedFileList', and
               //execute the code in the data-dbinf-on-files-selected attribute
             scope.dbinfOnFilesSelected({selectedFileList : element[0].files});
            });
        }
    }
}]);

myApp.controller('myController', ['$scope', function($scope) {
    $scope.chooseAFunctionName = function (filelist) {
        for (var i = 0; i < filelist.length; ++i) {
            var file = filelist.item(i);
            //do something with file; remember to call $scope.$apply() to trigger $digest (dirty checking)
            alert(file.name);
           }
    };
}]);
</script>

+1

+1

لن يحدث ... دعها تذهب ، دعها تذهب ...

+1

كما قال samccone ،

input(type="file", onchange="angular.element(this).scope().onFileSet(this.files)")

هذه ليست الطريقة الزاويّة لعمل الأشياء. إنه أمر غريب.

+1

+1

+1

مرحبًا caitpNarretz إذا كنتم تودون أن أتمكن من العمل على العلاقات العامة لهذا الفرع 1.2x ، أخبرني إذا كان هذا شيء تريد إضافته أم لا. أنا أتفهم المخاوف الأمنية ونقص الدعم عبر المستعرض فيما يتعلق بالوصول إلى كائن الملف الفعلي ، ولكن يبدو أن الدعم الأساسي لاكتشاف متى تم تغيير إدخال الملف (التمرير في الحدث الأصلي) سيوفر ما يكفي من الخطاف لكي يعمل الناس سحرهم.

شكرا مرة أخرى على كل ما تفعله: palm_tree:

+1

+1

+1

+1

+1

ng-file-upload يعمل بشكل رائع.

+1 لـneokyol !! إنه يعمل بشكل رائع!

يجب أن تكون هذه الميزة المشتركة بشكل افتراضي في إطار العمل

معاون، مساعد، مفيد، فاعل خير

+1

+1

+1

+1

+1

هذا عمل معي ، قد يساعد

angular.module('app', [])
  .controller('MainCtrl', MainCtrl)
  .directive('fileChange', fileChange);

  function MainCtrl($scope) {
    $scope.upload = function () {
      // do something with the file
      alert($scope.file.name);
    };
  }

  function fileChange() {
    return {
      restrict: 'A',
      require: 'ngModel',
      scope: {
        fileChange: '&'
      },
      link: function link(scope, element, attrs, ctrl) {
        element.on('change', onChange);

        scope.$on('destroy', function () {
          element.off('change', onChange);
        });

        function onChange() {
          ctrl.$setViewValue(element[0].files[0]);
          scope.fileChange();
        }
      }
    };
  }

<div ng-app="app" ng-controller="MainCtrl">
  <input type="file" file-change="upload()" ng-model="file">
</div>

http://plnkr.co/edit/JYX3Pcq18gH3ol5XSizw؟p=preview

+1

+1

+1

+1

+1000000000000000000000000

+1

+1

dciccale ، هل يمكنك تقديم مثال على plunker.

@ santhosh77h http://plnkr.co/edit/JYX3Pcq18gH3ol5XSizw؟p=preview

+1

+1

+1 يجب أن يكون هناك توجيه مدمج في المكتبة الأساسية لهذا الغرض. سخيفة جدا

+1

+1
هل الميزة مجدولة لأحد الإصدارات التالية؟

+1

+1

كيف يتم ذلك في المشاريع التي لا يتم فيها حقن نطاق $ في وحدة التحكم. أنا أستخدم Laravel angular الذي يستخدم طريقة GULP و ES6 للإعلان عن وحدات التحكم.

بمعنى آخر

class TestController{
    constructor(API){
        'ngInject';
        this.API = API
    }

    $onInit(){
        this.file = null;
    }
    upload() {
        console.log(this.file)
    }
    fileChanged(elm) {
        console.log('hey')
        this.file = elm.file;
        this.$apply();
    }
}

export const TestComponent = {
    templateUrl: './views/app/components/test/test.component.html',
    controller: TestController,
    controllerAs: 'vm',
    bindings: {}
}

لقد وجدت عملًا حول ما أعتقد. http://stackoverflow.com/questions/38449126/how-to-set-up-ng-file-upload-in-laravel-angular-project/38486379#38486379

+1

ntrpguruwardcolilgersmanjgoldberSiyfion
كيف أصلحت التحقق من صحة لـ
التحقق من الصحة الخاص بي:
this.catalougeForm = this.catalougeFormBuilder.group ({
catalougeIconName: [''، Validators.required]
}) ؛
لغة البرمجة:
(التغيير) = "changeListener ($ event)">

المدقق الخاص بي يعتبر قيمة catalougeIconName فارغة / فارغة بعد الرفع.
يتم إرسال الصورة ، لكن المدقق لا يعمل

أي تحديثات على هذا؟

أي تحديثات؟

انظر https://github.com/angular/angular.js/issues/1375#issuecomment -43820650