html5文件上传预览

最新推荐文章于 2022-03-28 00:13:30 发布

liaochongwei666

最新推荐文章于 2022-03-28 00:13:30 发布

阅读量353

点赞数

分类专栏： html5 正则表达式

本文链接：https://blog.csdn.net/lcw158852/article/details/78301427

版权

html5 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

正则表达式

1 篇文章 0 订阅

订阅专栏

本文介绍了正则表达式的基本概念，并详细讲解了MIME类型，包括常见的MIME类型示例。接着重点讨论了HTML5中如何实现文件上传的预览功能，提供了相关的HTML和JavaScript代码示例。

摘要由CSDN通过智能技术生成

什么是正则表达式

正则表达式是一种字符串匹配模式。

/*在javascrpt中的使用
    验证用户名  由6-20位代表数字、字母和下划线组成 
  */
  var uid = "_3liaochongwei12";
  //var regex = new RegExp();//不推荐
  var regex = /^[a-zA-Z0-9_]{6,20}$/ 
  if(regex.test(uid)){
   //测试通过
  }
  //  \w  代表数字、字母和下划线 \d代表数字

var tel="13912341234";//验证国内手机号

regex=/1[34578]\d{9}/;

tel.match(regex);//返回匹配的字符串

MIME 类型

Multipurpose Internet Mail Extension

eg:
- image/jpeg
- image/png
- text/html
- text/plain
- application/json

html5文件上传预览

html代码:

<input type="file" name="photo" id="photo" /><br />
<img src="" id="photoPreview" alt="" width="150" />

javascript代码：

$(function() {
$("#photo").change(function() {
    if (window.FileReader) {
        var file = this.files[0];
        // file.type---MIME类型  image/jpg 文件类型格式
        if(/image\/\w+/.test(file.type)){  //文件类型只能是图片
            var fr = new FileReader();
            fr.onloadend = function(evt) {
                $("#photoPreview").attr('src', evt.target.result);
            };
            fr.readAsDataURL(file);
        }else{
            alert("请选择图片文件");
            $(this).val('');
            $("#photoPreview").attr('src', '');
        }

    } else {
        alert("浏览器不支持图片预览!")
    }
})
})