Unggah File menggunakan AngularJS


296

Ini formulir HTML saya:

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

Saya ingin mengunggah gambar dari mesin lokal dan ingin membaca konten file yang diunggah. Semua ini ingin saya lakukan menggunakan AngularJS.

Ketika saya mencoba mencetak nilai $scope.fileitu datang sebagai tidak terdefinisi.



Jawaban:


344

Beberapa jawaban di sini mengusulkan penggunaan FormData(), tetapi sayangnya itu adalah objek browser yang tidak tersedia di Internet Explorer 9 dan di bawahnya. Jika Anda perlu mendukung browser yang lebih lama, Anda akan memerlukan strategi cadangan seperti menggunakan <iframe>atau Flash.

Sudah ada banyak modul Angular.js untuk melakukan pengunggahan file. Keduanya memiliki dukungan eksplisit untuk browser lama:

Dan beberapa opsi lain:

Salah satunya harus sesuai dengan proyek Anda, atau mungkin memberi Anda wawasan tentang cara membuat kode sendiri.


4
Satu lagi solusi (IaaS untuk mengunggah file): github.com/uploadcare/angular-uploadcare
David Avsajanishvili

27
EggHead memiliki video yang bagus tentang ini - egghead.io/lessons/angularjs-file-uploads
Adam Zerner

2
danialfarid / angular-file-upload diubah namanya menjadi ng-file-upload
Michael

5
Jawaban 3 tahun. IE 9 sudah MATI sekarang di 2016.
user2404597

5
Saya pikir Anda harus memperbarui jawaban Anda untuk memiliki solusi yang tepat alih-alih menunjuk ke tautan. Itulah cara stack overflow. Kalau tidak, buat saja itu sebagai komentar.
Alex Reynolds

178

Yang paling mudah adalah dengan menggunakan HTML5 API, yaitu FileReader

HTML cukup mudah:

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

Di controller Anda, tentukan metode 'add':

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

Kompatibilitas Browser

Browser Desktop

Edge 12, Firefox (Gecko) 3.6 (1.9.2), Chrome 7, Opera * 12.02, Safari 6.0.2

Peramban Seluler

Firefox (Gecko) 32, Chrome 3, Opera * 11.5, Safari 6.1

Catatan: metode readAsBinaryString () sudah usang dan readAsArrayBuffer () harus digunakan sebagai gantinya.


10
FileReader adalah kelas dari API File HTML5 standar w3.org/TR/FileAPI . Ini memungkinkan Anda membaca data dari file yang ditentukan dalam elemen input html dan memprosesnya di dalam onloadendfungsi panggilan balik. Anda tidak perlu pustaka untuk menggunakan API ini, sudah ada di browser Anda (kecuali jika Anda menggunakan yang sangat lama). Semoga ini membantu.
belati

15
FileReader.readAsBinaryString sudah tidak digunakan lagi sejak 12 Juli 2012, Working Draft dari W3C.
Shane Stillwell

13
Anda tidak boleh mengakses DOM dengan sudut. Merupakan praktik yang sangat buruk.
jeanmatthieud

9
@ Siderex, tidak di controller, tetapi benar-benar bagus untuk melakukannya dari arahan. Sebenarnya, ini adalah tujuan arahan. Anda dapat membacanya di Angular docs docs.angularjs.org/guide/directive
yagger

1
@yagger apakah ada alasan khusus mengapa tautan Anda merujuk readAsArrayBuffermetode FileReaderSync (yang hanya tersedia di pekerja web) alih-alih API FileReader async biasa ?
doldt

58

Ini adalah cara browser modern, tanpa perpustakaan pihak ke-3. Bekerja pada semua browser terbaru.

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

HTML:

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

PHP:

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

js fiddle (hanya bagian depan) https://jsfiddle.net/vince123/8d18tsey/31/


Bagaimana Anda akan mengambil file dalam node?
Juicy

Ada detail lebih lanjut? Apakah Anda memerlukan tindakan ng-submitatau formulir? Ini dengan sendirinya tidak melakukan apa pun
Aron

@Emaborsa halo saya menambahkan jsfiddle dan membuat contoh kode php yang lebih lengkap. Ini mengirimkan gambar setelah nilai input file telah berubah sehingga tidak perlu ng-kirim.
Vince Verhoeven

Solusi paling sederhana yang sempurna, tetapi butuh waktu lama bagi saya untuk mengetahui cara mendapatkan layanan WCF untuk mengatasi data yang sedang diunggah. Sangat penting bagi Anda untuk mengambil aliran data, dan meneruskannya melalui sesuatu seperti MultiParser untuk benar-benar membaca data file: stackoverflow.com/a/23702692/391605 Kalau tidak, Anda akan menyimpan byte mentah "------ WebKitFormBoundary Content-Disposition: ... dll .. "
Mike Gledhill

Saya perlu menambahkan properti 'transformRequest: angular.identity' ke objek permintaan $ http seperti yang ditunjukkan oleh Manoy Ojha sedikit lebih jauh ke bawah kalau tidak, Content-Type tidak akan diatur dengan benar dan contohnya tidak akan berfungsi.
Gregor Slavec

38

Di bawah ini adalah contoh unggahan file yang berfungsi:

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

Dalam fungsi yang satu ini disebut

setFiles

Dari View yang akan memperbarui array file di controller

atau

Anda dapat memeriksa Upload File jQuery menggunakan AngularJS

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


Hai, saya sedang mencari sesuatu yang bisa saya unggah satu file dan tampilkan tepat di bawahnya. Namun dalam contoh Anda, saya tidak dapat melakukan hal yang sama. Jangan keberatan tetapi saya baru dengan sudut ini dan niat saya untuk belajar melakukan tujuan khusus ini dengan cara yang lebih sederhana namun kuat.
Aditya Sethi

Ini sangat membantu. Terima kasih!
RachelD

Contoh luar biasa tanpa menggunakan pustaka / ekstensi tambahan. Terima kasih.
markdsievers

4
Sangat membantu, hanya sebuah catatan .. ini menggunakan API File yang tidak berfungsi di IE9 atau di bawah.
ArjaaAine

Adakah yang tahu bagaimana saya mendapatkan kesalahan dari hasil? Server mungkin menemukan kesalahan dan saya ingin menampilkan pesan kesalahan itu ...
CularBytes

17

Anda dapat mencapai bagus berkas dan folder upload menggunakan flow.js .

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

Lihat demo di sini

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

Itu tidak mendukung IE7, IE8, IE9, jadi Anda akhirnya harus menggunakan lapisan kompatibilitas

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


`flow.js 'fantastis, tetapi dokumentasi masih kurang. Saya perlu memanipulasi satu unggahan dan menambahkan pratinjau serta mengirim tombol acara terpisah tetapi saya tidak tahu bagaimana cara melakukannya.
Francis Rodrigues

14

Gunakan onchangeacara tersebut untuk meneruskan elemen file input ke fungsi Anda.

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

Jadi, ketika pengguna memilih file, Anda memiliki referensi untuk itu tanpa pengguna perlu mengklik tombol "Tambah" atau "Unggah".

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

2
Ini tidak berfungsi seperti yang diinginkan. Ini adalah alur kerja saya: 1. Refresh halaman 2. Tambahkan file baru. ** File pertama yang ditambahkan selalu tidak terdefinisi. ** 3. Tambahkan file lain. Mulai sekarang, setiap file yang diunggah adalah file sebelumnya yang saya tambahkan. Jadi untuk file ke-2 yang saya tambahkan, ini akan mengunggah file pertama yang saya tambahkan (yang sebenarnya gagal)
Pulkit Pahwa

1
metode terbaik!
Stepan Yakovenko

11

Saya mencoba semua alternatif yang @Anoyz (jawaban yang benar) berikan ... dan solusi terbaik adalah https://github.com/danialfarid/angular-file-upload

Beberapa fitur:

  • Kemajuan
  • Multifiles
  • Bidang
  • Browser lama (IE8-9)

Ini bekerja dengan baik untuk saya. Anda hanya harus memperhatikan instruksi.

Di sisi server saya menggunakan NodeJs, Express 4 dan Multer middleware untuk mengelola permintaan multi-bagian.


Bagaimana Anda menunjukkan gambar? Dari backend, mereka berhasil masuk, tetapi mereka diselamatkan karena nlzt9LJWRrAZEO3ZteZUOgGctetapi tanpa format .png. Bagaimana cara menambahkannya?
Saras Arya

9

HTML

<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>

Skrip

  <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

The <input type=file>unsur tidak oleh pekerjaan default dengan ng-model yang direktif . Perlu arahan khusus :

Demo Kerja select-ng-filesPetunjuk yang Bekerja dengan ng-model1

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.postdari FileList

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

Saat mengirim POST dengan objek File , penting untuk mengatur 'Content-Type': undefined. The XHR mengirim Metode maka akan mendeteksi objek File dan secara otomatis mengatur jenis konten.


7

Mudah dengan arahan

Html:

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

JS:

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

Dalam arahan kami memastikan ruang lingkup baru dibuat dan kemudian mendengarkan perubahan yang dilakukan pada elemen input file. Ketika perubahan terdeteksi dengan memancarkan suatu peristiwa ke semua cakupan leluhur (ke atas) dengan objek file sebagai parameter.

Di controller Anda:

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

Kemudian dalam panggilan ajax Anda:

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

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


7

saya pikir ini adalah unggahan file sudut:

ng-file-upload

Arahan JS Angular Ringan untuk mengunggah file.

Ini halaman DEMO. Fitur

  • Mendukung kemajuan unggahan, batalkan / batalkan unggahan saat berlangsung, Seret dan jatuhkan file (html5), Seret dan lepas direktori (webkit), CORS, PUT (html5) / Metode POST, validasi jenis dan ukuran file, tunjukkan pratinjau gambar yang dipilih / audio / video.
  • Unggah file browser lintas dan FileReader (HTML5 dan non-HTML5) dengan Flash polyfill FileAPI. Mengizinkan validasi / modifikasi sisi klien sebelum mengunggah file
  • Upload langsung ke layanan db CouchDB, imgur, dll ... dengan jenis konten file menggunakan Upload.http (). Ini memungkinkan progres acara untuk permintaan http POST / PUT sudut.
  • File shim yang terpisah, file FileAPI diambil berdasarkan permintaan untuk kode non-HTML5 yang berarti tidak ada beban tambahan / kode jika Anda hanya memerlukan dukungan HTML5.
  • Ringan menggunakan $ http biasa untuk mengunggah (dengan shim untuk browser non-HTML5) sehingga semua fitur $ http sudut tersedia

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


6

File Anda dan mengunggah data json pada saat yang sama.

// 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

Anda dapat menggunakan FormDataobjek yang aman dan cepat:

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

Bisakah Anda juga menjelaskan di mana 'contentChanged' digunakan tepatnya?
Marc J. Schmidt

Ketika input file berubah, memicu funtion ini akan memulai proses unggah.
Farsheed

1
Karena tidak ada <input type="file" ng-change="contentChanged($event)">, bagaimana cara melakukannya?
Marc J. Schmidt

3

http://jsfiddle.net/vishalvasani/4hqVu/ berfungsi dengan baik di chrome dan IE (jika Anda memperbarui CSS sedikit di latar belakang-gambar). Ini digunakan untuk memperbarui bilah kemajuan:

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

tetapi data [persen] sudut FireFox tidak berhasil diperbarui dalam DOM, meskipun file berhasil diunggah.


Untuk FF Anda dapat mendengarkan loadacara dan jika panjangnya dapat dihitung maka jalankan acara kemajuan untuk menunjukkan keberhasilan unggahan. github.com/danialfarid/angular-file-upload sudah menangani itu.
danial

Itu ada di sana, tetapi dalam biola yang diberikan juga diperiksa dan diterapkan. Masih tidak ada harapan di FF.
mayankcpdixit

Saya pikir jika Anda hanya memanggil uploadProgress di dalam uploadLengkap itu harus bekerja untuk FF
danial

TIDAK itu tidak, dan bahkan jika itu bisa tolong jelaskan mengapa? Saya telah memberikan tautan ke biola di pos saya. Jika memungkinkan, tolong perbarui untuk bekerja di FF dan tautan solusi komentar di sini?
mayankcpdixit

Apa versi Firefox?
danial

3

Anda dapat mempertimbangkan IaaS untuk mengunggah file, seperti Uploadcare . Ada paket Angular untuk itu: https://github.com/uploadcare/angular-uploadcare

Secara teknis ini diterapkan sebagai arahan, menyediakan berbagai opsi untuk mengunggah, dan manipulasi untuk gambar yang diunggah dalam widget:

<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 }}"
 />

Opsi konfigurasi lain untuk dimainkan: https://uploadcare.com/widget/configure/


3

Saya tahu ini entri yang terlambat, tetapi saya telah membuat arahan unggahan yang sederhana. Yang mana Anda bisa bekerja dalam waktu singkat!

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

ng-sederhana-unggah lagi di Github dengan contoh menggunakan Web API.


3

HTML

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

tambahkan metode 'profileimage ()' ke controller Anda

    $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

Ini harusnya merupakan pembaruan / komentar untuk jawaban @ jquery-guru tetapi karena saya tidak memiliki cukup perwakilan, ini akan masuk ke sini. Ini memperbaiki kesalahan yang sekarang dihasilkan oleh kode.

https://jsfiddle.net/vzhrqotw/

Perubahan pada dasarnya adalah:

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

Untuk:

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

Jangan ragu untuk pindah ke lokasi yang lebih tepat jika diinginkan.


2

Saya telah membaca semua utas dan solusi API HTML5 tampak yang terbaik. Tapi itu mengubah file biner saya, merusaknya dengan cara yang belum saya selidiki. Solusi yang bekerja dengan sempurna bagi saya adalah:

HTML:

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

JS:

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

Sisi server (PHP):

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

1

Saya dapat mengunggah file menggunakan AngularJS dengan menggunakan kode di bawah ini:

The fileuntuk argumen yang perlu dilalui untuk fungsi ngUploadFileUploadadalah$scope.file sebagai per pertanyaan Anda.

Poin kunci di sini adalah menggunakan transformRequest: []. Ini akan mencegah $ http untuk mengacaukan isi file.

       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

Jawaban yang diterima di atas tidak kompatibel dengan browser. Jika seseorang memiliki masalah kompatibilitas coba ini.

Biola

Lihat Kode

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

Kode pengontrol

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

dengan kata-kata sederhana

dalam Html - tambahkan hanya kode di bawah ini

     <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>

di controller - Fungsi ini dipanggil ketika Anda mengklik "tombol unggah file" . itu akan mengunggah file. Anda bisa menghiburnya.

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

tambahkan lebih banyak di pengontrol - kode di bawah ini menambah fungsi. Fungsi ini dipanggil ketika Anda mengklik tombol yang digunakan "hitting the api (POST)" . itu akan mengirim file (yang diunggah) dan form-data ke backend.

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

dalam hal ini .. saya menambahkan kode di bawah ini sebagai data formulir

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>

Di pengontrol angularJS

$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

Kami telah menggunakan HTML, CSS, dan AngularJS. Contoh berikut menunjukkan tentang cara mengunggah file menggunakan AngularJS.

<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>

Ini berasal dari TutorialsPoint , tetapi setidaknya Anda melakukan pekerjaan yang baik untuk memperbaiki contoh mereka, yang bahkan tidak dapat berjalan karena kesalahan yang jelas!
Benito

0

Contoh Kerja menggunakan Petunjuk Sederhana ( ng-file-model ):

.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]);
          });
      }
  }
}])

dan gunakan FormDatauntuk mengunggah file di fungsi Anda.

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

semua kredit berlaku https://github.com/mistralworks/ng-file-model

Saya telah menghadapi masalah kecil, Anda dapat memeriksanya di sini: https://github.com/mistralworks/ng-file-model/issues/7

Akhirnya, inilah repo bercabang: https://github.com/okasha93/ng-file-model/blob/patch-1/ng-file-model.js


0

Kode ini akan membantu memasukkan file

<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

ini bekerja

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

UNGGAH BERKAS

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

        };

UNDUH FILE:

          <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) { }

tolong format jawaban Anda itu tidak dalam format yang tepat
Saineshwar
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.