.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 相关文章推荐
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 Javascript
微信小程序转发事件实现解析
Oct 22 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 Javascript
javascript实现简单页面倒计时
Mar 02 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
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
php使用GeoIP库实例
2014/06/27 PHP
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
分页栏的web标准实现
2011/11/01 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
python使用chardet判断字符串编码的方法
2015/03/13 Python
Python文件的读写和异常代码示例
2017/10/31 Python
Java及python正则表达式详解
2017/12/27 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
python Django 反向访问器的外键冲突解决
2020/05/20 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
法人授权委托书
2014/04/03 职场文书
质量管理标语
2014/06/12 职场文书
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
2014年党建工作总结
2014/11/11 职场文书
被告答辩状范文
2015/05/22 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python