选择文件 读取文件名到textarea

简介:

代码如下:

html:

<tr  ng-if="!isUploadfile">
    <td align="right" width="40%" style="font-weight: bold;">文件</td>
    <td width="80%">
        <input type="file" id="uploadFile" id="uploadFile" onchange="handleFiles(this.files)"/>

    </td>

</tr>

<tr  ng-if="!isUploadfile" >
    <td align="right" width="40%" style="font-weight: bold;">内容 <var style="font-weight: bold;color: red;">*</var></td>
    <td width="80%">
        <textarea id="filecontent" ng-model="item.content" rows="8" style="width: 450px"></textarea>
    </td>

</tr>
js:
/**
 *
 * 配置中心读取文件
 * @param files yhl
 */
function  handleFiles(files)
{
    if(files.length)
    {
        var file = files[0];
        var reader = new FileReader();
        reader.onload = function()
        {
            $("#filecontent").val(this.result);
        };
        reader.readAsText(file);
    }
}

效果图:

spacer.gif

wKiom1YwewSQeeIjAAHY4yXbKKw912.jpg

选择文件之后,文件内容自动填充到

textarea 里
本文转自杨海龙的博客博客51CTO博客,原文链接http://blog.51cto.com/7218743/1707297如需转载请自行联系原作者

IT达仁
相关文章
|
8月前
|
Web App开发 iOS开发
a标签实现文件流下载
a标签实现文件流下载
77 0
|
3月前
CSV写入文件追加新的内容,文件编码处理
CSV写入文件追加新的内容,文件编码处理
56 8
C++ 中 ifstream读取txt文件内容
C++ 中 ifstream读取txt文件内容
1384 0
C++ 中 ifstream读取txt文件内容
|
JavaScript
Vue 监听输入框(input、textarea ...)粘贴事件获取图片、视频、文件、文件夹
Vue 监听输入框(input、textarea ...)粘贴事件获取图片、视频、文件、文件夹
1078 0
H5--文件上传(显示文件)
H5--文件上传(显示文件)
289 0
H5--文件上传(显示文件)
【Html】layui让时间控件不能输入只可读
【Html】layui让时间控件不能输入只可读
355 0
【Html】layui让时间控件不能输入只可读
读取文件的内容
读取文件的内容
100 0
|
Python
wxpython 从剪贴板读取文件,读取文字,读取图像
前段时间有这样一个需求,要读取用户的剪贴板的内容,然后把剪贴板的信息复制到另一个地方。例如: 1.当用户复制的是图片时,把图片复制到一个指定位置。 2.当用户复制的是txt中的一段文字时,获得复制的文字内容。 3.当用户复制的是一个文件时,获得复制的文件名和路径,然后复制到一个指定位置。
298 0
|
Python
【Python标准库:fileinput】优雅的读取文件
每当我写个脚本涉及文件输入时,一般写法都是下面这种 import sys file_in = sys.argv[1] for line in open(file_in, 'r'): commands 这个操作有一个缺点就是,如果我想从管道里面传入数据给Python的话,就会报错,因为原代码要求文件而不是标准输入。
1353 0