<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. ASP.NET - Validators

    ASP.NET validation controls validate the user input data to ensure that useless, unauthenticated, or ...

  2. HTTP请求与接收get/post方式

    //get方式 public string HttpGet(string Url, string postDataStr) { HttpWebRequest request = (HttpWebReq ...

  3. laravel文件上传

    一.视图文件代码 <td> <input type="file" name="brand_logo" id="logo" ...

  4. Pandas 基础(17) - to_datetime

    这一节依然是关于时间的知识, 在平时的工作中, 有一个非常令我们恼火的就是时间的格式可以有很多种表达, 比如下面这张图, 我们看到同样是 2017年1月5日, 可以有很多种时间的格式, 我们需要先将格 ...

  5. ECharts导出word 图表模糊失真

    在项目中会有这样的需求,echars生成图表导入到word中 在项目中用的插件 博主有一篇文章将的是  vue使用jquery的三方插件jquery.wordexport.js   https://b ...

  6. Hash索引和BTree索引区别【转】

    索引是帮助mysql获取数据的数据结构.最常见的索引是Btree索引和Hash索引. 不同的引擎对于索引有不同的支持:Innodb和MyISAM默认的索引是Btree索引:而Mermory默认的索引是 ...

  7. python小技巧---打印出不同颜色的输出

    在调试代码时打印常常一种颜色,找个东西真的是很难,在一次听金角大王的视频中听到了个方法,也是喀什使用了,本来不打算做记录了,可是稍微有几天不用,还得翻之前的代码,找着也是听麻烦的,现在在这里做个记录 ...

  8. mysq带条件的分页查询数据结果错误

    记一次mysql分页条件查询的结果出错: 以一张用户表为例,首先我们看表中的所有数据,注意红色框住的部分: 我们使用不带条件的分页查询来查询,数据显示是OK的: SELECT id,login_nam ...

  9. js 上下滚动加停顿效果，js 跑马灯加停顿效果

    <div id="middle"> <ul id="slide1"> <li>尾号1183的用户刚刚领取了 78.23元 的 ...

  10. C#通过DocX创建word

    网上有一些基础的东西,但是比如插入图片,就没有找到方案,最终自己摸索出来的. 1.首先通过Nuget获取引用,关键字:“DocX” 2.示例代码 class Program { static void ...