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

[qq874655551]

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

        <style>
            #byte_content {
                margin: 5px 0;
                max-height: 100px;
                overflow-y: auto;
                overflow-x: hidden;
            }

            #byte_range {
                margin-top: 5px;
            }
        </style>
        <span class="file-input btn btn-primary btn-file">
            <input type="file" id="file1" name="file" />
            Read bytes: 
        </span>
        <span class="readBytesButtons">
            <button class="btn btn-primary" data-startbyte="0" data-endbyte="4">1-5</button>
            <button class="btn btn-primary"data-startbyte="5" data-endbyte="14">6-15</button>
            <button class="btn btn-primary"data-startbyte="6" data-endbyte="7">7-8</button>
            <button class="btn btn-primary">entire file</button>
        </span>
        <div id="byte_range"></div>
        <div id="byte_content"></div>

        <script>
            function readBlob(opt_startByte, opt_stopByte) {

                var files = document.getElementById('file1').files;
                if (!files.length) {
                    alert('Please select a file!');
                    return;
                }

                var file = files[0];
                var start = parseInt(opt_startByte) || 0;
                var stop = parseInt(opt_stopByte) || file.size - 1;

                var reader = new FileReader();

                // If we use onloadend, we need to check the readyState.
                reader.onloadend = function (evt) {
                    if (evt.target.readyState == FileReader.DONE) { // DONE == 2
                        document.getElementById('byte_content').textContent = evt.target.result;
                        document.getElementById('byte_range').textContent =
                            ['Read bytes: ', start + 1, ' - ', stop + 1,
                             ' of ', file.size, ' byte file'].join('');
                    }
                };

                var blob = file.slice(start, stop + 1);
                reader.readAsBinaryString(blob);
            }

            document.querySelector('.readBytesButtons').addEventListener('click', function (evt) {
                if (evt.target.tagName.toLowerCase() == 'button') {
                    var startByte = evt.target.getAttribute('data-startbyte');
                    var endByte = evt.target.getAttribute('data-endbyte');
                    readBlob(startByte, endByte);
                }
            }, false);
        </script>

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

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

[孟子E章]

C#例子 http://www.codeguru.com/imagesvr_ce/1863/HTML5-FileUpload-Code.zip http://www.codeguru.com/csharp/csharp/cs_internet/uploading-files-using-html5-drag-and-drop-and-asp.net.htm http://www.c-sharpcorner.com/UploadFile/65fc13/html5-file-api-reading-a-file-and-displaying-content/

[萝莉狼]

我是专门做前端的，刚刚解决了这个问题，不过后端代码我不了解，你可以看看这里，有前端的js代码： http://blog.csdn.net/victorygod/article/details/19612669

[nod22]

1楼给的老外的例子 是正解 谢谢

[qq_20260443]

<?xml version="1.0" encoding="UTF-8"?> -<panorama id="">-<view pannorth="0" fovmode="0"><start tilt="0" fov="70" pan="0"/><min tilt="-90" fov="5" pan="0"/><max tilt="90" fov="120" pan="360"/></view><userdata title="" latitude="" longitude="" info="" comment="" source="" author="" tags="" copyright="" description="" datetime=""/>-<hotspots wordwrap="1" height="20" width="180"><label wordwrap="1" height="20" width="180" textalpha="1" borderradius="1" borderalpha="1" background="1" textcolor="0x000000" border="1" bordercolor="0x000000" backgroundcolor="0xffffff" enabled="1" backgroundalpha="1"/><polystyle borderalpha="1" bordercolor="0x0000ff" backgroundcolor="0x0000ff" backgroundalpha="0.2509803921568627" mode="0"/></hotspots><media/>-<input tile1url="images/99_o_1.jpg" tile2url="images/99_o_2.jpg" tilescale="1.033333333333333" tile3url="images/99_o_3.jpg" tile4url="images/99_o_4.jpg" tilesize="300" tile5url="images/99_o_5.jpg" prev0url="images/99_o_preview_0.jpg" prev1url="images/99_o_preview_1.jpg" prev2url="images/99_o_preview_2.jpg" prev3url="images/99_o_preview_3.jpg" prev4url="images/99_o_preview_4.jpg" prev5url="images/99_o_preview_5.jpg" tile0url="images/99_o_0.jpg"><preview color="0x808080"/></input><control sensitivity="8" speedwheel="1" invertcontrol="1" lockedwheel="0" invertwheel="0" dblclickfullscreen="0" lockedkeyboard="0" lockedmouse="0" simulatemass="1"/></panorama>