diff --git a/_server/editor_mode.js b/_server/editor_mode.js
index 39984f46..017937b1 100644
--- a/_server/editor_mode.js
+++ b/_server/editor_mode.js
@@ -10,6 +10,7 @@ function editor_mode(){
   this.actionList=[];
   this.mode='';
   this.info={};
+  this.appendPic={};
 }
 
 editor_mode.prototype.init = function(callback){
@@ -254,7 +255,7 @@ editor_mode.prototype.listen = function(callback){
       var idnum = parseInt(newIdIdnum.children[1].value);
       editor_file.changeIdAndIdnum(editor,id,idnum,editor_mode.info,function(err){
         if(err){printe(err);throw(err)}
-        printf('添加id的idnum成功');
+        printe('添加id的idnum成功,请F5刷新编辑器');
       });
     }
   }
@@ -291,6 +292,147 @@ editor_mode.prototype.listen = function(callback){
     });
   }
 
+  var ratio=1;
+  var appendPicCanvas = document.getElementById('appendPicCanvas');
+  var bg = appendPicCanvas.children[0];
+  var source = appendPicCanvas.children[1];
+  var picClick = appendPicCanvas.children[2];
+  var sprite = appendPicCanvas.children[3];
+  var appendPicSelection = document.getElementById('appendPicSelection');
+
+  var selectAppend = document.getElementById('selectAppend');
+  var selectAppend_str=[];
+  ["terrains", "animates", "enemys", "items", "npcs"].forEach(function(image){
+    selectAppend_str.push(["<option value='",image,"'>",image,'</option>\n'].join(''));
+  });
+  selectAppend.innerHTML=selectAppend_str.join('');
+  selectAppend.onchange = function(){
+    var value = selectAppend.value;
+    editor_mode.appendPic.imageName = value;
+    var img = editor.material.images[value];
+    editor_mode.appendPic.toImg = img;
+    var num = ~~img.width/32;
+    editor_mode.appendPic.num = num;
+    editor_mode.appendPic.index = 0;
+    var selectStr = '';
+    for(var ii=0;ii<num;ii++){
+      appendPicSelection.children[ii].style='left:0;top:0';
+      selectStr+='{"x":0,"y":0},'
+    }
+    editor_mode.appendPic.selectPos = eval('['+selectStr+']');
+    for(var jj=num;jj<4;jj++){
+      appendPicSelection.children[jj].style='display:none';
+    }
+    sprite.style.width = (sprite.width = img.width)/ratio + 'px';
+    sprite.style.height = (sprite.height = img.height+32)/ratio + 'px';
+    sprite.getContext('2d').drawImage(img, 0, 0);
+  }
+  selectAppend.onchange();
+
+  var selectFileBtn = document.getElementById('selectFileBtn');
+  var selectFileStr = document.getElementById('selectFileStr');
+  selectFileBtn.onclick = function(){
+    var loadImage = function (content, callback) {
+      var image = new Image();
+      try {
+        image.src = content;
+        if (image.complete) {
+          callback(image);
+          return;
+        }
+        image.onload = function () {
+          callback(image);
+        }
+      }
+      catch (e) {
+        printe(e);
+      }
+    }
+    core.readFile(function(content){
+      loadImage(content,function(image){
+        editor_mode.appendPic.img = image;
+        editor_mode.appendPic.width = image.width;
+        editor_mode.appendPic.height = image.height;
+        for(var ii=0;ii<3;ii++){
+          var newsprite = appendPicCanvas.children[ii];
+          newsprite.style.width = (newsprite.width = Math.floor(image.width/32)*32)/ratio + 'px';
+          newsprite.style.height = (newsprite.height = Math.floor(image.height/32)*32)/ratio + 'px';
+        }
+
+        //画灰白相间的格子
+        var bgc = bg.getContext('2d');
+        var colorA = ["#f8f8f8", "#cccccc"];
+        var colorIndex;
+        var sratio=4;
+        for (var ii = 0; ii < image.width/32*sratio; ii++){
+          colorIndex = 1-ii%2;
+          for (var jj = 0; jj < image.height/32*sratio; jj++) {
+            bgc.fillStyle = colorA[colorIndex];
+            colorIndex = 1 - colorIndex;
+            bgc.fillRect(ii * 32/sratio, jj * 32/sratio, 32/sratio, 32/sratio);
+          }
+        }
+        
+        //把导入的图片画出
+        source.getContext('2d').drawImage(image, 0, 0);
+
+        //重置临时变量
+        selectAppend.onchange();
+      });
+    },null,'img');
+
+    return;
+  }
+
+  var left1 = document.getElementById('left1');
+  var eToLoc = function (e) { 
+    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
+    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
+    var loc = { 
+      'x': scrollLeft+e.clientX + appendPicCanvas.scrollLeft  - left1.offsetLeft-appendPicCanvas.offsetLeft, 
+      'y': scrollTop+e.clientY + appendPicCanvas.scrollTop - left1.offsetTop-appendPicCanvas.offsetTop, 
+      'size': 32 
+    };
+    return loc; 
+  }//返回可用的组件内坐标
+
+  var locToPos = function (loc) {
+    var pos = { 'x': ~~(loc.x / loc.size), 'y': ~~(loc.y / loc.size) }
+    return pos;
+  }
+  
+  picClick.onclick = function(e){
+    var loc = eToLoc(e);
+    var pos = locToPos(loc);
+    console.log(e,loc,pos);
+    var num = editor_mode.appendPic.num;
+    var ii = editor_mode.appendPic.index;
+    if(ii+1>=num)editor_mode.appendPic.index=ii+1-num;
+    else editor_mode.appendPic.index++;
+    editor_mode.appendPic.selectPos[ii]=pos;
+    appendPicSelection.children[ii].style=[
+      'left:',pos.x*32,'px;',
+      'top:',pos.y*32,'px'
+    ].join('');
+  }
+
+  var appendConfirm = document.getElementById('appendConfirm');
+  appendConfirm.onclick = function(){
+    var sprited = sprite.getContext('2d');
+    //sprited.drawImage(img, 0, 0);
+    var height = editor_mode.appendPic.toImg.height;
+    var sourced = source.getContext('2d');
+    for(var ii=0,v;v=editor_mode.appendPic.selectPos[ii];ii++){
+      var imgData=sourced.getImageData(v.x*32,v.y*32,32,32);
+      sprited.putImageData(imgData,ii*32,height);
+    }
+    var imgbase64 = sprite.toDataURL().split(',')[1];
+    fs.writeFile('./project/images/'+editor_mode.appendPic.imageName+'.png',imgbase64,'base64',function(err,data){
+      if(err){printe(err);throw(err)}
+      printe('追加素材成功,请刷新编辑器');
+    });
+  }
+
   if (Boolean(callback))callback();
 }
 
diff --git a/editor.html b/editor.html
index 4a8f4d6b..1617c843 100644
--- a/editor.html
+++ b/editor.html
@@ -35,15 +35,16 @@
     <div id="left1" class='leftTab'><div ><!-- appendpic -->
       <h3>追加素材</h3>
       <p>
-        <input type="button" value="选择文件"/>
+        <input id="selectFileBtn" type="button" value="导入文件到画板"/>
         <select id="selectAppend"></select><!-- ["terrains", "animates", "enemys", "items", "npcs"] -->
-        <input type="button" value="追加"/>
+        <input id="appendConfirm" type="button" value="追加"/>
       </p>
-      <div id="appendPicCanvas" style="position:relative;overflow: auto;height:500px;">
+      <div id="appendPicCanvas" style="position:relative;overflow: auto;height:470px;">
+        <canvas style="position:absolute"></canvas><!-- 用于画出灰白相间背景 -->
         <canvas style="position:absolute"></canvas><!-- 用于画出选中文件 -->
         <canvas style="position:absolute;z-index:100"></canvas><!-- 用于响应鼠标点击 -->
         <canvas style="position:absolute;display:none;"></canvas><!-- 画出追加后的sprite用于储存 -->
-        <div>
+        <div id="appendPicSelection">
           <div class="appendSelection"><span style="font-size:10px">1</span></div>
           <div class="appendSelection"><span style="font-size:10px">&nbsp;&nbsp;2</span></div>
           <div class="appendSelection"><span style="font-size:10px">&nbsp;&nbsp;&nbsp;&nbsp;3</span></div>
diff --git a/libs/core.js b/libs/core.js
index 64c4cdef..cf3d76dd 100644
--- a/libs/core.js
+++ b/libs/core.js
@@ -215,6 +215,11 @@ core.prototype.init = function (coreData) {
         core.platform.fileReader.onload = function () {
             var content=core.platform.fileReader.result;
             var obj=null;
+            if(content.slice(0,4)==='data'){
+                if (core.isset(core.platform.successCallback))
+                    core.platform.successCallback(content);
+                return;
+            }
             try {
                 obj=JSON.parse(content);
                 if (core.isset(obj)) {
@@ -4949,7 +4954,7 @@ core.prototype.isset = function (val) {
 }
 
 ////// 读取一个本地文件内容 //////
-core.prototype.readFile = function (success, error) {
+core.prototype.readFile = function (success, error, readType) {
 
     // step 0: 不为http/https，直接不支持
     if (!core.platform.isOnline) {
@@ -4976,7 +4981,8 @@ core.prototype.readFile = function (success, error) {
                     core.platform.errorCallback();
                 return;
             }
-            core.platform.fileReader.readAsText(core.platform.fileInput.files[0]);
+            if(!readType)core.platform.fileReader.readAsText(core.platform.fileInput.files[0]);
+            else core.platform.fileReader.readAsDataURL(core.platform.fileInput.files[0]);
             core.platform.fileInput.value = '';
         }
     }