图片功能
开发工具与关键技术: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;}