如何绑定图片&什么是焦点

如何绑定图片&什么是焦点

文献种类：专题技术文献；
开发工具与关键技术：  VS          
作者：  卢媛媛    ；
撰写时间： 2019  年   4 月  15 日 

在比较常见的情况下一般给出的需求为下拉框数据绑定以及对应信息进行新增或修改，那么，在为了满足普遍情况下一些比较特殊的该如何处理呢？比如说“图片”，图片如何新增或回填后如何修改呢？？

1. 打开file表单， 进行选择图片
   function chooseImageFile(inputFileID) {
   $("#" + inputFileID).click();
   }

chooseImageFile：是"chooseImageFile('ID')"Ondblclick() 事件会在对象被双击时发生。

2.如何请求
a. 通过文件获取的接口来获取选择的图片并显示出来
b. FileReader接口提供了一个异步的API，通过这个API可以从浏览器中异步访问文件系统中的数据。因此，FileReader接口可以读取文件中的数据，并将读取的数据放入到内存中去
c. 选择照片:用FileReader对象来读取本地数据，并且将数据结果赋值给image的src、

申明一个新的变量来存放这个创建的对象
3.通过正则表达式过滤图片文件 接收jpg/jpeg;等等
accept 属性只能与 配合使用。它规定能够通过文件上传进行提交的文件类型。 如果不限制图像的格式，可以写为：accept=“image/*”。接收文件名后缀 (jpg ,jpeg, dox, docx, 等等)

4.file表单改变事件,将选择的图片显示到img元素
(1) readAsDataURL()方法可以获取API异步读取的文件数据，另存为数据URL;(2) FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。Data URL是一项特殊的技术，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件。
(3) "showImgToView(‘IStudentPicture’)"file表单改变事件,将选择的图片显示到img元素

function showImgToView(inputFileId) {
//选择图片文件
var imgFile = $("#" + inputFileId).get(0).files[0];
//console.log(imgFile);
//判断上传文件是否为图片格式
if (!regexImageFilter.test(imgFile.type)) {
layer.msg(“请选择有效的图片文件”, { icon: 0, title: “提示” }); }
else {
imgReader.readAsDataURL(imgFile);
}
读取文件，onload事件
imgReader.onload = function (evt)
{ console.log(evt);
$("#IsImgStudentPicture").attr(“src”, evt.target.result);
};
attr设置或返回被选元素的属性值。返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。为所有图像设置src属性;
Target:属性用于设置或返回 HyperLink 控件的target
Result: 显示最后一次点击事件返回的结果.属性包含由被指定事件触发的事件处理器返回的最后一个值，除非这个值未定义。
将该URL绑定到img标签的src属性上，就可以实现图片的上传预览效果了。

如图所示图片就可以添加了，主要是打开表单双击事件打开文件；通过改变事件将选择的图片显示到页面如只选择图片添加正则表达式进行筛选；

二．焦点

onblur 属性在元素失去焦点时触发，常用表单验证代码（例如用户离开表单字段）Onblur属性与onfocus属性相反
Onfocus 属性时获得焦点触发；常用与input>, select>, 以及a>等标签。
注释：onfocus 属性不适用于以下元素：base>、bdo>、br>、head>、html>、iframe>、meta>、param>、script>、style> 或 title>。

在html中考生学号写 “setIsUniform()”
//设置学生认证码与学号保持一致
function setIsUniform() {
//获取学号信息
var StudentNumber = $("#IsStudentNumber").val(); //学号ID IsStudentNumber
//设置认证码与学号保持一致 $("#IsUniformAuthenticationCode").val(StudentNumber); //认证码
}

只要考生学号书写了离开考生学号文本框点击认证码文本框自动填写与考生学号一致；(失去焦点触发)