diff --git a/components/Form.js b/components/Form.js
index 95b1826..4a475ac 100644
--- a/components/Form.js
+++ b/components/Form.js
@@ -29,6 +29,8 @@ define([
     events: {
       'submit': 'onSubmit',
       'change input[type="text"]': 'onChange',
+      'change input[type="file"]': 'onFileChange',
+      'change input[type="checkbox"]': 'onCheckboxChange',
       'change textarea': 'onChange',
       'change select': 'onChange',
     },
@@ -38,6 +40,28 @@ define([
       target.name && this.model.set(target.name, target.value);
     },
 
+    onFileChange: function(e) {
+      var target = e.target;
+      target.name && this.model.set(target.name, target.files[0]);
+    },
+
+    onCheckboxChange: function(e) {
+      var target = e.target;
+      if (!target.name) return;
+      
+      var checked = target.checked;
+      var data = this.model[target.name];
+      if (!data) {
+        data = [];
+      }
+      if (checked) {
+        data.push(target.value);
+      } else {
+        data.splice(data.indexOf(target.value), 1);
+      }
+      this.model.set(target.name, data);
+    },
+
     onValidate: function(data) {
       for (var k in data) {
         this.$('.' + k)
@@ -57,13 +81,14 @@ define([
 
     serialize: function() {
       var res = {};
-      this.el.serializeArray().forEach(function(field) {
-        field.value = field.value.trim();
-        if (field.name in res) {
-          Array.isArray(res[field.name]) && (res[field.name] = [res[field.name]]);
-          res[field.name].push(field.value);
+      this.$('[name]').each(function(i, el) {
+        if (el.type === 'file') {
+          res[el.name] = el.files[0];
+        } else if (el.type === 'checkbox') {
+          if (!res[el.name]) res[el.name] = [];
+          el.checked && res[el.name].push(el.value);
         } else {
-          res[field.name] = field.value;
+          res[el.name] = el.value;
         }
       });
       return res;
diff --git a/trunk.js b/trunk.js
index 5b6a319..e6b18dc 100644
--- a/trunk.js
+++ b/trunk.js
@@ -10,14 +10,14 @@
 
   if (typeof define === 'function' && define.amd) {
     // AMD module
-    define('trunk', ['jquery', 'vjs'], function($, vjs) {
-      return factory(root, $, vjs)
+    define('trunk', ['jquery'], function($) {
+      return factory(root, $)
     });
   } else {
-    root.Trunk = factory(root, jQuery, vjs);
+    root.Trunk = factory(root, jQuery);
   }
 
-})(window, function(win, $, vjs) {
+})(window, function(win, $) {
 
   // Caller as array method
   var array = [];
@@ -341,6 +341,52 @@
     }
   });
 
+  var vjs = (function() {
+
+    /**
+     * Convert template string to javascript code, return a function which
+     * has a parameter data and return html string.
+     */
+    var vjs = function(str) {
+      if (!str) return;
+      str = "var out = '" + str.replace(/\s*\n\s*/g, '') + "'";
+      str = str.replace(getReg.statement(), "';$1out+='");
+      str = str.replace(getReg.express(), "'+($1)+'");
+      str += ";return out;";
+      return new Function(vjs.global, str);
+    };
+
+    var regRules = {
+      statement: '\\s([\\s\\S]+?)', // Inertia match
+      express: '-\\s([\\s\\S]+?)'
+    };
+
+    var getReg = {};
+
+    for (var i in regRules) {
+      (function(i) {
+        getReg[i] = function() {
+          var _reg = new RegExp(vjs.leftTag + regRules[i] + vjs.rightTag, 'g');
+          getReg[i] = function() {
+            return _reg;
+          }
+          return _reg;
+        }
+      })(i);
+    }
+
+    /**
+     * Global variable name in template
+     */
+    vjs.global = 'data';
+
+
+    vjs.leftTag = '<#';
+    vjs.rightTag = '#>';
+
+    return vjs;
+  })();
+
 
   var View = function(prop) {