~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：Visual Studio 2015 外部文件的图片绑定
撰写时间：2019.3.30
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
在我们代码中，经常会遇到要在页面上显示图片，我们之前常用的方法是，如下图：在建页面的时候给它一个image文件来放我们要设置的图片，但是这样有时候没办法满足我们要需求，例如：用户头像图片的绑定这些都没有办法实现，因为你不可能把所有的图片都存储在一个文件里。
我们在遇到这种用户需要自己选择图片的情况下，不可能在用以前的做法了。而我们可以用下面这种做法。通过一个属性为file的input的标签来添加图片。
为什么只有带有flie属性的input标签才能实现呢，因为只有带有file属性的input标签，才能打开选择文件这个窗体。
如下图：
思路：思路其实很简单，就是通过属性为file的input，先获取图片信息，然后通过readAsDataURL()方法读取文件，然后把图片数据绑定到image的src上。
代码如下：
<body>
<input type="file" name="name" value=" " id="inputbox" hidden/>
<img style=" width:600px;height:280px;" id="imagebox"/>
<style>
img{
border:10px dashed;
border-color:#0026ff;
}
</style>
<script src="~/Plugins/jquery-3.2.1.min.js"></script>
<script>
青绿色的带码是引用李诗婷老师的代码
//正则表达式 用来判断选选择的文件是否是图片
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;
//读取文件
var fileReader = new FileReader();
//通过image的点击事件来触发input的点击事件
$("#imagebox").click(function () {
$("#inputbox").click();
});
$("#inputbox").change(function () {
//获取input选中文件的详细信息
var image = $("#inputbox").get(0).files[0];
//判断选择的文件是否是图片
//test()方法检索字符串中的指定值。返回值是 true 或 false。
if(regexImageFilter.test(image.type)){
fileReader.readAsDataURL(image);
}
else {
alert('选择的不是一个有效的图片文件');
}
});
fileReader.onload = function (evt) {
//给img标签设置图片
$("#imagebox").attr("src", evt.target.result);
}
</script>
</body>
点击image标签添加图片：
效果图如下，左图是点击前，右图是点击后
这是我对图片绑定的理解和总结，有什么不对的，请各位指出来。
1923
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
