上传图片

在我们使用的各种软件中，我们经常要用到上传照片功能，例如上传头像，或者发说说，发博客，那么上传图片这个功能究竟是如何来实现的呢，接下来我给大家来简单的介绍一下：

首先，我们通过文件获取的接口来获取选择的图片并显示出来

FileReader接口提供一个异步的API，通过这个API可以从浏览器中异步访问文件系统中的数据

ader接口可以读取文件中的数据，并将读取的数据放入到内存中去

选择照片：用FileReader对象来读取本地数据，并且将数据结果复制给image的src，就OK了。

下面请看详细解释

创建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 chooseImageFile(inputFileID)

        {

            $("#" + inputFileID).click();

        }

        file表单改变事件，将选择的图片显示到img元素

        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属性上，就可以实现图片的上传预览效果了。

            $("#IsImgStudentPicture").attr("src", evt.target.result);

            $("#UsImgStudentPicture").attr("src",evt.target.result);

        }

效果图如下：