<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. Spring Boot 数据库连接池 HikariCP

    简介 HikariCP 来源于日语,「光」的意思,意味着它很快!可靠的数据源,spring boot2.0 已经将 HikariCP 做为了默认的数据源链接池. 官网详细地说明了HikariCP所做的 ...

  2. 最短Hamilton路径【状压DP】

    给定一张 nn 个点的带权无向图,点从 0~n-1 标号,求起点 0 到终点 n-1 的最短Hamilton路径. Hamilton路径的定义是从 0 到 n-1 不重不漏地经过每个点恰好一次. 输入 ...

  3. Markdown简记

    一篇好的博客文档离不开一个优秀的编辑器.借此篇文章介绍一下编写该博客markdown的语法,方便大家写出更好更漂亮的文档.重点是点击左上角的Github链接,有主题源码哦 一篇好的博客文档离不开一个优 ...

  4. 使用loadrunner编写webservice接口请求

    1.使用工具: loadrunner12,本实例截图中都是loadrunner12工具 2.操作步骤: 1).新建脚本,选择Web Services协议: 2).选择工具栏: 3).点击Import, ...

  5. 学习笔记74—函数argsort()

    ****************************************************** 如有谬误,请联系指正.转载请注明出处. 联系方式: e-mail: heyi9069@gm ...

  6. Phpstorm-远程连接服务器实时编辑代码

    一,配置远程服务器FTP 1.打开Phpstorm >>> 选择 2.选择 3.输入项目名称(此项目名称不会同步到服务器,只是在本地电脑上的项目名称) 4.将编辑器设置为实时自动同步 ...

  7. SQL 基础学习(1)：下载DB Browser for SQLite. 下载graphviz(为了使用Rails ERD的前提)出现❌，已debug.

    SQL is a standard language for storing, manipulating and retrieving data in databases. 关系型数据库:RDBMS( ...

  8. 常见的eclipse和真机出现的问题

    1.eclipse和手机连接时间过断导致运行时报错(时间,,,) 2.adk中文件夹中文件遗失错乱: tools下的zipalign丢失(打包时出现提示the zipalign tool was no ...

  9. springmvc请求参数异常统一处理

    1.ExceptionHandlerController package com.oy.controller; import java.text.MessageFormat; import org.s ...

  10. mysql Access denied for user root @localhost (using password:YES)错误

    C:\AppServ\MySQL> mysql -u root -p Enter password:  ERROR 1045 (28000): Access denied for user 'r ...