html 5 读取本地文件API

705 查看

代码:

<input type="file" name="uploadfile" class="J-upload">

<script>
   //上传后
    var upLoaded = function(evt) {
        var fileString = evt.target.result;
        console.log(fileString); //文本内容
    };
    //change事件
    var updateUploadFile = function(evt){
        var $target = $(evt.target);
        var path = $target.val();
        var file = path.match(/[^\/\\]+$/gi)[0];
        var filterType = 'txt';
        var rx = new RegExp('\\.(' + (filterType ? filterType : '') + ')$', 'gi');

        //过滤文件
        if(file.match(rx) == null){
            alert('请上传txt文件');
            return;
        }

        var files = evt.target.files; // FileList object
        if (files[0]) {
            var reader = new FileReader();
            reader.readAsText(files[0]);
            reader.onload = upLoaded;
        }
    };

$('.J-upload').bind('change', $.proxy(updateUploadFile, this)); 

</script>

参考:
W3C File API
通过 File API 使用 JavaScript 读取文件