অ্যাঙ্গুলারজেএস ব্যবহার করে ফাইল আপলোড করুন


296

আমার এইচটিএমএল ফর্মটি এখানে:

<form name="myForm" ng-submit="">
    <input ng-model='file' type="file"/>
    <input type="submit" value='Submit'/>
</form>

আমি স্থানীয় মেশিন থেকে একটি চিত্র আপলোড করতে চাই এবং আপলোড করা ফাইলের সামগ্রীটি পড়তে চাই। এই সব আমি AngularJS ব্যবহার করে করতে চাই।

যখন আমি মুদ্রণের চেষ্টা করি তখন এর মান $scope.fileঅপরিজ্ঞাত হিসাবে আসে।



উত্তর:


344

এখানে কয়েকটি উত্তর ব্যবহারের প্রস্তাব দেয় FormData()তবে দুর্ভাগ্যক্রমে এটি ব্রাউজারের অবজেক্ট যা ইন্টারনেট এক্সপ্লোরার 9 এবং নীচে পাওয়া যায় না। আপনার যদি সেই পুরানো ব্রাউজারগুলিকে সমর্থন করতে হয় তবে আপনার ব্যাকআপ কৌশল যেমন ব্যবহার <iframe>বা ফ্ল্যাশ প্রয়োজন।

ফাইল আপলোড করার জন্য ইতিমধ্যে অনেক Angular.js মডিউল রয়েছে। এই দু'জনেরই পুরানো ব্রাউজারগুলির স্পষ্ট সমর্থন রয়েছে:

এবং কিছু অন্যান্য বিকল্প:

এর মধ্যে একটিতে আপনার প্রকল্পের ফিট করা উচিত, বা কীভাবে আপনি এটি কোড করবেন সে সম্পর্কে আপনাকে অন্তর্দৃষ্টি দিতে পারে।


4
আরও একটি সমাধান (ফাইল আপলোডের জন্য আইএএএস): github.com/uploadcare/angular-uploadcare
ডেভিড অবসজনিশভিলি

27
এগহেডের একটি ভাল ভিডিও রয়েছে - এগহেড.আইও
অ্যাডাম জারনার

2
ড্যানিয়ালফারিড / কৌণিক-ফাইল-আপলোডের নাম পরিবর্তন করে এনজি-ফাইল-আপলোড করা হয়েছে
মাইকেল

5
3 বছরের পুরানো উত্তর। আইই 9 এখন 2016 সালে মারা গেছে
ব্যবহারকারী 2404597

5
আমি মনে করি আপনার লিঙ্কগুলিতে নির্দেশ না করে সঠিক উত্তর দেওয়ার জন্য আপনার উত্তরটি আপডেট করা উচিত। স্ট্যাক ওভারফ্লো এর উপায়। অন্যথায় কেবল একটি মন্তব্য হিসাবে।
অ্যালেক্স রেনল্ডস

178

সবচেয়ে সহজ হ'ল এইচটিএমএল 5 এপিআই ব্যবহার করা FileReader

এইচটিএমএল বেশ সোজা:

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

আপনার নিয়ামকটিতে 'যোগ' পদ্ধতিটি সংজ্ঞায়িত করুন:

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

ব্রাউজার সামঞ্জস্য

ডেস্কটপ ব্রাউজারগুলি

এজ 12, ফায়ারফক্স (গেকো) 3.6 (1.9.2), ক্রোম 7, অপেরা * 12.02, সাফারি 6.0.2

মোবাইল ব্রাউজারগুলি

ফায়ারফক্স (গেকো) 32, ক্রোম 3, অপেরা * 11.5, সাফারি 6.1

দ্রষ্টব্য: রিডএএসবাইনারিস্ট্রিং () পদ্ধতিটি অবমূল্যায়ন করা হয়েছে এবং এর পরিবর্তে রিডএএসআর্রেফার () ব্যবহার করা উচিত।


10
ফাইলরেডার স্ট্যান্ডার্ড এইচটিএমএল 5 ফাইল এপিআই w3.org/TR/FileAPI থেকে একটি শ্রেণি । এটি আপনাকে এইচটিএমএল ইনপুট উপাদানগুলিতে নির্দিষ্ট করা ফাইল থেকে ডেটা পড়তে এবং onloadendকলব্যাক ফাংশনের অভ্যন্তরে এটি প্রক্রিয়া করতে দেয়। আপনার ব্রাউজারে এটি ইতিমধ্যে এই এপিআই ব্যবহার করার জন্য আপনার কোনও লাইব্রেরির প্রয়োজন নেই (যদি আপনি খুব পুরানো ব্যবহার না করেন) very আশাকরি এটা সাহায্য করবে.
ইয়াগার

15
FileReader.readAsBinaryString 12 জুলাই 2012 হিসাবে ডাব্লু 3 সি থেকে ওয়ার্কিং ড্রাফ্ট হিসাবে অবচয় করা হয়েছে।
শেন স্টিলওয়েল

13
আপনি কৌনিক সঙ্গে DOM অ্যাক্সেস করা উচিত নয়। খুব খারাপ অভ্যাস।
jeanmatthieud

9
@ সিডেরেক্স কন্ট্রোলারে নেই, তবে নির্দেশিকা থেকে এটি করা সম্পূর্ণ দুর্দান্ত। প্রকৃতপক্ষে, এই জন্য নির্দেশাবলী হয়। আপনি এটি সম্পর্কে কৌণিক ডকস ডকস.আঙ্গুলারজেএস.আর.
গাইড /

1
@ ইয়াগার একটি নির্দিষ্ট কারণ আছে যা আপনার লিঙ্কগুলিতে readAsArrayBufferনিয়মিত, অ্যাসিঙ্ক ফাইলরেডার এপিআইয়ের পরিবর্তে ফাইলআরডারসাইঙ্কের পদ্ধতিটি (যা কেবলমাত্র ওয়েব কর্মীদের মধ্যে উপলব্ধ) রেফারেন্স করছে ?
12:25 এ বোল্ড

58

এটি তৃতীয় পক্ষের লাইব্রেরি ছাড়া আধুনিক ব্রাউজারের উপায়। সর্বশেষতম ব্রাউজারগুলিতে কাজ করে।

 app.directive('myDirective', function (httpPostFactory) {
    return {
        restrict: 'A',
        scope: true,
        link: function (scope, element, attr) {

            element.bind('change', function () {
                var formData = new FormData();
                formData.append('file', element[0].files[0]);
                httpPostFactory('upload_image.php', formData, function (callback) {
                   // recieve image name to use in a ng-src 
                    console.log(callback);
                });
            });

        }
    };
});

app.factory('httpPostFactory', function ($http) {
    return function (file, data, callback) {
        $http({
            url: file,
            method: "POST",
            data: data,
            headers: {'Content-Type': undefined}
        }).success(function (response) {
            callback(response);
        });
    };
});

এইচটিএমএল:

<input data-my-Directive type="file" name="file">

পিএইচপি:

if (isset($_FILES['file']) && $_FILES['file']['error'] == 0) {

// uploads image in the folder images
    $temp = explode(".", $_FILES["file"]["name"]);
    $newfilename = substr(md5(time()), 0, 10) . '.' . end($temp);
    move_uploaded_file($_FILES['file']['tmp_name'], 'images/' . $newfilename);

// give callback to your angular code with the image src name
    echo json_encode($newfilename);
}

জেএস ফ্রিডল (কেবলমাত্র সামনের দিকে) https://jsfiddle.net/vince123/8d18tsey/31/


আপনি নোডে ফাইলটি কীভাবে আনবেন?
রসালো

আর কোন বিবরণ? আপনার কি কোনও ng-submitবা ফর্ম ক্রিয়া দরকার? এটি নিজেই কিছু করে না
অ্যারন

@ এমবার্সো হ্যালো আমি একটি জেএসফিডেল যুক্ত করেছি এবং আরও একটি সম্পূর্ণ পিএইচপি কোড উদাহরণ তৈরি করেছি। ফাইলের ইনপুটটির মান পরিবর্তিত হওয়ার পরে এটি চিত্র জমা দেয় যাতে কোনও এনজি-জমা দেওয়ার প্রয়োজন হয় না।
ভিন্স ভারহোইভেন

নিখুঁততম সহজ সমাধান, তবে আমার ডাব্লুসিএফ পরিষেবাগুলি কীভাবে আপলোড করা হচ্ছিল সেগুলি মোকাবেলা করার জন্য কীভাবে কাজ করতে আমার বয়স হয়েছিল। এটা অত্যাবশ্যক যা তথ্য প্রবাহ গ্রহণ করা, এবং আসলে ফাইলের ডাটা পড়া MultiParser ভালো কিছু মাধ্যমে এটি পাস: stackoverflow.com/a/23702692/391605 অন্যথায় আপনি "এর ------ WebKitFormBoundary কাঁচা বাইট জমা করার হবেন সামগ্রী-বিভাজন: ... ইত্যাদি ""
মাইক গ্লেডহিল

আমার প্রযোজনা 'ট্রান্সফর্মআরয়েস্ট: অ্যাঙ্গুলার.সিডিনিটি' যুক্ত করতে হবে Man এইচটি অনুরোধের অবজেক্ট হিসাবে মনোয় ওঝা আরও একটি লিটল দেখিয়েছেন অন্যথায় কন্টেন্ট-টাইপ সঠিকভাবে সেট করা হবে না এবং উদাহরণটি কাজ করবে না।
গ্রেগর Slavec

38

নীচে ফাইল আপলোডের উদাহরণ কাজ করছে:

http://jsfiddle.net/vishalvasani/4hqVu/

এই এক ফাংশন বলা হয়

setFiles

ভিউ থেকে যা নিয়ামকটিতে ফাইল অ্যারে আপডেট করবে

অথবা

আপনি AngularJS ব্যবহার করে jQuery ফাইল আপলোড চেক করতে পারেন

http://blueimp.github.io/jQuery-File-Upload/angularjs.html


হাই, আমি এমন কিছু সন্ধান করছিলাম যার মাধ্যমে আমি কেবল একটি ফাইল আপলোড করতে পারি এবং এর ঠিক নীচে প্রদর্শন করতে পারি। তবে আপনার উদাহরণে আমি এটি করতে সক্ষম হইনি। কিছু মনে করবেন না তবে আমি এই কৌণিক প্রতিবেদনে নতুন এবং আমার বিশেষ উদ্দেশ্যটি আরও সহজ এবং দৃust়ভাবে এই বিশেষ উদ্দেশ্যে করতে শিখার আমার ইচ্ছা
আদিত্য শেঠি

এটি অনেক সাহায্য করেছিল। ধন্যবাদ!
রাচেলড

অতিরিক্ত লাইব্রেরি / এক্সটেনশন ব্যবহার না করে দুর্দান্ত উদাহরণ। ধন্যবাদ।
মার্কডিজিভার

4
খুব সহায়ক, কেবল একটি নোট .. এটি ফাইল এপিআই ব্যবহার করে যা আই 9 বা নীচে কাজ করে না।
আরজায়াইন

ফলাফল থেকে আমি কীভাবে ত্রুটি পেতে পারি কোনও ধারণা? সার্ভারে কোনও ত্রুটি হতে পারে এবং আমি সেই ত্রুটি বার্তাটি প্রদর্শন করতে চাই ...
কুলারবাইটস

17

আপনি ফ্লো.জেএস ব্যবহার করে দুর্দান্ত ফাইল এবং ফোল্ডার আপলোড করতে পারেন ।

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

এখানে একটি ডেমো দেখুন

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

এটি আই 7, আই 8, আই 9 সমর্থন করে না, সুতরাং আপনাকে শেষ পর্যন্ত একটি সামঞ্জস্যতা স্তর ব্যবহার করতে হবে

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


'प्रवाह.js' চমত্কার, তবে এখনও নথিভুক্ত নয়। আমার একটি একক আপলোডে হেরফের করা দরকার এবং পূর্বরূপ যুক্ত করতে হবে এবং ইভেন্টের বোতামটি পৃথকভাবে প্রেরণ করা হবে তবে কীভাবে এটি করতে হয় তা আমি জানি না।
ফ্রান্সিস রডরিগস

14

onchangeআপনার ফাংশনে ইনপুট ফাইল উপাদানটি পাস করতে ইভেন্টটি ব্যবহার করুন।

<input type="file" onchange="angular.element(this).scope().fileSelected(this)" />

সুতরাং যখন কোনও ব্যবহারকারী কোনও ফাইল নির্বাচন করেন, তখন আপনাকে "অ্যাড" বা "আপলোড" বোতামটি ক্লিক করার প্রয়োজন নেই এমন আপনার কাছে একটি রেফারেন্স রয়েছে।

$scope.fileSelected = function (element) {
    var myFileSelected = element.files[0];
};

2
এটি পছন্দসই হিসাবে কাজ করছে না। এটি আমার কর্মপ্রবাহ: 1. পৃষ্ঠাটি রিফ্রেশ করুন 2. নতুন ফাইল যুক্ত করুন। ** প্রথম ফাইল যুক্ত করা সর্বদা অপরিবর্তিত থাকে * ** ৩. অন্য একটি ফাইল যুক্ত করুন। এখন থেকে আপলোড করা প্রতিটি ফাইলই আমি যুক্ত করা পূর্ববর্তী ফাইল। সুতরাং আমি যুক্ত করা ২ য় ফাইলের জন্য এটি আমার যুক্ত করা প্রথম ফাইলটি আপলোড করবে (যা আসলে ব্যর্থ হয়েছিল)
পুলকিত পাহাওয়া

1
সেরা পদ্ধতি!
স্টেপান ইয়াকোভেনকো

11

@ আয়নজ (সঠিক উত্তর) যে সমস্ত বিকল্প দেয় তা আমি চেষ্টা করেছিলাম ... এবং সর্বোত্তম সমাধানটি হল https://github.com/danialfarid/angular-file-upload

কিছু বৈশিষ্ট্য:

  • উন্নতি
  • Multifiles
  • ক্ষেত্রসমূহ
  • পুরানো ব্রাউজারগুলি (IE8-9)

এটা আমার জন্য ভাল কাজ। আপনাকে কেবল নির্দেশের দিকে মনোযোগ দিতে হবে।

সার্ভার-সাইডে আমি নোডজে, এক্সপ্রেস 4 এবং মাল্টার্ট রিকোয়েস্ট পরিচালনা করতে মুল্টার মিডলওয়্যার ব্যবহার করি।


আপনি কীভাবে চিত্র দেখান? ব্যাকএন্ড থেকে, তারা সাফল্যের সাথে প্রবেশ করছে তবে তারা nlzt9LJWRrAZEO3ZteZUOgGc.png বিন্যাস ছাড়াই সংরক্ষণ করা হচ্ছে । কীভাবে যুক্ত করব?
সরস আর্য

9

এইচটিএমএল

<html>
    <head></head>

<body ng-app = "myApp">

  <form ng-controller = "myCtrl">
     <input type = "file" file-model="files" multiple/>
     <button ng-click = "uploadFile()">upload me</button>
     <li ng-repeat="file in files">{{file.name}}</li>
  </form>

স্ক্রিপ্ট

  <script src = 
     "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script>
    angular.module('myApp', []).directive('fileModel', ['$parse', function ($parse) {
        return {
           restrict: 'A',
           link: function(scope, element, attrs) {
              element.bind('change', function(){
              $parse(attrs.fileModel).assign(scope,element[0].files)
                 scope.$apply();
              });
           }
        };
     }]).controller('myCtrl', ['$scope', '$http', function($scope, $http){


       $scope.uploadFile=function(){
       var fd=new FormData();
        console.log($scope.files);
        angular.forEach($scope.files,function(file){
        fd.append('file',file);
        });
       $http.post('http://localhost:1337/mediaobject/upload',fd,
           {
               transformRequest: angular.identity,
               headers: {'Content-Type': undefined}                     
            }).success(function(d)
                {
                    console.log(d);
                })         
       }
     }]);

  </script>


9

<input type=file>উপাদান সঙ্গে ডিফল্ট কাজ না NG মডেল নির্দেশ । এটির জন্য একটি কাস্টম নির্দেশিকা প্রয়োজন :

select-ng-filesনির্দেশিকাটির ওয়ার্কিং ডেমো যা 1 দিয়ে কাজ করে withng-model

angular.module("app",[]);

angular.module("app").directive("selectNgFiles", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      })
    }
  }
});
<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app">
    <h1>AngularJS Input `type=file` Demo</h1>
    
    <input type="file" select-ng-files ng-model="fileList" multiple>
    
    <h2>Files</h2>
    <div ng-repeat="file in fileList">
      {{file.name}}
    </div>
  </body>


$http.postএকটি ফাইললিস্ট থেকে

$scope.upload = function(url, fileList) {
    var config = { headers: { 'Content-Type': undefined },
                   transformResponse: angular.identity
                 };
    var promises = fileList.map(function(file) {
        return $http.post(url, file, config);
    });
    return $q.all(promises);
};

কোনও ফাইল অবজেক্টের সাথে কোনও পোস্ট পাঠানোর সময় এটি সেট করা গুরুত্বপূর্ণ 'Content-Type': undefinedXHR পাঠান পদ্ধতি তারপর নির্ণয় করতে পারবে ফাইল বস্তুর এবং স্বয়ংক্রিয়ভাবে বিষয়বস্তুর প্রকার সেট।


7

একটি নির্দেশিকা সহ সহজ

এইচটিএমএল:

<input type="file" file-upload multiple/>

জাতীয়:

app.directive('fileUpload', function () {
return {
    scope: true,        //create a new scope
    link: function (scope, el, attrs) {
        el.bind('change', function (event) {
            var files = event.target.files;
            //iterate files since 'multiple' may be specified on the element
            for (var i = 0;i<files.length;i++) {
                //emit event upward
                scope.$emit("fileSelected", { file: files[i] });
            }                                       
        });
    }
};

নির্দেশে আমরা নিশ্চিত করি যে একটি নতুন সুযোগ তৈরি হয়েছে এবং তারপরে ফাইল ইনপুট উপাদানগুলিতে করা পরিবর্তনগুলি শুনুন। যখন পরামিতি হিসাবে ফাইল অবজেক্ট সহ সমস্ত পূর্বপুরুষের স্কোপগুলিতে (wardর্ধ্বমুখী) কোনও ইভেন্ট নির্গত করে পরিবর্তনগুলি সনাক্ত করা হয়।

আপনার নিয়ামক মধ্যে:

$scope.files = [];

//listen for the file selected event
$scope.$on("fileSelected", function (event, args) {
    $scope.$apply(function () {            
        //add the file object to the scope's files collection
        $scope.files.push(args.file);
    });
});

তারপরে আপনার অজ্যাক্স কলটিতে:

data: { model: $scope.model, files: $scope.files }

http://shazwazza.com/post/uploading-files-and-json-data-in-the-same-request-with-angular-js/


7

আমি মনে করি এটি কৌনিক ফাইল আপলোড:

NG ফাইল আপলোড

লাইটওয়েট কৌণিক জেএস ফাইল আপলোড করার নির্দেশ।

এখানে ডেমো পৃষ্ঠা F বৈশিষ্ট্য

  • প্রগতি আপলোড, ফাইল ড্রাগ এবং এনে ড্রপ (এইচটিএমএল 5), ডিরেক্টরি টেনে আনুন এবং ড্রপ (ওয়েবকিট), সিওআরএস, পুট (এইচটিএমএল 5) / পোস্ট পদ্ধতি, ফাইলের ধরণ এবং আকারের বৈধতা, নির্বাচিত চিত্রগুলির পূর্বরূপ দেখান / অডিও / ভিডিও।
  • ক্রস ব্রাউজার ফাইল আপলোড এবং ফাইলআরডার (এইচটিএমএল 5 এবং নন-এইচটিএমএল 5) ফ্ল্যাশ পলিফিল ফাইলএপিআই সহ। ফাইল আপলোড করার আগে ক্লায়েন্টের পক্ষের বৈধতা / পরিবর্তনের অনুমতি দেয়
  • ডাব্লু পরিষেবাগুলিতে সরাসরি আপলোড করুন কাউচডিবি, ইমগুর, ইত্যাদি ... ফাইলের সামগ্রীর ধরণের সাথে আপলোড। Htp () ব্যবহার করে। এটি কৌণিক পোস্ট POST / PUT অনুরোধগুলির জন্য অগ্রগতি ইভেন্ট সক্ষম করে।
  • শিম ফাইলটি পৃথক করুন, ফাইলএপিআই ফাইলগুলি নন-এইচটিএমএল 5 কোডের চাহিদা অনুযায়ী লোড করা হয় যার অর্থ আপনার যদি কেবল HTML5 সমর্থন প্রয়োজন হয় তবে কোনও অতিরিক্ত লোড / কোড নয়।
  • হালকাভাবে আপলোড করতে নিয়মিত $ HTTP ব্যবহার করুন (নন-এইচটিএমএল 5 ব্রাউজারগুলির সাথে শিম সহ) যাতে সমস্ত কৌণিক $ http বৈশিষ্ট্য উপলব্ধ

https://github.com/danialfarid/ng-file-upload


6

আপনার ফাইল এবং জসন ডেটা একই সাথে আপলোড হচ্ছে।

// FIRST SOLUTION
 var _post = function (file, jsonData) {
            $http({
                url: your url,
                method: "POST",
                headers: { 'Content-Type': undefined },
                transformRequest: function (data) {
                    var formData = new FormData();
                    formData.append("model", angular.toJson(data.model));
                    formData.append("file", data.files);
                    return formData;
                },
                data: { model: jsonData, files: file }
            }).then(function (response) {
                ;
            });
        }
// END OF FIRST SOLUTION

// SECOND SOLUTION
// If you can add plural file and  If above code give an error.
// You can try following code
 var _post = function (file, jsonData) {
            $http({
                url: your url,
                method: "POST",
                headers: { 'Content-Type': undefined },
                transformRequest: function (data) {
                    var formData = new FormData();
                    formData.append("model", angular.toJson(data.model));
                for (var i = 0; i < data.files.length; i++) {
                    // add each file to
                    // the form data and iteratively name them
                    formData.append("file" + i, data.files[i]);
                }
                    return formData;
                },
                data: { model: jsonData, files: file }
            }).then(function (response) {
                ;
            });
        }
// END OF SECOND SOLUTION


4

আপনি FormDataনিরাপদে এবং দ্রুত একটি জিনিস ব্যবহার করতে পারেন :

// Store the file object when input field is changed
$scope.contentChanged = function(event){
    if (!event.files.length)
        return null;

    $scope.content = new FormData();
    $scope.content.append('fileUpload', event.files[0]); 
    $scope.$apply();
}

// Upload the file over HTTP
$scope.upload = function(){
    $http({
        method: 'POST', 
        url: '/remote/url',
        headers: {'Content-Type': undefined },
        data: $scope.content,
    }).success(function(response) {
        // Uploading complete
        console.log('Request finished', response);
    });
}

আপনি কী দয়া করে ব্যাখ্যা করতে পারেন যেখানে 'কন্টেন্টচ্যাঞ্জড' হুবহু ব্যবহৃত হয়?
মার্ক জে শমিট

যখন কোনও ফাইল ইনপুট পরিবর্তন হয়, তখন এই ফান্টটি ট্রিগার করা আপলোড প্রক্রিয়া শুরু করবে।
ফারশিদ

1
নেই যেহেতু <input type="file" ng-change="contentChanged($event)">, এটি কিভাবে করবেন?
মার্ক জে শমিট

3

http://jsfiddle.net/vishalvasani/4hqVu/ ক্রোম এবং আইইতে দুর্দান্ত কাজ করে (যদি আপনি ব্যাকগ্রাউন্ড-ইমেজে সিএসএসকে কিছুটা আপডেট করেন)। এটি অগ্রগতি বার আপডেট করার জন্য ব্যবহৃত হয়:

 scope.progress = Math.round(evt.loaded * 100 / evt.total)

তবে ফায়ারফক্সে কৌণিকের [শতাংশ] ডেটা সফলভাবে ডিওমে আপডেট হয় না, যদিও ফাইলগুলি সফলভাবে আপলোড হচ্ছে।


এফএফ-এর জন্য আপনি loadইভেন্টটি শুনতে পারেন এবং যদি দৈর্ঘ্যটি গণনাযোগ্য হয় তবে সফল আপলোডকে নির্দেশ করতে একটি অগ্রগতি ইভেন্ট নিক্ষেপ করুন। github.com/danialfarid/angular-file- আপলোড ইতিমধ্যে এটি যত্ন করে।
ড্যানিয়েল

এটি সেখানে রয়েছে, তবে প্রদত্ত ফিডলে এটিও পরীক্ষা করে প্রয়োগ করা হয়। এখনও এফএফ-তে কোনও আশা নেই।
mayankcpdixit

আমি মনে করি যদি আপনি শুধু uploadComplete ভিতরে uploadProgress কল এটা মুক্তিযোদ্ধা জন্য কাজ করা উচিত
danial

না এটি হয় না, এমনকি যদি এটি আপনি করতে পারেন তবে দয়া করে কেন ব্যাখ্যা করবেন? আমি আমার পোস্টে ফিডলকে একটি লিঙ্ক দিয়েছি। যদি সম্ভব হয় তবে আপনি এটি এফএফ এবং মন্তব্য সমাধানের লিঙ্কটিতে কাজ করে আপডেট করতে পারেন?
mayankcpdixit

ফায়ারফক্সের কোন সংস্করণ?
ড্যানিয়েল

3

আপনি আপলোড কেয়ারের মতো ফাইল আপলোডের জন্য আইএএএস বিবেচনা করতে পারেন । এর জন্য একটি কৌণিক প্যাকেজ রয়েছে: https://github.com/uploadcare/angular-uploadcare

প্রযুক্তিগতভাবে এটি একটি নির্দেশিকা হিসাবে প্রয়োগ করা হয়েছে, আপলোড করার জন্য বিভিন্ন বিকল্প সরবরাহ করে এবং উইজেটের মধ্যে আপলোডকৃত চিত্রগুলির ম্যানিপুলেশনগুলি:

<uploadcare-widget
  ng-model="object.image.info.uuid"
  data-public-key="YOURKEYHERE"
  data-locale="en"
  data-tabs="file url"
  data-images-only="true"
  data-path-value="true"
  data-preview-step="true"
  data-clearable="true"
  data-multiple="false"
  data-crop="400:200"
  on-upload-complete="onUCUploadComplete(info)"
  on-widget-ready="onUCWidgetReady(widget)"
  value="{{ object.image.info.cdnUrl }}"
 />

খেলতে আরও কনফিগারেশন বিকল্প: https://uploadcare.com/widget/configure/


3

আমি জানি এটি একটি দেরী এন্ট্রি তবে আমি একটি সহজ আপলোডের নির্দেশিকা তৈরি করেছি। যা আপনি কোন সময় কাজ করতে পারেন!

<input type="file" multiple ng-simple-upload web-api-url="/api/Upload" callback-fn="myCallback" />

ওয়েব এপিআই ব্যবহার করে গিথুব-এ আরও একটি উদাহরণ সহ এনজি-সিম্পল-আপলোড করুন।


3

এইচটিএমএল

<input type="file" id="file" name='file' onchange="angular.element(this).scope().profileimage(this)" />

আপনার নিয়ামকটিতে 'প্রোফাইলমেজ ()' পদ্ধতি যুক্ত করুন

    $scope.profileimage = function(selectimage) {
      console.log(selectimage.files[0]);
 var selectfile=selectimage.files[0];
        r = new FileReader();
        r.onloadend = function (e) {
            debugger;
            var data = e.target.result;

        }
        r.readAsBinaryString(selectfile);
    }

2

@ Jquery-guru এর উত্তরে এটি আপডেট / মন্তব্য হওয়া উচিত তবে আমার কাছে যথেষ্ট প্রতিনিধি নেই বলে এটি এখানে চলে যাবে। এটি কোড দ্বারা এখন উত্পন্ন ত্রুটিগুলি স্থির করে।

https://jsfiddle.net/vzhrqotw/

পরিবর্তনটি মূলত:

FileUploadCtrl.$inject = ['$scope']
function FileUploadCtrl(scope) {

প্রতি:

app.controller('FileUploadCtrl', function($scope)
{

যদি ইচ্ছা হয় তবে আরও উপযুক্ত স্থানে যেতে নির্দ্বিধায় পড়ুন।


2

আমি সমস্ত থ্রেড পড়েছি এবং এইচটিএমএল 5 এপিআই সলিউশনটি সবচেয়ে ভাল দেখাচ্ছে। তবে এটি আমার বাইনারি ফাইলগুলিকে পরিবর্তন করে, সেগুলি এমনভাবে भ्रষ্ট করে যা আমি তদন্ত করে দেখিনি। আমার পক্ষে যে সমাধানটি পুরোপুরি কার্যকর হয়েছিল তা হ'ল:

এইচটিএমএল:

<input type="file" id="msds" ng-model="msds" name="msds"/>
<button ng-click="msds_update()">
    Upload
</button>

জাতীয়:

msds_update = function() {
    var f = document.getElementById('msds').files[0],
        r = new FileReader();
    r.onloadend = function(e) {
        var data = e.target.result;
        console.log(data);
        var fd = new FormData();
        fd.append('file', data);
        fd.append('file_name', f.name);
        $http.post('server_handler.php', fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .success(function(){
            console.log('success');
        })
        .error(function(){
            console.log('error');
        });
    };
    r.readAsDataURL(f);
}

সার্ভার সাইড (পিএইচপি):

$file_content = $_POST['file'];
$file_content = substr($file_content,
    strlen('data:text/plain;base64,'));
$file_content = base64_decode($file_content);

1

আমি নীচের কোড ব্যবহার করে অ্যাংুলারজেএস ব্যবহার করে ফাইলগুলি আপলোড করতে সক্ষম হয়েছি:

fileযুক্তি ফাংশন জন্য গৃহীত হবে যে জন্য ngUploadFileUploadহয়$scope.file আপনার প্রশ্নের অনুযায়ী।

এখানে মূল পয়েন্টটি ব্যবহার করা হয় transformRequest: []। এটি ফাইলের বিষয়বস্তুগুলির সাথে বিশৃঙ্খলা সহ $ http রোধ করবে।

       function getFileBuffer(file) {
            var deferred = new $q.defer();
            var reader = new FileReader();
            reader.onloadend = function (e) {
                deferred.resolve(e.target.result);
            }
            reader.onerror = function (e) {
                deferred.reject(e.target.error);
            }

            reader.readAsArrayBuffer(file);
            return deferred.promise;
        }

        function ngUploadFileUpload(endPointUrl, file) {

            var deferred = new $q.defer();
            getFileBuffer(file).then(function (arrayBuffer) {

                $http({
                    method: 'POST',
                    url: endPointUrl,
                    headers: {
                        "accept": "application/json;odata=verbose",
                        'X-RequestDigest': spContext.securityValidation,
                        "content-length": arrayBuffer.byteLength
                    },
                    data: arrayBuffer,
                    transformRequest: []
                }).then(function (data) {
                    deferred.resolve(data);
                }, function (error) {
                    deferred.reject(error);
                    console.error("Error", error)
                });
            }, function (error) {
                console.error("Error", error)
            });

            return deferred.promise;

        }

0

উপরে গৃহীত উত্তরগুলি ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ নয়। কারও সাথে যদি সামঞ্জস্যতা সমস্যা থাকে তবে এটি ব্যবহার করে দেখুন।

বেহালা

কোড দেখুন

 <div ng-controller="MyCtrl">
      <input type="file" id="file" name="file"/>
      <br>
      <button ng-click="add()">Add</button>
      <p>{{data}}</p>
    </div>

নিয়ামক কোড

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

function MyCtrl($scope) {
    $scope.data = 'none';    
    $scope.add = function(){
      var f = document.getElementById('file').files[0],
          r = new FileReader();
      r.onloadend = function(e){        
          var binary = "";
var bytes = new Uint8Array(e.target.result);
var length = bytes.byteLength;

for (var i = 0; i < length; i++) 
{
    binary += String.fromCharCode(bytes[i]);
}

$scope.data = (binary).toString();

          alert($scope.data);
      }
      r.readAsArrayBuffer(f);
    }
}

0

সহজ কথায়

এইচটিএমএল - কেবল কোড নীচে যুক্ত করুন

     <form name="upload" class="form" data-ng-submit="addFile()">
  <input type="file" name="file" multiple 
 onchange="angular.element(this).scope().uploadedFile(this)" />
 <button type="submit">Upload </button>
</form>

নিয়ন্ত্রকের মধ্যে - আপনি যখন "ফাইল ফাইল আপলোড" ক্লিক করেন তখন এই ফাংশনটি বলা হয়। এটি ফাইল আপলোড করবে। আপনি এটি কনসোল করতে পারেন

$scope.uploadedFile = function(element) {
$scope.$apply(function($scope) {
  $scope.files = element.files;         
});
}

নিয়ন্ত্রণকারীগুলিতে আরও যুক্ত করুন - নীচে কোডটি ফাংশনে যুক্ত করুন। আপনি "এপিআই (পোষ্ট) মারছেন" " বোতামে ক্লিক করার সময় এই ফাংশনটি বলা হয় । এটি ব্যাকএন্ডে ফাইল (যা আপলোড করা হয়েছে) এবং ফর্ম-ডেটা প্রেরণ করবে।

var url = httpURL + "/reporttojson"
        var files=$scope.files;

         for ( var i = 0; i < files.length; i++)
         {
            var fd = new FormData();
             angular.forEach(files,function(file){
             fd.append('file',file);
             });
             var data ={
              msg : message,
              sub : sub,
              sendMail: sendMail,
              selectUsersAcknowledge:false
             };

             fd.append("data", JSON.stringify(data));
              $http.post(url, fd, {
               withCredentials : false,
               headers : {
                'Content-Type' : undefined
               },
             transformRequest : angular.identity
             }).success(function(data)
             {
                  toastr.success("Notification sent successfully","",{timeOut: 2000});
                  $scope.removereport()
                   $timeout(function() {
                    location.reload();
                }, 1000);

             }).error(function(data)
             {
              toastr.success("Error in Sending Notification","",{timeOut: 2000});
              $scope.removereport()
             });
        }

এই ক্ষেত্রে .. আমি ফর্ম ডেটা হিসাবে কোড নীচে যোগ

var data ={
          msg : message,
          sub : sub,
          sendMail: sendMail,
          selectUsersAcknowledge:false
         };

0
<form id="csv_file_form" ng-submit="submit_import_csv()" method="POST" enctype="multipart/form-data">
    <input ng-model='file' type="file"/>
    <input type="submit" value='Submit'/>
</form>

কৌণিক জেএস কন্ট্রোলারে

$scope.submit_import_csv = function(){

        var formData = new FormData(document.getElementById("csv_file_form"));
        console.log(formData);

        $.ajax({
            url: "import",
            type: 'POST',
            data:  formData,
            mimeType:"multipart/form-data",
            contentType: false,
            cache: false,
            processData:false,
            success: function(result, textStatus, jqXHR)
            {
            console.log(result);
            }
        });

        return false;
    }

0

আমরা এইচটিএমএল, সিএসএস এবং অ্যাঙ্গুলারজেএস ব্যবহার করেছি। অ্যাঙ্গুলারজেএস ব্যবহার করে কীভাবে ফাইল আপলোড করবেন সে সম্পর্কে নিম্নলিখিত উদাহরণটি দেখায়।

<html>

   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>

   <body ng-app = "myApp">

      <div ng-controller = "myCtrl">
         <input type = "file" file-model = "myFile"/>
         <button ng-click = "uploadFile()">upload me</button>
      </div>

      <script>
         var myApp = angular.module('myApp', []);

         myApp.directive('fileModel', ['$parse', function ($parse) {
            return {
               restrict: 'A',
               link: function(scope, element, attrs) {
                  var model = $parse(attrs.fileModel);
                  var modelSetter = model.assign;

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

         myApp.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(){
               })

               .error(function(){
               });
            }
         }]);

         myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
            $scope.uploadFile = function(){
               var file = $scope.myFile;

               console.log('file is ' );
               console.dir(file);

               var uploadUrl = "/fileUpload";
               fileUpload.uploadFileToUrl(file, uploadUrl);
            };
         }]);

      </script>

   </body>
</html>

এটি টিউটোরিয়ালপয়েন্ট থেকে এসেছে , তবে কমপক্ষে আপনি তাদের উদাহরণ সংশোধন করার জন্য ভাল কাজ করেছেন যা স্পষ্টত ভুলের কারণে চালানোও যায় না!
বেনিটো

0

সাধারণ নির্দেশিকা ব্যবহারের উদাহরণ ( এনজি-ফাইল-মডেল ):

.directive("ngFileModel", [function () {
  return {
      $scope: {
          ngFileModel: "="
      },
      link: function ($scope:any, element, attributes) {
          element.bind("change", function (changeEvent:any) {
              var reader = new FileReader();
              reader.onload = function (loadEvent) {
                  $scope.$apply(function () {
                      $scope.ngFileModel = {
                          lastModified: changeEvent.target.files[0].lastModified,
                          lastModifiedDate: changeEvent.target.files[0].lastModifiedDate,
                          name: changeEvent.target.files[0].name,
                          size: changeEvent.target.files[0].size,
                          type: changeEvent.target.files[0].type,
                          data: changeEvent.target.files[0]
                      };
                  });
              }
              reader.readAsDataURL(changeEvent.target.files[0]);
          });
      }
  }
}])

এবং FormDataআপনার ফাংশনে ফাইল আপলোড করতে ব্যবহার করুন।

var formData = new FormData();
 formData.append("document", $scope.ngFileModel.data)
 formData.append("user_id", $scope.userId)

সমস্ত ক্রেডিট https://github.com/mistralworks/ng-file-model এর জন্য যায়

আমি একটি ছোট প্রব্লেম এর মুখোমুখি হয়েছি আপনি এটি এখানে পরীক্ষা করতে পারেন: https://github.com/mistralworks/ng-file-model/issues/7

শেষ অবধি, এখানে একটি কাঁটাযুক্ত রেপো: https://github.com/okasha93/ng-file-model/blob/patch-1/ng-file-model.js


0

কোড ফাইল সন্নিবেশ করতে সাহায্য করবে

<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

এইটা কাজ করে

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

ফাইল আপলোড কর

<input type="file" name="resume" onchange="angular.element(this).scope().uploadResume()" ng-model="fileupload" id="resume" />


        $scope.uploadResume = function () { 
            var f = document.getElementById('resume').files[0];
            $scope.selectedResumeName = f.name;
            $scope.selectedResumeType = f.type;
            r = new FileReader();

            r.onloadend = function (e) { 
                $scope.data = e.target.result;
            }

            r.readAsDataURL(f);

        };

ফাইল ডাউনলোড করুন:

          <a href="{{applicant.resume}}" download> download resume</a>

var app = angular.module("myApp", []);

            app.config(['$compileProvider', function ($compileProvider) {
                $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);
                $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);

            }]);

-1
app.directive('ngUpload', function () {   
  return {    
    restrict: 'A',  
    link: function (scope, element, attrs) {

      var options = {};
      options.enableControls = attrs['uploadOptionsEnableControls'];

      // get scope function to execute on successful form upload
      if (attrs['ngUpload']) {

        element.attr("target", "upload_iframe");
        element.attr("method", "post");

        // Append a timestamp field to the url to prevent browser caching results
        element.attr("action", element.attr("action") + "?_t=" + new Date().getTime());

        element.attr("enctype", "multipart/form-data");
        element.attr("encoding", "multipart/form-data");

        // Retrieve the callback function
        var fn = attrs['ngUpload'].split('(')[0];
        var callbackFn = scope.$eval(fn);
        if (callbackFn == null || callbackFn == undefined || !angular.isFunction(callbackFn))
        {
          var message = "The expression on the ngUpload directive does not point to a valid function.";
          // console.error(message);
          throw message + "\n";
        }                      

        // Helper function to create new  i frame for each form submission
        var addNewDisposableIframe = function (submitControl) {
          // create a new iframe
          var iframe = $("<iframe id='upload_iframe' name='upload_iframe' border='0' width='0' height='0' style='width: 0px; height: 0px;
border: none; display: none' />");

          // attach function to load event of the iframe
          iframe.bind('load', function () {

              // get content - requires jQuery
              var content = iframe.contents().find('body').text();

              // execute the upload response function in the active scope
              scope.$apply(function () { callbackFn(content, content !== "" /* upload completed */); });

              // remove iframe
              if (content != "") // Fixes a bug in Google Chrome that dispose the iframe before content is ready.
                setTimeout(function () { iframe.remove(); }, 250);


              submitControl.attr('disabled', null);
              submitControl.attr('title', 'Click to start upload.');
            });

          // add the new iframe to application
          element.parent().append(iframe);
        };

        // 1) get the upload submit control(s) on the form (submitters must be decorated with the 'ng-upload-submit' class)
        // 2) attach a handler to the controls' click event
        $('.upload-submit', element).click(
          function () {

            addNewDisposableIframe($(this) /* pass the submit control */);

            scope.$apply(function () { callbackFn("Please wait...", false /* upload not completed */); });



            var enabled = true;
            if (options.enableControls === null || options.enableControls === undefined || options.enableControls.length >= 0) {
              // disable the submit control on click
              $(this).attr('disabled', 'disabled');
              enabled = false;
            }

            $(this).attr('title', (enabled ? '[ENABLED]: ' : '[DISABLED]: ') + 'Uploading, please wait...');

            // submit the form
            $(element).submit();
          }
        ).attr('title', 'Click to start upload.');
      }
      else
        alert("No callback function found on the ngUpload directive.");     
    }   
  }; 
});



<form class="form form-inline" name="uploadForm" id="uploadForm"
ng-upload="uploadForm12"  action="rest/uploadHelpFile"  method="post"
enctype="multipart/form-data" style="margin-top: 3px;margin-left:
6px"> <button type="submit" id="mbUploadBtn" class="upload-submit"
ng-hide="true"></button> </form>

@RequestMapping(value = "/uploadHelpFile", method =
RequestMethod.POST)   public @ResponseBody String
uploadHelpFile(@RequestParam(value = "file") CommonsMultipartFile[]
file,@RequestParam(value = "fileName") String
fileName,@RequestParam(value = "helpFileType") String
helpFileType,@RequestParam(value = "helpFileName") String
helpFileName) { }

দয়া করে আপনার উত্তরটি ফর্ম্যাট করুন এটি সঠিক ফর্ম্যাটে নয়
সাইনেশ্বর
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.