图片上传

图片上传

开发工具与关键技术：Visual Studio 2015
作者：徐晶旗
撰写时间：2019年 7月 6日 

首先通过文件获取的接口来获取选择的图片并显示出来
FileReader接口提供了一个异步的API，通过这个API可以从浏览器中异步访问文件系统中的数据。
因此，FileReader接口可以读取文件中的数据，并将读取的数据放入到内存中去
选择照片:用FileReader对象来读取本地数据，并且将数据结果赋值给image的src

<img src="" alt="" width="160" height="172" id="IsImgCommodityPicture" class="border" ondblclick="chooseImageFile('IStudentPicture')" />
                            <input type="file" name="fileStudentImage" id="IStudentPicture" hidden accept="image/*" onchange="showImgToView('IStudentPicture')" />

创建FileReader对象，
var imgReader = new FileReader();
匹配图片正则表达式 过滤图片文件
(?:)非捕获型分组

  regexImageFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

触发file表单点击事件

  function showImgToView(inputFileId) {
            选择图片文件
            console.log($("#" + inputFileId));
            var imgFile = $("#" + inputFileId).get(0).files[0];
            判断上传文件是否为图片格式

  if (!regexImageFilter.test(imgFile.type)) {
                layer.msg("请选择有效的图片文件", { icon: 0, title: "提示" });
            }
            else {
                readAsDataURL()方法可以获取API异步读取的文件数据，另存为数据URL;
                FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。
                Data URL是一项特殊的技术，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件。
                imgReader.readAsDataURL(imgFile);
            }
        }

        imgReader.onload = function (evt) {
            console.log(evt);
            将该URL绑定到img标签的src属性上，就可以实现图片的上传预览效果了。
            $("#IsImgCommodityPicture").attr("src", evt.target.result);
        }

控制器代码

  //判断图片文件是否为空
                if (fileStudentImage != null && fileStudentImage.ContentLength > 0)
                {
                    //声明变量
                    byte[] imgFile = null;
                    //设置变量的长度
                    imgFile = new byte[fileStudentImage.ContentLength];

                    fileStudentImage.InputStream.Read(imgFile, 0, fileStudentImage.ContentLength);
                    pwCommodity.CommodityPicture = imgFile;
                }

下面就可以上传图片了