.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 相关文章推荐
csdn 批量接受好友邀请
Feb 19 Javascript
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
jQuery 常用代码集锦(必看篇)
May 16 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
layui实现文件或图片上传记录
Aug 28 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
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
Python编程之Re模块下的函数介绍
2017/10/28 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
python基于SMTP协议发送邮件
2019/05/31 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
Django实现基于类的分页功能
2019/10/31 Python
Django异步任务线程池实现原理
2019/12/17 Python
python几种常用功能实现代码实例
2019/12/25 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
PHP两种查询函数array/row的区别
2013/06/03 面试题
花卉与景观设计系大学生求职信
2013/10/01 职场文书
面试后的感谢信范文
2014/02/01 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
收入证明怎么写
2015/06/12 职场文书
庭外和解协议书
2016/03/23 职场文书