<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. JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法

    网上搜索了,目前主流的Js代码压缩工具主要有Uglify.YUI Compressor.Google Closure Compiler,简单试用了UglifyJS 和Google Closure Co ...

  2. vue怎么引入外网json文件

    今日吃午饭时,伊万卡前端小妹问了我一个问题."App中有一个模块是用H5做的,其中有一个接口读取的是本地json资源文件,但是这个文件修改时间不定,我又不想每次修改了这个文件再重新发版打个包 ...

  3. 解决 scapy “NameError: global name 'wrpcap' is not defined” 错误

    解决 scapy "NameError: global name 'wrpcap' is not defined" 错误 通过 scapy 编写发包脚本时遇到如下错误: Trace ...

  4. _spellmod_aura_on_classmask

    -- 修改职业所有技能,公共冷却时间.冷却时间等--小技巧: 根据职业107,108来修改(近期会有改动) `aura` 技能光环ID `spellfamily` 职业代码 `type1` 百分比还是 ...

  5. Struts 2 概念介绍

    概念引入 Web层通常使用Servlet+jsp,现在使用Struts2来处理访问服务器请求 Service层 目前使用JavaBean Dao层目前使用Hibernate Spring是一个大的管家 ...

  6. 谈谈传统BIO网络编程模型的局限性与NIO

    先来看看我们的server端: 创建一个serversocket,进行监听,每来一个客户端,就启动一个新启动为其服务: private void createListenSocket() { //如果 ...

  7. conda命令简单使用

    Anaconda是一种Python语言的免费增值开源发行版,用于进行大规模数据处理.预测分析,和科学计算,致力于简化包的管理和部署.Anaconda使用软件包管理系统Conda进行包管理. 1.查看系 ...

  8. 20175317 《Java程序设计》第七周学习总结

    20175317 <Java程序设计>第七周学习总结 教材学习内容总结 第七周我学习了教材第八章的内容,学习了许多常用实用类,有以下内容: String类 1. 如何构造String对象 ...

  9. 【原】git常见用法

    1.克隆 当前用户:git clone 192.165.53.15:/home/git/repo/Tegra/bsp/tx1_filesystem.git/ 非当前用户:git clone xxxxx ...

  10. D - Dice Game （BFS）

    A dice is a small cube, with each side having a different number of spots on it, ranging from 1 to 6 ...