.net 图片上传 在不下载图片的情况下，实现图片显示，宽高、大小的条件判断,以及获取图片byte[]数据流

HTML中

<input type="file" id="file" style="display:none;" />
<div id="div">我是一个图标<img id="image"></div>

这里input:file设置隐藏是因为实际应用的时候我们不去点input:file，而是点这种类型的图标↓（我这里用div代替），所以隐藏起来，点div的时候手动触发input:file的点击事件即可

JS中：

                    var file = document.getElementById('file');
                    file.onchange = function () {
    
    
                        var fileData = this.files[0];//获取到一个FileList对象中的第一个文件( File 对象),是我们上传的文件
                        var pettern = /^image/;
                        //console.info(fileData.type)

                        if (!pettern.test(fileData.type)) {
    
    
                            layer.msg('图片格式不正确', {
    
     icon: 2 });
                            return;
                        }

                        var reader = new FileReader();
                        reader.readAsDataURL(fileData);//异步读取文件内容，结果用data:url的字符串形式表示
                        /*这里只能获得大小，不能获取宽高*/
                        if (fileData.size > 3145728) {
    
    
                            layer.msg('图片不得大于3M', {
    
     icon: 2 });
                            return;
                        }
                
                        /*需要获取宽高时才需要这个img参数，不需要可以删掉与img参数有关的所有代码*/
                        let url = window.URL || window.webkitURL;
                        let img = new Image();
                        img.src = url.createObjectURL(fileData);
    
                        /*当读取操作成功完成时调用*/
                        reader.onload = function (e) {
    
    
                            //console.log(e); //查看对象
                            //console.log(this.result);//值得一提的是，这个this.result就是图片的url，只不过是base64的格式，直接赋给图片的url是可以的
                            var _readerthis = this;
                        
                        /*必须要等img加载完才会有宽高信息，若放在reader.onload外面这个(img.width) <= 480的判断执行完才会出现宽高，这也是为什么我要放在reader.onload里面的原因*/
                            img.onload = function () {
    
    
                                if ((img.width) <= 480) {
    
    
                                    layer.msg('长图宽度需大于480px', {
    
     icon: 2 });
                                    return;
                                }
                                /*没有问题的话就可以赋值了*/
                                $("#image").attr("url",_readerthis.result);
                            }
                        }
                    }

					$("#div").click(function () {
    
     
					          $("#file").trigger("click");
					})

以上即可在页面显示图片了，有时我们在控制器（Controller）中需要用到该图片byte[] 格式的数据流，可以直接把在JS里自动生成的url（_readerthis.result）传入如下方法：

using System.Security;

        public byte[] getImgbyte(string url)
        {
    
    
            url = Regex.Replace(url, "data:image/(\\S*?);base64,", string.Empty);//过滤base64的格式
            byte[] data = Convert.FromBase64String(url);
            //要转回base64的格式也是可以的，不过前面需要自行加上之前被过滤掉的“data:image/jpg;base64,” 后面的逗号一定要加上 "jpg"属于图片后缀名
            //string imgString = Convert.ToBase64String(data);
            return data;
        }