JavaScript学习笔记之操作文件（第五天）

最新推荐文章于 2021-11-22 17:50:21 发布

隔壁小王66

最新推荐文章于 2021-11-22 17:50:21 发布

阅读量447

点赞数

分类专栏： Web学习进阶文章标签： javascript 表单

本文链接：https://blog.csdn.net/qq_16131393/article/details/72891699

版权

Web学习进阶专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文件操作具体指的是文件上传，通常在表单中采用

 <input type="file" id="test-file-upload">

来上传文件。表单form要做一些设置

<form id="form1" enctype="multipart/form-data" method="post">
    <input type="file" id="test-file-upload">
</form>

enctype必须为multipart/form-data，目的是浏览器的正确编码，提交方法为post。

提交的文件处理一般都是后台来处理，而js则是处理对文件的校验。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作文件</title>
</head>
<body>

<form id="form1" enctype="multipart/form-data" method="post">
    <input type="file" id="test-file-upload">
</form>
<br>
<button type="submit" onclick="aa()">submit</button>
<script>
    function aa() {
        var f=document.getElementById('test-file-upload');
        var filename=f.value;
        if (!filename || !(filename.endsWith('.jpg') || filename.endsWith('.png') || filename.endsWith('.gif'))) {
            alert('Can only upload image file.');
            return false;
        }else {
            alert(' upload image file success');
        }
    }
    String.prototype.endsWith=function(str){
        if(str==null||str==""||this.length==0||str.length>this.length)
            return false;
        if(this.substring(this.length-str.length)==str)
            return true;
        else
            return false;
        return true;
    }

    String.prototype.startWith = function(str){
        if(str == null || str== "" || this.length== 0 || str.length > this.length){
            return false;
        }
        if(this.substr(0,str.length) == str){
            return true;
        }else{
            return false;
        }
        return true;
    };
</script>
</body>
</html>

上传一张图片，需要验证图片的格式，js没有提供endwith方法，故而需要自己封装一个endwith方法。

获取上传文件信息，对读取文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>读取上传的文件</title>
</head>
<body>
 <form>
     <input type="file" id="test_upload_file" onchange="upload_file()">
 </form>
<br>
<!--<button type="submit" onclick="upload_file()">Submit</button>-->
<p id="test-file-info"></p>
<br>
 <div id="test-image-preview" style="width:  200px;height: 200px">
 </div>
</body>
<script>
    function upload_file() {
        var
            fileInput=document.getElementById('test_upload_file');
            var info=document.getElementById('test-file-info');
            var preview=document.getElementById('test-image-preview');

            fileInput.addEventListener('change',function () {
                preview.style.backgroundImage='';

                if(!fileInput.value){
                    info.innerHTML='没有选择文件';
                    return;
                }
                var file=fileInput.files[0];
                info.innerHTML='文件'+file.name+'<br>'+
                               '大小'+file.size+'<br>'+
                               '修改'+file.lastModifiedDate;
                if(file.type!=='image/jpeg'&&file.type!=='image/png'&&file.type!=='image/gif'){
                    alert('上传的不是有效图片');
                    return;
                }

                var reader=new FileReader();
                reader.onload=function (e) {
                    var data=e.target.result;
                    preview.style.backgroundImage='url('+data+')';
                }
                reader.readAsDataURL(file);
            });

    }
</script>
</html>

这里创建一个表单，上传文件，创建一个p标签打印文件信息，创建一个div显示上传图片。

这里upload_file方法需要在onchange监听里面回调，监听上传控件，清除div背景，如果值为空，则为上传文件，获取文件上传列表的第一个文件，打印文件名称大小修改日期等属性，并判断文件类型。

通过filereader来获取文件，js通过单线程来执行，获取图片必须要异步进行，所以调用了reader.readAsDataURL(file);来异步执行。

但是我们不知道何时执行结束来获取图片，所以需要回调监听

reader.onload = function(e) {
    // 当文件读取完成后，自动调用此函数:
};

在里面获取并展示图片。

隔壁小王66

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记之操作文件（第五天）

文件操作具体指的是文件上传，通常在表单中采用 <input type="file" id="test-file-upload">来上传文件。表单form要做一些设置<form id="form1" enctype="multipart/form-data" method="post"> <input type="file" id="test-file-upload"></form>enct
复制链接

扫一扫