<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>HTML5 Upload</title>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>

    <script type="text/javascript">

        //前台处理获取到的图片并预览，前台限制图片的高度和宽度及其图片大小

        var src;

        //         //处理file input加载的图片文件

        $(document).ready(function (e) {

    //获取input图片宽高和大小

    function getImageWidthAndHeight(id, callback) {

        var _URL = window.URL || window.webkitURL;

        $("#" + "imgUpload").change(function (e) {

            var file, img;

            if ((file = this.files[0])) {

                img = new Image();

                img.onload = function () {

                    callback && callback({"width": this.width, "height": this.height, "filesize": file.size});

                };

                img.src = _URL.createObjectURL(file);

            }

        });

    }

    getImageWidthAndHeight('imgUpload', function (obj) {

        // //文件上传后本质上就是上传的一个文件对象的列表,获取上传的列表中的第一个

        var f = document.getElementById('imgUpload').files[0];

        //通过下面的方法将文件读成流的形式

        src = window.URL.createObjectURL(f);

        //生成图片的预览

        //判断图片的高度、宽度、大小

        var height = obj.height;

        var width = obj.width;

        var size = obj.size;

        var imageVaildInfo = vaildImage(height,width,size);

        //如果不正确,进行将之前的清楚

        if("success" !=imageVaildInfo ){

            alert(imageVaildInfo);

            $("#imgUpload").val("");

            return;

        }

        document.getElementById('imageView').style.height=height+"px";

        document.getElementById('imageView').style.width=width+"px";

        document.getElementById('imageView').src = src;

    });

    //图片的大小等信息的验证

            function vaildImage(height,width,size){

                var imageVaildInfo;

                if(height > 500){

                    imageVaildInfo = "你上传的图片已超出限定的图片高度,请重新上传!";

                 }else if(width > 500){

                    imageVaildInfo = "你上传的图片已超出限定的图片宽度,请重新上传!";

                }else{

                    imageVaildInfo = "success";

                }

            return imageVaildInfo;

            }

})

    </script>

</head>

<body>

<input type="file" id="imgUpload" name="imgUpload" draggable="true" single/> <!--允许file控件接受的文件类型-->

<!--<input type="file" id="imgUpload" name="imgUpload" accept="image/*" multiple/>-->

<img id="imageView" src="" style="width:500px;height:500px;border:1px solid #000000;"/>

</body>

</html>

　　

jquery实现本地图片上传预览和限流处理的更多相关文章

  1. JavaScript实现本地图片上传预览功能（兼容IE、chrome、FF）

    需要解决的问题有:本地图片如何在上传前预览.编辑:最近发现这个功能很多是基于flash实现的,很多JavaScript实现的代码兼容性都很差,特别是在IE和firefox和chrome三个浏览器上不兼 ...

  2. HTML+Jquery实现多图片上传预览功能

    HTML:使用input的onchange事件,它一改变就触发事件 <p id="p3"> <input name="File" onchan ...

  3. 使用ajax，结合jquery,php实现图片上传预览功能

    大致逻辑:点击页面的file,上传图片到指定的php处理图片的文件,处理完成以后,将图片的连接地址返回,JS控制返回的数据,然后将图片动态的展示出来html代码<label> <im ...

  4. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

  5. 模拟QQ心情图片上传预览

    出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...

  6. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  7. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  8. ASP.NET工作笔记之一：图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

  9. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

随机推荐

  1. kamailio 云部署 配置NAT

    公有云配置NAT 第一步:将内网ip广播至公网ip,编辑/etc/kamailio/kamailio.cfg文件,搜索listen,添加如下配置 # listen=udp: listen= adver ...

  2. [php] 添加接口访问日志(文件)

    日志参数: 请求参数,请求地址,响应结果 步骤: 1. 定义日志目录,没有的需要创建 2. 定义日志名称 3. 以追加的形式写入日志文件  FILE_APPEND public function ad ...

  3. matlab 入门

    ---恢复内容开始--- 1.cast表示将元素转化成对应的ASCII值 如cast('hellothere','uint8')输出结果为104 101 108 108 111 116 104 101 ...

  4. Vue-admin工作整理（六）：路由元信息

    路由源信息:每一个路由对象,可以配置一个meta字段,它里面可以存放一些我们定义的信息,比如说页面是否需要一个权限 to.meta && setTitle(to.meta.title) ...

  5. PowerDesigner大小写转换

    在菜单栏找到:Tools-->Execute Commands --> Edit/Run Script 快捷键:Ctrl+Shift+X 输入下边的代码就可以了.(UCase大写 LCas ...

  6. PCA和PCoA

    讲解很详细:http://blog.genesino.com/2016/10/PCA/ PCA分析一般流程: 中心化(centering, 均值中心化,或者中位数中心化),定标(scale,如果数据没 ...

  7. ftp定时任务-日志备份

    1. 安装 #yum -y install vsftpd 2. 修改配置文件 #vi /etc/vsftpd/vsftpd.conf FTP服务器的默认目录是/var/ftp,而且当用户以匿名方式登录 ...

  8. Educational Codeforces Round 53 (Rated for Div. 2)G. Yet Another LCP Problem

    题意:给串s,每次询问k个数a,l个数b,问a和b作为后缀的lcp的综合 题解:和bzoj3879类似,反向sam日神仙...lcp就是fail树上的lca.把点抠出来建虚树,然后在上面dp即可.(感 ...

  9. java中JScrollPane不显示水平滚动条的解决办法

    在JPanel中添加了表格,表格中对东西太多,需要水平滚动条滑动才能够完全找到所有数据,如果没有水平滚动条的话,数据堆积在一起,无法分开 做法是: 第一步:先将表格自动调整的状态给关闭掉:table. ...

  10. 找到多个与名为“Home”的控制器匹配的类型

    “/”应用程序中的服务器错误. 找到多个与名为“Home”的控制器匹配的类型.如果为此请求(“{controller}/{action}/{id}”)提供服务的路由没有指定命名空间以搜索与此请求相匹配 ...