QTI

qti.vn. Được tạo bởi Blogger.

Thứ Tư, 13 tháng 7, 2016

AngularJs: How to check for changes in file input fields?


No binding support for File Upload control
https://github.com/angular/angular.js/issues/1375
<div ng-controller="form-cntlr">
        <form>
             <button ng-click="selectFile()">Upload Your File</button>
             <input type="file" style="display:none" 
                id="file" name='file' onchange="angular.element(this).scope().fileNameChanged(this)" />
        </form>  
    </div>
instead of
 <input type="file" style="display:none" 
    id="file" name='file' ng-Change="fileNameChanged()" />
can you try
<input type="file" style="display:none" 
    id="file" name='file' onchange="angular.element(this).scope().fileNameChanged()" />
Note: this requires the angular application to always be in debug mode. This will not work in production code if debug mode is disabled.
and in your function changes instead of
$scope.fileNameChanged = function() {
   alert("select file");
}
can you try
$scope.fileNameChanged = function() {
  console.log("select file");
}
Below is one working example of file upload with drag drop file upload may be helpful http://jsfiddle.net/danielzen/utp7j/
Angular File Upload Information
URL for AngularJS File Upload in ASP.Net
http://cgeers.com/2013/05/03/angularjs-file-upload/
AngularJs native multi-file upload with progress with NodeJS
http://jasonturim.wordpress.com/2013/09/12/angularjs-native-multi-file-upload-with-progress/
ngUpload - An AngularJS Service for uploading files using iframe
http://ngmodules.org/modules/ngUpload

FileReader.readAsDataURL()


The readAsDataURL method is used to read the contents of the specified Blob or File. When the read operation is finished, the readyState becomes DONE, and the loadend is triggered. At that time, the result attribute contains  the data as a URL representing the file's data as a base64 encoded string.

Syntax

instanceOfFileReader.readAsDataURL(blob);

Parameters

blob
The Blob or File from which to read.

Example

HTML

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

JavaScript

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

Live Result



Example reading multiple files

HTML

<input id="browse" type="file" onchange="previewFiles()" multiple>
<div id="preview"></div>

JavaScript

function previewFiles() {

  var preview = document.querySelector('#preview');
  var files   = document.querySelector('input[type=file]').files;

  function readAndPreview(file) {

    // Make sure `file.name` matches our extensions criteria
    if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
      var reader = new FileReader();

      reader.addEventListener("load", function () {
        var image = new Image();
        image.height = 100;
        image.title = file.name;
        image.src = this.result;
        preview.appendChild( image );
      }, false);

      reader.readAsDataURL(file);
    }

  }

  if (files) {
    [].forEach.call(files, readAndPreview);
  }

}
Note: The FileReader() constructor was not supported by Internet Explorer for versions before 10. For a full compatibility code you can see our crossbrowser possible solution for image preview. See also this more powerful example.

Specifications

SpecificationStatusComment
File API
The definition of 'FileReader' in that specification.
Working DraftInitial definition

Browser compatibility

FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support3.6 (1.9.2)[1]710[2]12.02[3]6.0
[1] Prior to Gecko 2.0 beta 7 (Firefox 4.0 beta 7), all Blob parameters below were Fileparameters; this has since been updated to match the specification correctly. Prior to Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10) the FileReader.error property returned a FileError object. This interface has been removed and FileReader.error is now returning the DOMError object as defined in the latest FileAPI draft.
[2] IE9 has a File API Lab.
[3] Opera has partial support in 11.1.

See also

Thứ Tư, 6 tháng 7, 2016

MongoDB 2.6 does not start on Ubuntu 15.04


I installed from the debian wheeze repository and it works fine.
First make sure you remove the mongodb-org package and all its dependencies:
sudo apt-get purge mongodb-org
sudo apt-get autoremove
Remove the old mongodb.list you created:
sudo rm /etc/apt/sources.list.d/mongodb.list
Use the Debian repository instead:
echo "deb http://repo.mongodb.org/apt/debian wheezy/mongodb-org/3.0 main" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.0.list
Update and install again:
sudo apt-get update
sudo apt-get install -y mongodb-org
After that, you can succesffully start the server:
sudo service mongod start
or
systemctl start mongod
(as clarified by Ernie Hershey in reply to Roman Gaufman's comment here: https://jira.mongodb.org/browse/SERVER-17742)

Thứ Năm, 23 tháng 6, 2016

Các mẫu nút bấm được làm bằng CSS3


CSS2.1 trở về trước, để làm button bạn thường phải cắt thành file ảnh và sử dụng dạng background (mất nhiều thời gian và khó tùy biến). Nhưng với các tính năng mới cộng với việc rất nhiều trình duyệt hỗ trợ CSS3 thì đã tới lúc bạn có thể sử dụng CSS3 để làm các nút bấm trong website của mình.
Có rất nhiều thuộc tính giúp bạn thiết kế một nút bấm (button) với CSS3: như thuộc tính border-radius (sử dụng bo tròn góc), linear-gradient và box-shadow (sử dụng tạo độ sâu), transitions (sử dụng tạo hiệu ứng khi hover, click chuột)…
Bài viết này giới thiệu tới các bạn một số ví dụ về tạo nút bấm trong CSS3 (một vài link là tutorial), bạn có thể tải về để sử dụng hoặc để nghiên cứu, học tập. Và nếu bạn có thể làm được những nút bấm đẹp hơn thì hãy chia sẻ nó với ntuts nhé.

CSS3 Animated Bubble Buttons

CSS3 Animated Bubble Buttons

BonBon Buttons

BonBon Buttons

CSS3 Buttons With Simple Markup

CSS3 Buttons With Simple Markup

Super Awesome Buttons with CSS3 and RGBA

Super Awesome Buttons with CSS3 and RGBA

10 Nice CSS3 Buttons



10 Nice CSS3 Buttons

Nguồn : http://docs.serenco.net/cac-mau-nut-bam-duoc-lam-bang-css3.html

Make a function available in every controller in angular


You basically have two options, either define it as a service, or place it on your root scope. I would suggest that you make a service out of it to avoid polluting the root scope. You create a service and make it available in your controller like this:

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
    <script type="text/javascript">
    var myApp = angular.module('myApp', []);

    myApp.factory('myService', function() {
        return {
            foo: function() {
                alert("I'm foo!");
            }
        };
    });

    myApp.controller('MainCtrl', ['$scope', 'myService', function($scope, myService) {
        $scope.callFoo = function() {
            myService.foo();
        }
    }]);
    </script>
</head>
<body ng-controller="MainCtrl">
    <button ng-click="callFoo()">Call foo</button>
</body>
</html>

If that's not an option for you, you can add it to the root scope like this:

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
    <script type="text/javascript">
    var myApp = angular.module('myApp', []);

    myApp.run(function($rootScope) {
        $rootScope.globalFoo = function() {
            alert("I'm global foo!");
        };
    });

    myApp.controller('MainCtrl', ['$scope', function($scope){

    }]);
    </script>
</head>
<body ng-controller="MainCtrl">
    <button ng-click="globalFoo()">Call global foo</button>
</body>
</html>
 That way, all of your templates can call globalFoo() without having to pass it to the template from the controller.

Docker là gì? Cơ bản về Docker


Trong thời gian gần đây có rất nhiều bài báo, hay blog, và cả trên Twitter có rất nhiều người đề cập đến Docker. Vậy Docker là gì và tại sao nó hữu ích.


# Docker là gì?

Docker - đây là một công cụ tạo môi trường được "đóng gói" (còn gọi là Container) trên máy tính mà không làm tác động tới môi trường hiện tại của máy, môi trường trong Docker sẽ chạy độc lập.
Một số developer thường tạo sẵn các môi trường này, và upload lên mạng để mọi người lấy về dùng, và mấy cái này gọi là các Images.

# Docker và máy ảo?

Docker là công cụ tạo môi trường đóng gói, nó còn đóng gói cả hệ điều hành trong đó, vậy Docker khác máy ảo chỗ nào?

Máy ảo

Mỗi máy ảo chứa ứng dụng, kèm theo các thư viện và hệ điều hành, mỗi ứng dụng như vậy chiếm hàng chục GBs.

Docker

Mỗi containers chứa ứng dụng gồm chứa các thư viện riêng, nhưng kernel được chia sẻ với các containers khác. Mỗi kernel được chạy trong các môi trường độc lập với nhau. Docker infrastructure chạy được trên mọi máy tính, đám mây hay nền tảng nào. Vì vậy bạn có thể vận chuyển ứng dụng đến bất cứ đâu và không cần phải quan tâm đến môi trường phát triển, thiếu thư viện, ...



Tóm lại, docker:

  • Docker rất tốt tại việc xây dựng và chia sẻ Disk Image qua hệ thống Docker Index
  • Docker là một phần mềm quản lý cơ sở hạ tầng.
  • Docker làm việc tuyệt vời với các công cụ quản lý file config (vd: Chef, Puppet)
  • Docker sử dụng btrfs để giảm sát các file hệ thống và có thể được chia sẻ với user khác. (Như cách hoạt động của Git)
  • Docker có một bộ kho trung tâm của các Disk Images (có thể được public hoặc private), điều này cho phép bạn dễ dàng chạy trên nhiều hệ điều hành khác nhau (Ubuntu, Centos, Fedora, Gentoo).

# Khi nào thì sử dụng Docker

  • Docker là một công cụ đơn giản, như Git hay Java, mà cho phép bạn kết hợp chặt chẽ tới công việc phát triển hay điều hành hàng ngày của bạn.
  • Sử dụng Docker như là một phần mềm quản lý phiên bản (version control system) cho toàn hệ điều hành của bạn.
  • Sử dụng Docker khi bạn muốn đóng góp hay hợp tác hệ điều hành của bạn với một nhóm nào đó.
  • Sử dụng Docker để chạy những dòng code trên laptop của bạn trong môi trường giống hệt như trên server của bạn.
  • Sử dụng Docker khi app của bạn cần trải qua nhiều giai đoạn khác nhau của quá trình phát triển.

Hãy thử dùng và trải nghiệm docker. Mình sẽ liệt kê một số lệnh hay dùng trong Docker

# Các lệnh cơ bản

Pull một image từ Docker Hub

docker pull <image name>

Tạo một container từ image có sẵn

docker run -v <thư mc trên máy tính>:<thư mc trong container> -it <image name> /bin/bash


Lệnh trên tạo container, liên kết một thư mục trên máy tính vào bên trong container, và mở bash trong máy đó.

Khi cần phải map cổng đó từ container ra máy tính ngoài, khi đó chúng ta dùng thêm tham số -p như sau:
docker run -v /abc:/abc -p 8080:8080 -it ubuntu /bin/bash

Lệnh trên map cổng 8080 của container ra cổng 8080 của máy tính hiện tại.

Liệt kê các images hiện có

docker images


Trong kết quả trả về của lệnh này, chúng ta lưu ý các thông số:
  • TAG: là tên của image, ví dụ duyetdev/docker-spark 
  • IMAGE ID: là ID của image lưu trong hệ thống, ví dụ 91e54dfb1179 

Liệt kê các container đang chạy

docker ps
docker ps -a # liệt kê các container đã tắt


  • CONTAINER ID: Là ID của container đó, ví dụ 4cc671941ee3 
  • NAME: Là tên riêng của container, được tạo ra một cách ngẫu nhiên hoặc có thể tự đặt, ví dụ stupefied_blackwell 

Khởi động và truy cập lại vào một container đã tắt

Nếu một container đã tắt (không xuất hiện khi dùng lệnh docker ps nữa, chúng ta có thể chạy lệnh docker ps -a để lấy ID hoặc NAME của nó, sau đó dùng lệnh sau để khởi động và truy cập lại vào đó)
docker start <ID hoc NAME>
docker exec -it <ID hoc NAME> /bin/bash 

Xoá một container


Nếu một container đã hết giá trị lợi dụng, dù nó đã tắt nhưng nó vẫn chiếm một phần dung lượng trên máy tính, để xoá nó đi, chúng ta dùng lệnh 
docker rm <ID hoc NAME>


Nếu container đang chạy, bạn cũng có thể xoá nhưng phải thêm tham số -f vào sau rm để force remove:
docker rm -f <ID hoc NAME>

Xoá một image

Cũng như container, nếu bạn đã ko còn nhu cầu sử dụng một image nào đó nữa, thì nên xoá nó đi. Dùng lệnh rmi
docker rmi <ID hoc NAME>
# or
docker rmi -f <ID hoc NAME>

# Kết

Sự thật là Docker đang dần thay đổi nhiều lập trình viên và đặc biệt là các admin cách làm việc của họ. 
Và cộng đồng Docker đang phát triển rất mạnh. Vậy hãy dành chút thời gian và thử dùng Docker và bạn sẽ cảm thấy sự tuyệt vời của Docker qua chính trải nghiệm của mình..
Có thời gian mình sẽ chia sẻ một số Image docker hay sử dụng.
Đây là một bài viết về cách deploy Apache Spark, deploy số máy vài chục hoặc vài trăm node chỉ với vài bước đơn giản: http://blog.duyetdev.com/2015/12/apache-spark-on-docker.html#.VnmHCBV97IU

Tham khảo:

Fix lỗi MySQL Daemon failed to start (CentOS 6)


Khi cài đặt mysql trên CentOS 6 theo hướng dẫn tại rackspace.com với dòng lệnh:
yum install mysql-server
lúc chạy câu lệnh service mysqld start bị thông báo lỗi
MySQL Daemon failed to start.
Chạy mysql nhận thông báo:
Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock'
[Edit theo góp ý của mọi người]
Nếu bạn nào gặp phải trường hợp tương tự có thể tham khảo bài viết này.
Về cơ bản, nên kiểm tra log file /var/log/mysql/mysql.log để xem lỗi xảy ra ở đâu. Có rất nhiều cách xử lý lỗi khi tìm trên stackoverflow, cá nhân mình đã thử và không giải quyết được lỗi, cách dưới đây không phải là cách tối ưu, cũng có thể là một cách xử lý không an toàn, khuyến cáo chỉ dùng khi đã thử và bó tay với n cách (bí quá hóa cùn :D ).
Cách xử lý:
Vào thư mục /var/lib/mysql
$ cd /var/lib/mysql/
Xóa file mysql.sock
rm /var/lib/mysql/mysql.sock
Sau đó chạy lại service mysqld start.

Trường hợp tệ nhất, như trên vẫn chưa chạy được thì xóa các file bên trong thư mục trên
$ rm -rf *
rồi chạy lại service mysqld start.
Ngoài ra, mong các tiền bối và các bạn có kinh nghiệm góp ý thêm các cách xử lý an toàn và triệt để hơn. Chân thành cảm ơn :)