diff --git a/assets/src/js/skinlib.js b/assets/src/js/skinlib.js
index acf9de53..3a190355 100644
--- a/assets/src/js/skinlib.js
+++ b/assets/src/js/skinlib.js
@@ -2,7 +2,7 @@
  * @Author: printempw
  * @Date:   2016-07-19 10:46:38
  * @Last Modified by:   printempw
- * @Last Modified time: 2016-08-17 17:58:53
+ * @Last Modified time: 2016-08-21 10:33:47
  */
 
 'use strict';
@@ -31,6 +31,10 @@ $('#private').on('ifToggled', function() {
     $(this).prop('checked') ? $('#msg').show() : $('#msg').hide();
 });
 
+$('#type-skin').on('ifToggled', function() {
+    $(this).prop('checked') ? $('#skin-type').show() : $('#skin-type').hide();
+});
+
 function addToCloset(tid) {
     $.getJSON('../skinlib/info/'+tid, function(json) {
         swal({
@@ -146,10 +150,10 @@ $('body').on('change', '#file', function() {
     var files = $('#file').prop('files');
     var type = ($('#type').val() == "cape") ? "cape" : "skin";
     handleFiles(files, type);
-}).on('change', '#type', function() {
+}).on('ifToggled', '#type-skin', function() {
     MSP.clear();
     var files = $('#file').prop('files');
-    var type = ($('#type').val() == "cape") ? "cape" : "skin";
+    var type = $('#type-skin').prop('checked') ? "skin" : "cape";
     handleFiles(files, type);
 });
 
@@ -180,10 +184,17 @@ function handleFiles(files, type) {
 
 function upload() {
     var form_data = new FormData();
-    form_data.append('name', $('#name').val())
-    form_data.append('type', $('#type').val())
-    form_data.append('file', $('#file').prop('files')[0])
-    form_data.append('public', !$('#private').prop('checked'))
+    form_data.append('name', $('#name').val());
+    form_data.append('file', $('#file').prop('files')[0]);
+    form_data.append('public', !$('#private').prop('checked'));
+
+    if ($('#type-skin').prop('checked')) {
+        form_data.append('type', $('#skin-type').val());
+    } else if ($('#type-cape').prop('checked')) {
+        form_data.append('type', 'cape');
+    } else {
+        toastr.info('请选择材质的类型'); return;
+    }
 
     // quick fix for browsers which don't support FormData.get()
     if ($('#file').prop('files')[0] == 'undefined') {
@@ -192,9 +203,6 @@ function upload() {
     } else if ($('#name').val() == "") {
         toastr.info('给你的材质起个名字吧');
         $('#name').focus();
-    } else if ($('#type').val() == "") {
-        toastr.info('请选择材质的类型');
-        $('#type').focus();
     } else if ($('#file').prop('files')[0].type !== "image/png") {
         toastr.warning('请选择 PNG 格式的图片');
         $('#file').focus();
diff --git a/resources/views/skinlib/upload.tpl b/resources/views/skinlib/upload.tpl
index 6454031a..d2da5379 100644
--- a/resources/views/skinlib/upload.tpl
+++ b/resources/views/skinlib/upload.tpl
@@ -2,6 +2,15 @@
 
 @section('title', '上传材质')
 
+@section('style')
+<style>
+label[for="type-skin"],
+label[for="type-cape"] {
+    margin-top: 5px;
+}
+</style>
+@endsection
+
 @section('content')
 <!-- Full Width Column -->
 <div class="content-wrapper">
@@ -29,12 +38,32 @@
                             </div>
 
                             <div class="form-group">
-                                <label for="type">材质类型</label>
-                                <select class="form-control" id="type">
-                                    <option value="steve">皮肤（Steve 模型）</option>
-                                    <option value="alex">皮肤（Alex 模型）</option>
-                                    <option value="cape">披风</option>
-                                </select>
+                                <label>材质类型</label>
+                                <div class="row">
+                                    <div class="col-md-6">
+                                        <div class="row">
+                                            <div class="col-xs-4">
+                                                <label for="type-skin">
+                                                    <input type="radio" name="type" id="type-skin"> 皮肤
+                                                </label>
+                                            </div>
+                                            <div class="col-xs-8">
+                                                <select class="form-control" id="skin-type" style="display: none;">
+                                                    <option value="steve">Steve 模型</option>
+                                                    <option value="alex">Alex 模型</option>
+                                                </select>
+                                            </div>
+                                        </div>
+
+                                    </div>
+
+                                    <div class="col-md-6">
+                                        <label for="type-cape">
+                                            <input type="radio" name="type" id="type-cape"> 披风
+                                        </label>
+                                    </div>
+                                </div>
+
                             </div>
 
                             <div class="form-group">
@@ -97,6 +126,7 @@ $(document).ready(function() {
     });
     $('[for="private"]').tooltip();
 });
+
 // Auto resize canvas to fit responsive design
 $(window).resize(init3dCanvas);
 </script>