Add filereader api

nomospace · Dec 5, 2012 · 181428b · 181428b
1 parent 474f3f3
commit 181428b
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 4 deletions.
diff --git a/libs/mail-util.js b/libs/mail-util.js
@@ -1,5 +1,5 @@
 var ImapConnection = require('imap').ImapConnection;
-var util = require('util');
+//var util = require('util');
 var nodeMailer = require('nodemailer');
 var models = require('../models');
 var Mail = models.Mail;

diff --git a/public/javascripts/mail.js b/public/javascripts/mail.js
@@ -31,6 +31,9 @@ $(function() {
     $attachFile = $('#J_attach_file');
   // $text = $('#J_text'),
   // $html = $('#J_html');
+
+  var attachItemTpl = $('#attach_item_tpl').html();
+
   $send.click(function() {
     var html = tinyMCE.get(editor).getContent(), from;
     if ($composeBody.data('reply')) {
@@ -65,8 +68,24 @@ $(function() {
     });
   });
 
+  function imagesSelected(files) {
+    for (var i = 0, f; f = files[i]; i++) {
+      var reader = new FileReader();
+      reader.onload = (function(file) {
+        return function(e) {
+//          var span = document.createElement('span');
+//          span.innerHTML = ['<img class="images" src="', e.target.result, '" title="', file.name, '"/>'].join('');
+//          $attachFile.after(span);
+          console.log(file, e.target);
+          $attachFile.after(Handlebars.compile(attachItemTpl)(file));
+        };
+      })(f);
+      reader.readAsDataURL(f);
+    }
+  }
+
   $attachFile.change(function(e) {
-    debugger;
+    imagesSelected(e.target.files);
   });
 
 });
diff --git a/public/stylesheets/main.css b/public/stylesheets/main.css
@@ -145,6 +145,25 @@ body {
   vertical-align: text-bottom;
 }
 
+.compose-body .attach {
+  position: relative;
+  cursor: pointer;
+  margin: 0 0 10px 60px;
+}
+
+.compose-body .attach input[type=file] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+}
+
+.compose-body .attach .thumbnail {
+  float: left;
+  width: 200px;
+  margin: 0 10px 10px 0;
+}
+
 .mceEditor iframe, .mail-body-iframe {
   width: 100%;
   min-height: 400px;

diff --git a/views/mail/compose.html b/views/mail/compose.html
@@ -27,7 +27,7 @@
 		  <div><span class="label">抄送人</span><input id="J_cc" type="text" class="span7"></div>
 		  <div><span class="label">主 题</span><input id="J_subject" type="text" class="span7"></div>
 	  <%}%>
-    <div class="attach"><input type="file" id="J_attach_file"><i class="icon-upload"></i>添加本地附件</div>
+    <div class="attach"><p><i class="icon-upload"></i>添加本地附件</p><input type="file" id="J_attach_file"></div>
 	</div>
 	<textarea id="J_editor" style="display:none;">
 		<%if(data){%>
@@ -38,7 +38,11 @@
 	  <%}%>
 	</textarea>
 </div>
-
+<script id="attach_item_tpl" type="tpl/cache">
+  <div class="thumbnail">
+    <i class="icon-file"></i>{{name}} {{size}}B
+  </div>
+</script>
 <script type="text/javascript" src="/libs/tiny-mce/tiny_mce_dev.js"></script>
 <script type="text/javascript" src="/libs/sticky-panel/stickypanel.js"></script>
 <script>ID="<%=id%>"</script>