zoukankan      html  css  js  c++  java
  • 上传图片并限制图片格式和大小

    我这个用的是双击上传图片

    特俗要求。。。。

    <img id="urlImg" src="" width="205px" height="150px"  ondblclick="fileSelect();">
    
     <input type="file" name="fileToUpload" id="fileToUpload" onchange="changepic(this)"  style="display:none;">
            function fileSelect() {
                document.getElementById("fileToUpload").click(); 
            }
    
              function changepic() {
                  var fileTypes = [".jpg", ".png",".jpeg",".gif",".bmp"];
                    var filePath = fileToUpload.value;
                    var fileSize = 0;
                    var fileMaxSize = 1024*3;//1M
                
    
                    if(filePath){
                        var isNext = false;
                        var fileEnd = filePath.substring(filePath.indexOf("."));
                        
                        fileSize =fileToUpload.files[0].size;
                        var size = fileSize / 1024;
                        
    
                        var reads= new FileReader();
                        f=document.getElementById('fileToUpload').files[0];
                        reads.readAsDataURL(f);
                        
                        for (var i = 0; i < fileTypes.length; i++) {
                            if (fileTypes[i] == fileEnd) {
                                isNext = true;
                                break;
                            }
                        }
                        if (!isNext){
                           $.messager.alert('错误','请选择格式为*.jpg、*.gif、*.bmp、*.png、*.jpeg 的图片','error');
                            fileToUpload.value = "";
                            return false;
                        }
                        else if (size > fileMaxSize) {
                            $.messager.alert('错误','文件大小不能超过3M','error');
                            fileToUpload.value = "";
                            return false;
                        }else{
    
                            reads.onload=function (e) {
                                document.getElementById('urlImg').src=this.result;
                            }
                        }
                    }
                
                  
                }
  • 相关阅读:
    数据结构与算法4—队列
    栈的应用——括号匹配
    迷宫求解
    python的socket编程
    数据结构与算法3—栈
    数据结构与算法2—链表
    数据结构与算法1—线性表
    增量解析
    ElementTree类
    节点序列化
  • 原文地址:https://www.cnblogs.com/liaoxun/p/10321560.html
Copyright © 2011-2022 走看看