.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 相关文章推荐
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 Javascript
jQuery获取注册信息并提示实现代码
Apr 21 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
jquery单选框radio绑定click事件实现方法
Jan 14 Javascript
正则表达式替换html元素属性的方法
Nov 26 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
Django+vue跨域问题解决的详细步骤
Jan 20 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
微信小程序image图片加载完成监听
Aug 31 Javascript
layui使用label标签的方法
Sep 14 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下判断网址是否有效的代码
2011/10/08 PHP
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
checkbox使用示例
2013/08/23 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
2016/06/12 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
vant时间控件使用方法详解
2020/12/24 Javascript
Python中的各种装饰器详解
2015/04/11 Python
Python实现多并发访问网站功能示例
2017/06/19 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
django项目中新增app的2种实现方法
2020/04/01 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
电子狗项圈:eDog Australia
2019/12/04 全球购物
绩效专员岗位职责
2013/12/02 职场文书
利群广告词
2014/03/20 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python
Golang 入门 之url 包
2022/05/04 Golang