.net MVC+Bootstrap下使用localResizeIMG上传图片


Posted in Javascript onApril 21, 2017

本文实例为大家分享了使用localResizeIMG上传图片的具体代码,供大家参考,具体内容如下

需要加载的头文件

.net MVC+Bootstrap下使用localResizeIMG上传图片

 html:

<div class="form-group">
 <label class="col-sm-6 control-label" for="inputfile">维修照片上传</label>
 <div class="col-sm-6 ">
 <div style="background:url(../../fonts/add.png) no-repeat;width:151px;height:150px;float:left;" id="div1">
 <input type="file" accept="image/*" id="file" class="selectinput" style="width:151px;height:150px;opacity:.01">
 </div>

 </div>
 </div>

accept=“image/*”  这里有些手机可以拍照 有些不行 没有具体测试统计

$("#file").localResizeIMG({
 width: 400,
 //height: 200,
 quality: 1,
 success: function (result) {
 var img = new Image();
 img.src = result.base64;

 //$("body").append(img);
 $("#odd").append(img); //呈现图像(拍照?果)
 $.ajax({
 url: "/Home/UploadImg",
 type: "POST",
 data: { "formFile": result.clearBase64, "RepairNum": $('#RepairNum').val()},
 dataType: "HTML",
 timeout: 1000,
 error: function () {
 alert("ajax Error");
 },
 success: function (data) {
 //alert("Uploads success~")
 }
 });
 }
 });

界面样式

.net MVC+Bootstrap下使用localResizeIMG上传图片

后台action  Base64StringToImage 需要把压缩后的Base64转换

[HttpPost]
 public ActionResult UploadImg()
 {
 var file = Request["formFile"];
 var id = Request["RepairNum"];

 string fileName = "1.jpeg";
 string filePath = Server.MapPath("~/Upload/" + fileName);

 try
 {
 Base64StringToImage(file, filePath);
 //upImg.SaveAs(filePhysicalPath);
 //Session["ImgPath"] = path;
 //Base64StringToImage(file,);
 return Content("上传成功");
 }
 catch
 {
 return Content("上传异常 !");

 }
 }

 protected void Base64StringToImage(string strbase64, string filepath)
 {
 try
 {
 byte[] arr = Convert.FromBase64String(strbase64);
 MemoryStream ms = new MemoryStream(arr);
 System.Drawing.Bitmap bmp = new System.Drawing.Bitmap(ms);
 //bmp.Dispose(); 
 bmp.Save(filepath, System.Drawing.Imaging.ImageFormat.Jpeg);
 ms.Close();
 }
 catch (Exception ex)
 {
 }
 }

参考和下载GitHub:https://github.com/lyg945/localResizeIMG/tree/master/

参考文章:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 Javascript
JS对HTML标签select的获取、添加、删除操作
Oct 17 Javascript
查看大图功能代码jquery版
Nov 05 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
Node.js API详解之 string_decoder用法实例分析
Apr 29 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 #jQuery
ES6新特性七:数组的扩充详解
Apr 21 #Javascript
React中ES5与ES6写法的区别总结
Apr 21 #Javascript
ES6新特性六:promise对象实例详解
Apr 21 #Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 #Javascript
webpack配置的最佳实践分享
Apr 21 #Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 #Javascript
You might like
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
JavaScript的setter与getter方法
2017/11/29 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
2017/12/28 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
Python中字符串的处理技巧分享
2016/09/17 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
详解python中的json和字典dict
2018/06/22 Python
pandas.DataFrame选取/排除特定行的方法
2018/07/03 Python
使用Scrapy爬取动态数据
2018/10/21 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
python word转pdf代码实例
2019/08/16 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
2014迎新年晚会策划方案
2014/02/23 职场文书
贯彻学习两会心得体会范文
2014/03/17 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
质检员岗位职责范本
2015/04/07 职场文书
SSM VUE Axios详解
2021/10/05 Vue.js