项目功能绑定图片

在现在着手的项目里，有一个就是上传图片保存，对于这个功能先前也有一定的了解。
之前呢是双击input里的文本框才弹出文件选择，所以也有一点不同，但是大部分还是相同的
在button按钮上给了一个onclick点击事件（οnclick=“showImageFile(‘AitudentPicture’)”）。当然，这是一个单击的事件；而（οndblclick=””）是双击事件。所以说，要想给单击或者是双击事件，在input标签上给这两个事件也是可以的。
当然还是要用一个方法去接收调用的

//打开图片文件选择
         function showImageFile(imageFileId) {
             $("#" + imageFileId).click();
         }

打开文件选择后，要选择的文件也是要判断的，判断是否为图片文件的话，那就会用到一种常用的方法判断，那就是正则表达式了

//匹配图片正则表达式
        var imgReader = new FileReader();
        //图片文件 正则表达式过滤
        regexImageFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|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;

选择到图片后把图片显示到页面上，当然，是显示在表单的img里面（$("#AiImgStudentPicture").attr(“src”, “”);）当然，显示出来的图片也不是乱放的，所以可以把图片放在input里面，那么也就有了（οnchange=“loadImgToEimg(‘AitudentPicture’)”）来接收，当然也不会少了ID

//将选择的图片显示到 img元素
        function loadImgToEimg(imageFileId) {
            //选取选择图片
            var imgfFile = $("#" + imageFileId).get(0).files[0]; 
            //加载image标签中
            if (!regexImageFilter.test(imgfFile.type)) {
                //alert("选择的不是一个有效的图片文件");
                layer.msg('选择的不是一个有效的图片文件', { icon: 0 });
            }
            imgReader.readAsDataURL(imgfFile);
        }

上面的 readAsDataURL() 方法是可以在API异步读取文件数据，把数据另存为URL链接，还有 FileReader 对象readAsDataURL() 方法可以将读取到的文件编码成Data URL。对于Data URL，这是一个比较好的是可以将资料等文件内嵌在网页中，不需要放到外部文件里

最后就是把图片绑定就好了

//文件读取 onload事件
        imgReader.onload = function (evt) {
            //绑定图片
            $("#AiImgStudentPicture").attr("src", evt.target.result);
        }