<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. Page.Cache

    https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.page.cache?view=netframework-4.8 Gets the ...

  2. vue 开发环境搭建

    https://www.cnblogs.com/goldlong/p/8027997.html 1,按照nodeJS. 2,nodejs 包含npm. 3, 执行: npm install -g @v ...

  3. springAOP实现操作日志记录，并记录请求参数与编辑前后字段的具体改变

    本文为博主原创,未经允许不得转载: 在项目开发已经完成多半的情况下,需要开发进行操作日志功能的开发,由于操作的重要性,需要记录下操作前的参数和请求时的参数, 在网上找了很多,没找到可行的方法.由于操作 ...

  4. 解决 Cannot uninstall 'pyparsing' 问题

    参考 pyparsing 无法卸载导致安装 matplotlib 出错 解决 Cannot uninstall 'pyparsing' 问题 在安装 pydot 时遇到依赖 pyparsing 无法更 ...

  5. CentOS 使用firewalld打开防火墙与端口

    CentOS 使用firewalld打开防火墙与端口 LinuxCentOS 基本使用 启动 : systemctl start firewalld 关闭 : systemctl stop firew ...

  6. Python3学习笔记--迭代器

    迭代 使用一个循环来遍历某个东西时这个过程本身叫做迭代. 可迭代对象 python中只要定义了可以返回一个迭代器的__iter__方法,或者定义了可以支持下标索引的__getitem__方法,那么它就 ...

  7. leecode第二百三十一题（2的幂）

    class Solution { public: bool isPowerOfTwo(int n) { bool is_flag=false; ) { ==)//如果为1,看是不是第一个1 { if( ...

  8. react初探（一）之JSX、状态（state）管理、条件渲染、事件处理

    前言: 最近收到组长通知我们项目组后面新开的项目准备统一技术栈为react,目前我的情况是三大框架只会angular和Vue.在实际项目中只使用过一次angular5,其余项目都是使用Vue写的.写篇 ...

  9. Venom- Eminem

    I got a song filled with shit for the strong willed. 我写了一首充满戾气的歌献给意志坚强的人. When the world give you a ...

  10. 雷林鹏分享：jQuery EasyUI 数据网格 - 添加复选框

    jQuery EasyUI 数据网格 - 添加复选框 本实例演示如何放置一个复选框列到数据网格(DataGrid).通过复选框,用户将可以选择 选中/取消选中 网格行数据. 为了添加一个复选框列,我们 ...