.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 相关文章推荐
Javascript操纵Cookie实现购物车程序
Nov 23 Javascript
jquery 简单的进度条实现代码
Mar 11 Javascript
javascript算法学习(直接插入排序)
Apr 12 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
js对象继承之原型链继承实例
Jan 10 Javascript
JavaScript实现页面跳转的方式汇总
May 16 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
用vue设计一个日历表
Dec 03 Vue.js
uniapp微信小程序:key失效的解决方法
Jan 20 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下防止单引号,双引号在接受页面转义的设置方法
2008/09/25 PHP
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
俄罗斯皮肤健康中心:Pharmacosmetica.ru
2020/02/22 全球购物
网络安全方面的面试题
2016/01/07 面试题
大众服装店创业计划书范文
2014/01/01 职场文书
食堂个人先进事迹
2014/01/22 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
何时使用Map来代替普通的JS对象
2021/04/29 Javascript
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS
windows server2008 开启端口的实现方法
2022/06/25 Servers