图片的选择和显示

开发工具与关键技术：MVC

作者：盘洪源

撰写时间：2019年6月5日星期三

在做一些页面的时候避免不了图片的上传，这个图片的上传效果是怎么样的。

看下图：

这个就是图片的选择框，在我们点击这个框的时候会给我们弹出一个文件选择，当我们选中图片的时候就把图片显示在这个框上面，如果选中的不是一个图片这个时候就需要用到一个正则表达式来进行一个判断。

HTML代码：

<img src="" alt=""
width="150" height="180" id="IsImgStudentPicture"
class="border border-primary"
ondblclick="showImageFile('IStudentPicture')" />

                           <input
type="file" name="fileStudentImage"
id="IStudentPicture" hidden accept="image/*"
onchange="loadImgToEimg('IStudentPicture')" />

                           <p>双击选择图片</p>

然后是点击这个框就弹出一个图片文件的选择：

function showImageFile(imageFileId)
{

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

        }

然后是一个图片文件的正则表达式：

这种正则表达式网上很多，如果不会自己写可以去网上找。

然后就是匹配图片正则表达式：

var imgReader =
new FileReader();

再一个就是文件读取onload事件：

imgReader.onload = function (evt) {

            //绑定新增图片

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

            //绑定修改图片

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

        }

最后就是将选择的图片显示到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);

        }

效果图：