文档章节

js判断上传图片格式,并预览

Delete90
 Delete90
发布于 2017/08/11 12:13
字数 163
阅读 41
收藏 0
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>img view</title>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
</head>

<body>
    <h2>文件上传</h2>
    <!--dom结构部分-->
    <div id="image-holder">
        <!--用来存放item-->
        <input id="file" type="file" accept="image/gif, image/jpeg, image/png">
    </div>

    <script type="text/javascript">
        $("#file").on('change', function() {

            var countFiles = $(this)[0].files.length;
            var imgPath = $(this)[0].value;
            var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
            var image_holder = $("#image-holder");
            image_holder.empty();

            if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
                if (typeof(FileReader) != "undefined") {

                    //loop for each file selected for uploaded.
                    for (var i = 0; i < countFiles; i++) {

                        var reader = new FileReader();
                        reader.onload = function(e) {
                            $("<img />", {
                                "src": e.target.result,
                                "class": "thumb-image"
                            }).appendTo(image_holder);
                        }

                        image_holder.show();
                        reader.readAsDataURL($(this)[0].files[i]);
                    }

                } else {
                    alert("This browser does not support FileReader.");
                }
            } else {
                alert("Pls select only images");
            }
        });

    </script>
</body>

</html>

 

© 著作权归作者所有

Delete90
粉丝 4
博文 56
码字总数 134752
作品 0
程序员
私信 提问
原创jquery图片上传预览插件uploadView

勾国印原创jquery图片上传前预览插件uploadView,支持自定义允许上传图片的最大尺寸、允许上传图片的格式、预览图片的宽度和高度以及上传成功后回调函数,兼容手机端和PC端。 大家在开发网站...

够过瘾
2015/10/24
5.5K
0
使用Web Uploader实现多文件上传

引入资源 使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF。 <!--引入CSS--> <link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css"> <!--引入JS--> <......

DavidBao
2015/04/15
32.2K
7
js怎么判断手机端的浏览器

比如通过QQ或者微信内置的浏览器打开链接 不能打开多个页面 而其他下载的手机浏览器就可以同时打开多个窗口 是不是浏览器的内核不同呢? 如果不同我该怎么通过js代码判断呢? 本来我写了一个图...

liuyan__
2015/10/10
3.1K
6
原生JS上传图片(FormData,可预览,一次多图)

前言: 适合人群:刚起步的前端新人。(前后端未分离的项目)全栈后端老大哥的前端需求(点名批评下jsp)。 解决问题: 知识点: 1.普通js上传一张图片 HTML代码: 需要一个input:file图片上传控件 ...

TJ在掘金
06/13
0
0
OSChina 在线工具 RunJS 上线,让 JS 飞一会儿!

RunJS 是一个在线编辑、保存、分享 HTML、CSS、JavaScript 代码的平台,拥有实时预览、分享、Fork等多种特性。 体验地址:http://runjs.cn 特性一览: 代码编辑:提供 HTML、CSS、JS 三种常见...

王振威
2012/10/30
12.3K
155

没有更多内容

加载失败,请刷新页面

加载更多

mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
29分钟前
1
0
golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

非正式解决方案
今天
1
0
前端——使用base64编码在页面嵌入图片

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于...

被毒打的程序猿
今天
0
0
Flutter 系列之Dart语言概述

Dart语言与其他语言究竟有什么不同呢?在已有的编程语言经验的基础上,我们该如何快速上手呢?本篇文章从编程语言中最重要的组成部分,也就是基础语法与类型变量出发,一起来学习Dart吧 一、...

過愙
今天
1
0
rime设置为默认简体

转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

zhenruyan
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部