背景图片显示器

开发工具与关键技术：Visual Studio 2015
作者：杨灵武
撰写时间：2019/05/05
1.

2．打开file表单，选择图片

3. 创建FileReader对象

4.创建FileReader对象
var imgReader = new FileReader();
5.

//正则表达式 过滤图片文件
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;
6. 如果你上传的不是图片格式它就会有一个提示

加入一些判断
//file表单改变事件，将选择的图片显示到img元素
function showImg(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);
}
}
7.
//读取文件 onload事件
imgReader.onload = function (evt) {
//将该URL绑定到img标签的src属性上，就可以实现图片的上传预览效果了。
$(“body”).attr(“style”, ‘background-image: url("’ + evt.target.result + ‘")’);
$("#container").attr(“style”, ‘background-image: url("’ + evt.target.result + ‘")’);
$(".controlMusic").attr(“style”, ‘background: url("’ + evt.target.result + ‘")’);
$(".layui-form").attr(“style”, ‘background-color: transparent’);
};
8.显示出来的效果如下图