Question

我尝试实现拖动文件功能。我需要预览文件的文本，在这种情况下是一个HTML文件。但是当我将FileReader的结果插入DOM时，预览会丢失所有换行符和文本缩进。

我尝试使用jQuery .split（）并插入<br/>，但文本仍会丢失所有缩进。

for(var i = 0; i <files.length; i++){

    reader = new FileReader();
    reader.onload = function(evt){
        var r = evt.target.result;

        r = r.replace(/>/g,'&gt; >');
        r = r.replace(/</g,'&lt;');
        r = r.split('>')

        var text="";
        for(var i =0; i<r.length; i++){
            r[i] = $.trim(r[i]);
            text += r[i]+'<br/>';
        }
        $('.drop-area').html(text);

    }
    reader.readAsText(files[i]);
}

尝试在此处拖动HTML文件http://jsfiddle.net/gVZRU/2/

有可能解决这个问题吗？我可以采用其他方法来实现此功能吗？

Answer 1

您只需要将white-space: pre-wrap;添加到显示框的样式中。

HTML源中的多个连续空格始终折叠为呈现内容中的单个输出空白。 white-space CSS属性允许您更改此行为，pre值表示将空格视为<pre>标记（即显示渲染结果中的所有空格）。 pre-wrap就像pre一样，但允许包装文本。

Answer 2

使用.text method插入文字。无需手动转义。要解决显示问题，请不要尝试在每个结束标记后插入<br>标记，而只需使用适当的CSS：white-space: pre-wrap;。

Javascript - 获取使用FileReader（）读取的文件的格式化预览？

2 个答案: