简单快捷的实现图片上传预览效果
简单快捷的实现图片上传预览效果
如何简单快捷的实现图片上传预览效果,想必这是绝大多数的c#新手遇到的一个小难题。
我学习c#也有一年的时间了,就把一个简单的方法给大家看看。
如下:
readAsDataURL()方法可以获取API异步读取的文件数据,另存为数据URL;将该URL绑定到img标签的src属性上,就可以实现图片的上传预览效果了:
- readAsDataURL()是FileReader对象中的一个方法
看代码:
1.var imgaReaderI = new FileReader();
2. regexImageFilter = /^(?:image\/bmp|image\/png|image\/jpeg|image\/jpg)$/i;
3. imgaReaderI.onload = function (evt) {
4. $("#IimgPicturer").attr("src", evt.target.result);
5. }
6. $("#fileImg").change(function () {
7. var imgafFile = $("#fileImg").prop('files')[0];//prop添加属性名称
8. //加载image标签中
9. if (!regexImageFilter.test(imgafFile.type)) {
10. layer.msg('选择的不是一个有效的图片文件', { icon: 0 });
11. } //readAsDataURL()方法可以获取API异步读取的文件数据,另存为数据URL;将该URL绑定到img标签的src属性上,就可以实现图片的上传预览效果了。
12. imgaReaderI.readAsDataURL(imgafFile);
13. })
/^(?:image\/bmp|image\/png|image\/jpeg|image\/jpg)$/i; ——可以用这些格式的图片类型
而以上代码中注释的字体就是解析;
上面是视图的js代码,下面则是控制器所写的代码:
1.public ActionResult InsertModeofPayment(SYS_PaidType sysPaidType, HttpPostedFileBase fileImg)
2. {
3. string strMsg = "failed";
4. try
5. {
6. //判断支付类型表中是否已经存在新增的支付信息
7. var stuCount = (from tbPaidType in myModels.SYS_PaidType
8. where tbPaidType.PaidTypeID == sysPaidType.PaidTypeID ||
9. tbPaidType.PaidMC == sysPaidType.PaidMC
10. select tbPaidType).Count();
11. if (stuCount == 0)
12. {
13. SYS_PaidType dbPaidType = new SYS_PaidType();
14. dbPaidType.PaidMC = sysPaidType.PaidMC;
15. dbPaidType.Introduces = sysPaidType.Introduces;
16. dbPaidType.Status = "开启";
17. dbPaidType.WhetherAddition = "未添加";
18. dbPaidType.Expurgate = "未删除";
19. //声明一个byte[](字节型数组)来保存新增的图片
20. byte[] imgFile = null;
21. //判断传入的图片是否为空
22. if (fileImg != null && fileImg.ContentLength > 0)
23. {
24. //初始化数组的长度,为节省空间,长度由实际上传的图片的长度决定
25. imgFile = new byte[fileImg.ContentLength];
26. //读取该图片文件
27. //将图片转为流结束位置
28. //将流读取为byte[],参数:byte[],读取开始位置,读取字节数
29. fileImg.InputStream.Read(imgFile, 0, fileImg.ContentLength);
30. }
31. dbPaidType.PaidLogo = imgFile;
32. myModels.SYS_PaidType.Add(dbPaidType);33. myModels.SaveChanges();
34. strMsg = "success";
35. }
36. else
37. {
38. strMsg = "该支付信息已经存在,不需要重复输入数据!";
39. }
40. }
41. catch (Exception)
42. {
43. strMsg = "failed";
44. }
45. return Json(strMsg, JsonRequestBehavior.AllowGet);}
第19到28行便是图片所需的代码;
点击图片选择所需图片便可在页面是如下所示:
上图便是所浏览图片;
注:(页面里内容仅供参考,别无他用)
简单快捷的实现图片上传预览效果相关推荐
- JavaScript 图片上传预览效果
图片上传预览是一种在图片上传之前对图片进行本地预览的技术. 使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验. 但随着浏览器安全性的提高,要实现图片上传预览也越来越困难. 不过群众的智慧 ...
- 简单的做一个图片上传预览(web前端)
在做web项目很多的时候图片都是避免不了的,所以操作图片就成了一个相对比较棘手的问题,其实也不是说很麻烦,只是说上传然后直接预览的过程很恶心,今天简单的做一个处理. 效果预览: 代码: <!DO ...
- ASP.NET工作笔记之一:图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
- js实现图片上传预览及进度条
js实现图片上传预览及进度条 原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...
- JAVA实现一个图片上传预览功能
这个小项目主要使用java实现了一个简单的图片上传预览功能,废话不多说,先上实现成果 ^ _ ^
- Angular6自定义指令实现多图片上传预览
在做移动端开发多时候经常会遇到用户图片上传的需求,有单图片上传预览的需求,也有多图片上传预览的需求.自己刚遇到这个需求的时候有踩到各种个样到坑.经过多番尝试,下面将本人成功的一个案例分享出来(公司对外 ...
- php 图片上传预览(转)
网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- java 图片上传 预览 demo_图片上传预览
[实例简介] 实现图片上传预览,可以增加新的空数组,并上传和替换.还有删除功能:提交的时候,还可以判断是否有空的img [实例截图] [核心代码] 613ddc50-96b8-4197-ba2e-1e ...
- Bootstrap 3 : 图片上传预览 image upload preview
头部均为: <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel= ...
最新文章
- 虚拟桌面的备份恢复最佳实践 第一部分
- 在C盘和D盘执行php 结果不同,window_双系统电脑给C盘扩容后导致D盘Win10引导项丢失该怎么办?,为了写个经验,特意把C盘用无 - phpStudy...
- Java黑皮书课后题第6章:*6.6(显示图案)编写方法显示如下图案:public static void displayPattern(int n)
- 陕西师范大学计算机科学学院保研院校,陕西师范大学计算机科学学院(专业学位)现代教育技术保研细则...
- 测试框架 如何测试私有方法_高效的企业测试–测试框架(5/6)
- Unity3d 札记-Let's try shooting 知识点汇总
- 华为郑叶来:致敬开发者,共创“ AI ”的世界
- linux 信号 --- 产生 阻塞 捕捉
- vue学习笔记-15-vue生命周期
- 【电力】永磁同步电机-自抗扰控制PMSM ADRC附matlab代码
- 使用 React 和 Vite 使用 Tauri 构建番茄钟
- Python控制Excel表格的操作以及问题处理
- 物联网平台的开发目标以及技术架构
- 注册苹果开发者,登录后提示Need assistance with accessing your developer account?解决过程
- be going to用法口诀
- 愚人节 整人程序 by wy811007
- codeforces Good Bye 2022
- 精选提高开发效率的20个idea插件
- 第N位数字[学会找规律,发现类似通项公式的捷径]
- 爬虫--简单woff文件的处理