首页新闻找找看学习计划

HTML5 如何上传文件到服务器端

0
[已解决问题] 解决于 2014-03-19 09:15

后台语言用的是C#,使用的是MVC4.0+EF5.0。前台用的HTML5+Angularjs。
想要实现功能:上传excel到服务器端(非 表单/form 方式)。
现在前端设计代码是:

 1         <style>
 2             #byte_content {
 3                 margin: 5px 0;
 4                 max-height: 100px;
 5                 overflow-y: auto;
 6                 overflow-x: hidden;
 7             }
 8 
 9             #byte_range {
10                 margin-top: 5px;
11             }
12         </style>
13         <span class="file-input btn btn-primary btn-file">
14             <input type="file" id="file1" name="file" />
15             Read bytes: 
16         </span>
17         <span class="readBytesButtons">
18             <button class="btn btn-primary" data-startbyte="0" data-endbyte="4">1-5</button>
19             <button class="btn btn-primary"data-startbyte="5" data-endbyte="14">6-15</button>
20             <button class="btn btn-primary"data-startbyte="6" data-endbyte="7">7-8</button>
21             <button class="btn btn-primary">entire file</button>
22         </span>
23         <div id="byte_range"></div>
24         <div id="byte_content"></div>
25 
26         <script>
27             function readBlob(opt_startByte, opt_stopByte) {
28 
29                 var files = document.getElementById('file1').files;
30                 if (!files.length) {
31                     alert('Please select a file!');
32                     return;
33                 }
34 
35                 var file = files[0];
36                 var start = parseInt(opt_startByte) || 0;
37                 var stop = parseInt(opt_stopByte) || file.size - 1;
38 
39                 var reader = new FileReader();
40 
41                 // If we use onloadend, we need to check the readyState.
42                 reader.onloadend = function (evt) {
43                     if (evt.target.readyState == FileReader.DONE) { // DONE == 2
44                         document.getElementById('byte_content').textContent = evt.target.result;
45                         document.getElementById('byte_range').textContent =
46                             ['Read bytes: ', start + 1, ' - ', stop + 1,
47                              ' of ', file.size, ' byte file'].join('');
48                     }
49                 };
50 
51                 var blob = file.slice(start, stop + 1);
52                 reader.readAsBinaryString(blob);
53             }
54 
55             document.querySelector('.readBytesButtons').addEventListener('click', function (evt) {
56                 if (evt.target.tagName.toLowerCase() == 'button') {
57                     var startByte = evt.target.getAttribute('data-startbyte');
58                     var endByte = evt.target.getAttribute('data-endbyte');
59                     readBlob(startByte, endByte);
60                 }
61             }, false);
62         </script>

fileApi我用的是readAsBinaryString();,现在不知道如何异步上传到C#端以及C#如何接收文件。
网上找了很多,没找到一个完整的案例,有也是后台用的php或者java。

感觉这个功能不是太难,只是本人初学web开发,求赐教!!

Cornelius的主页 Cornelius | 初学一级 | 园豆:78
提问于:2014-02-20 12:59
< >
分享
最佳答案
0
奖励园豆:5
dudu | 高人七级 |园豆:41048 | 2014-02-20 13:49
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册