Belajar menggunakan AngularJS muat naik fail control

Beberapa masa lalu semasa saya sedang menjalankan projek, saya menghadapi keperluan untuk memuat naik fail Anggaran gaya yang perlu dilaksanakan adalah seperti berikut, lihat gambar di bawah:

Dua fail perlu dimuat naik pada masa yang sama. Dan nyatakan format fail dan saiz fail. Oleh kerana rangka kerja bahagian hadapan menggunakan sudut, dan saya tidak mahu memperkenalkan jquery untuk fungsi muat naik, saya mencari kawalan muat naik berdasarkan sudut di Internet Kerana sudut masih agak baharu, nampaknya tiada palam matang -in. Kebanyakan tutorial dalam talian adalah salin dan tampal, ringkasnya, ia tidak memberi banyak kesan... Tetapi Huangtian membuahkan hasil, dan akhirnya membiarkan saya menemui pemalam yang berkuasa ini, yang membuatkan saya berasa seperti saya. terlambat untuk bertemu dengan anda Dengan bantuan dokumen rasmi dan abang-abang senior, saya akhirnya memahaminya. Perkara yang baik mesti dikongsi, jadi sekarang saya akan berkongsi dengan anda cara menggunakannya Jika anda perlu menggunakannya, saya harap ia dapat membantu anda.

Gaya butang muat naik
Pertama sekali, saya ingin bercakap tentang gaya butang untuk memuat naik fail. Semua orang tahu bahawa tag ini akan digunakan untuk memuat naik. , gaya lalai baris kod ini benar-benar hodoh, lihat gambar di bawah:

Dalam laman web yang sedikit bergaya, gaya sedemikian benar-benar kehilangan imej Dan jika anda perlu menambah kotak input di hadapan untuk memaparkan nama fail, bagaimana anda boleh menyembunyikan kawasan lalai yang memaparkan nama fail. ? Jangan risau, teruskan membaca:

Balut teg input dengan teg, kemudian tetapkan kelegapan teg input kepada 0, dan itu sahaja! ok, lihat kod:

html:

  <div>
    <input class="filename" type="text" readonly="readonly" />
    <a href="javascript:;" name="file">
      <input type="file" name="key"/>浏览
    </a>
  </div>
    <div>
    <input class="filename" type="text" readonly="readonly" />
    <a href="javascript:;" name="file">
      <input type="file" name="key"/>浏览
    </a>
  </div>

Salin selepas log masuk

Kemudian fail css:

.filename{
  width: 300px;
  height: 30px;
  line-height: 30px;
}
a{
  width: 50px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  position: raletive;
  cursor: pointer;
  overflow:hidden;
  display: inline-block;
}
a input{
  position: absolute:
  left: 0;
  top: 0;
  opacity: 0;
}

Salin selepas log masuk

Anda sudah selesai! ! ! Gaya yang anda lihat menjadi seperti ini, lihat gambar di bawah:

Anda boleh mengawal kotak input hadapan untuk memaparkan nama fail yang anda pilih. Bukankah ia lebih bagus?

muat naik fail-sudut

Fail yang kami perlukan boleh didapati dalam contoh. Fail es5-shim.min.js dalam contoh telah diperkenalkan untuk keserasian dengan penyemak imbas lama, jadi pemalam ini benar-benar berkuasa.

Kemudian mari kita gunakan pemalam ini langkah demi langkah untuk melaksanakan fungsi muat naik fail.

Pemalam ini mentakrifkan beberapa arahan: nv-file-drop, nv-file-select, uploader

Berdasarkan makna perkataan, ia sepatutnya tidak sukar untuk meneka yang pertama menyokong pemilihan seretan fail, dan yang kedua ialah pemilihan klik digunakan untuk mengikat objek muat naik yang baru dibuat dalam pengawal.

fail html

<form class="form-horizontal" name="form">
  <div class="form-line">
    <label>请选择证书文件：</label><span class="small-tip">证书文件只支持.pem格式，文件大小1M以内</span>
    <div class="choose-file-area">
      <input class="file-name" type="text" readonly="readonly" ng-model="fileItem.name"/>
      <a href="javascript:;" class="choose-book">
        <input type="file" name="certificate" nv-file-select uploader="uploader" ng-click="clearItems()"/>浏览
      </a>
    </div>
  </div>
  <div class="form-line">
    <label>请选择私钥文件：</label><span class="small-tip">私钥文件只支持.key格式，文件大小1M以内</span>
    <div class="choose-file-area">
      <input class="file-name" type="text" readonly="readonly" ng-model="fileItem1.name"/>
      <a href="javascript:;" class="choose-key">
        <input type="file" name="key" nv-file-select uploader="uploader1" ng-click="clearItems1()"/>浏览
      </a>
    </div>
  </div>
  <button type="submit" ng-click="UploadFile()">提交</button>
</form>

Salin selepas log masuk

Pertama sekali, ambil perhatian bahawa dua fail perlu dimuat naik di sini, jadi saya mencipta dua objek muat naik untuk memudahkan pengurusan fail dan pemprosesan fungsi panggil balik. Akhir sekali, berikan butang muat naik acara klik dan kendalikan acara muat naik kedua-dua objek pada masa yang sama.

Fail pengawal

var app = angular.module('app', ['angularFileUpload']);
app.controller('uploadController',['$scope', 'FileUploader', function($scope, FileUploader) {
  $scope.uploadStatus = $scope.uploadStatus1 = false; //定义两个上传后返回的状态，成功获失败
  var uploader = $scope.uploader = new FileUploader({
    url: 'upload.php',
    queueLimit: 1,   //文件个数 
    removeAfterUpload: true  //上传后删除文件
  });
  var uploader1 = $scope.uploader1 = new FileUploader({
    url: 'upload.php',
    queueLimit: 1,
    removeAfterUpload: true  
  });
  $scope.clearItems = function(){  //重新选择文件时，清空队列，达到覆盖文件的效果
    uploader.clearQueue();
  }
  $scope.clearItems1 = function(){
    uploader1.clearQueue();
  }
  uploader.onAfterAddingFile = function(fileItem) {
    $scope.fileItem = fileItem._file;  //添加文件之后，把文件信息赋给scope
  };
  uploader1.onAfterAddingFile = function(fileItem) {
    $scope.fileItem1 = fileItem._file;  //添加文件之后，把文件信息赋给scope
    //能够在这里判断添加的文件名后缀和文件大小是否满足需求。
  };
  uploader.onSuccessItem = function(fileItem, response, status, headers) {
    $scope.uploadStatus = true;  //上传成功则把状态改为true
  };
  uploader1.onSuccessItem = function(fileItem,response, status, headers){
    $scope.uploadStatus1 = true;
  }
  $scope.UploadFile = function(){
    uploader.uploadAll();
    uploader1.uploadAll();
    if(status){
      if(status1){
        alert('上传成功！');
      }else{
        alert('证书成功！私钥失败！');
      }
    }else{
      if(status1){
        alert('私钥成功！证书失败！');
      }else{
        alert('上传失败！');
      }
    }
  }
}])

Salin selepas log masuk

Ringkasan
Dalam contoh di atas, saya menentukan dua objek muat naik kerana saya ingin memuat naik dua fail Setiap kali saya memilih semula fail, saya harus menulis ganti fail yang dipilih sebelum ini, jika saya mentakrifkan objek, ia adalah sedikit sukar untuk menimpa kedudukannya, dan menentukan dua objek, apabila memilih semula, anda boleh mengosongkan baris gilir fail objek semasa dahulu, dan kemudian menambahnya.

Malah, saya kemudiannya mendapati bahawa tidak perlu mentakrifkan dua objek muat naik, kerana pemalam ini menyediakan kaedah removeFromQueue(index), dan indeks ialah nilai indeks fail dalam tatasusunan baris gilir fail. Kerana fail dipilih dua kali, panjang dikawal kepada 2, dan kemudian kaedah ini dipanggil setiap kali ia dipilih, dan 0 atau 1 diluluskan mengikut kedudukan.

Jika anda perlu boleh memilih berbilang fail dalam tetingkap yang sama, hanya gunakan .

Jika anda perlu mengehadkan jenis fail, anda boleh menggunakan '.

Terima senarai jenis nilai:

* accept="application/msexcel"

* accept="application/msword"

* accept="application/pdf"

* accept="application/poscript"

* accept="application/rtf"

* accept="application/x-zip-compressed"
 
* accept="audio/basic"

* accept="audio/x-aiff"

* accept="audio/x-mpeg"

* accept="audio/x-pn/realaudio"

* accept="audio/x-waw"

* accept="image/*"

* accept="image/gif"
  
* accept="image/jpeg"

* accept="image/tiff"

* accept="image/x-ms-bmp"

* accept="image/x-photo-cd"

* accept="image/x-png"

* accept="image/x-portablebitmap"

* accept="image/x-portable-greymap"

* accept="image/x-portable-pixmap"

* accept="image/x-rgb"

* accept="text/html"

* accept="text/plain"

* accept="video/quicktime"

* accept="video/x-mpeg2"

* accept="video/x-msvideo"

Salin selepas log masuk

Pemalam ini juga menyediakan banyak parameter konfigurasi, kaedah objek dan fungsi panggil balik.

Di atas adalah pengenalan kepada cara menggunakan kawalan muat naik fail AngularJS saya harap ia akan membantu pembelajaran semua orang.