图片功能

图片功能

开发工具与关键技术：VS，C#
知识作者：陈铨滔 
撰写时间：2020-8-17
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

1.在Document文件夹创建studentPicture文件夹放图片
2.自定义列图片Function showPicture(rowData){  //rowData输出控制台var picture = rowData.studentPicture;// 声明图片If(picture != undefined && picture != null && picture != ‘’)}{   //判断不等于空return ‘<button type=”button” class=”layui-btn layui-btn-xs” onclick=”openUserPictre(\’’ + picture + ‘\’)”>查  看</button>’;}else{  return”未上传”;   }   }
3. 查看图片function openUserPictre(picture){
4. 3.1图片路径   var pictureUrl = ‘@Url.Content(“~/Document/图片路径”)’ + picture;
5. 3.2图片元素  var img = ‘<img src=” ‘ + pictureUrl + ’”’ style=”max-width: 500px;max-height : 500px;”>’; 
6. 3.3使用layer显示图片 layer.open({ type:
7. 1,//页面层 title:false,//关闭标题 closeBtn:0,//不显示关闭按钮 
8. shadeCloseL true,//点击遮罩层关闭弹窗   
9. content: img //弹窗显示内容});  }  
10. 4. 图片选择显示图片
11. 4.1新增选择,打开图片文件选择function showImageSelectDialog(){$(“#studentPictureFile”).click();  } //使用Jqury触发文件选择框的点击事件
12. 4.2新增模态框：正则验证图片并绑定图片 //图片文件 正则表达式过滤image/jpeg,image/png,image/jpg,image/gif,image/bmp regexImageFilter = /^(?:image\/bmp|image\/gif|image\/jpg|image\/jpeg|image\/png)$/i; 
13. 4.3文件读取器 var imgReader = new FileReader();
14. 4.4 文件选择控件改变事件 -- 将选择的图片显示到 img元素function loadImgToImg(){
15. 4.5选取选择图片var imgfFile = $("#studentPictureFile").get(0).files[0]};判断选择的文件扩展名是否符合正则表达式if(regexImageFilter.test(imgfFile.type)){ //使用FileReader读取图片并转为URL  imgReader.readAsDataURL(imgfFile); }else{alert("选择的不是一个有效的图片文件");    }   }
16. //文件读取 onload事件，将读取到图片显示的到Img元素imgReader.onload = function(evt){ $("#studentPicture").attr("src", evt.target.result); 图片ID }
17. 4.6清空图片  $("#studentPicture").attr("src", "");图片ID
18. 5. 保存图片获取图片 var studentPictureFile = $("#studentPictureFile").get(0).files[0];使用JQuery Ajax发送FormData数据      构建FormData数据form.append("stuPicture", studentPictureFile);  stuPicture为C#名字
19. 6. C#  判断是否上传了新图片if(stuPicture !=null && stuPicture.ContentLength > 0){
20. 7.保存新上传的文件  
21. 7.1文件类型   string imgExtension = Path.GetExtension(stuPicture.FileName); 7.2文件名称   string imgFileName = DateTime.Now.ToUniversalTime().ToString("yyyyMMddHHmmssffff") + "_" + Guid.NewGuid() + imgExtension;  名称用时间获取  
22. 7.3保存文件 stuPicture.SaveAs(imgFilePath);
23. 7.4将文件名称设置到学生中   student.studentPicture = imgFileName;}