Question

如何从磁盘加载文本文件并在jQuery-UI对话框中显示内容？

Answer 1

<html>
<head>
<link rel="stylesheet" type="text/css" href="./3rd-party/jquery-ui-1.9.0.css" />    
<script type="text/javascript" src="./3rd-party/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./3rd-party/jquery-ui-1.9.0.min.js"></script>   

<script>
$(function() {
    $('#file-form').dialog({
    autoOpen: true,
        buttons: [{
        id: 'load-share',
        text: 'Load File',
        click: function() { 
                   if (window.FileReader) {
                       var fileInput = $('#load-file');
                       var fileDisplayArea = $('#file-contents');

                       fileInput.change(function(e) {
                           var reader = new FileReader();

                           reader.onload = function(e) {
                               fileDisplayArea.val(reader.result);
                           }

                           reader.readAsText(fileInput[0].files[0]);  
                       });

                       fileInput.trigger('click');
                   } else {
                       alert('Your browser doesn\'t support reading files from disk.');
                   }
               } 
        }]
    });
});
</script>
</head>
<body>
<div id="file-form" title="Load text file and display contents">
    <input type="file" id="load-file" style="display:none;" />  
    <div style="font-weight:bold; margin-bottom:10px;">File contents:</div>
    <textarea id="file-contents" style="width:97%; height:200px;"></textarea>
</div>
</body>
</html>

HTML5文件API：使用jQuery-ui对话框加载和显示文件

1 个答案: