.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 相关文章推荐
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
vue.js实例todoList项目
Jul 07 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
react中Suspense的使用详解
Sep 01 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 Javascript
js实现整体缩放页面适配移动端
Mar 31 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
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 页面编码声明方法详解(header或meta)
2010/03/12 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
php源码的安装方法和实例
2019/09/26 PHP
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
JS 面向对象的5钟写法
2009/07/31 Javascript
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
python提取字典key列表的方法
2015/07/11 Python
Python的pycurl包用法简介
2015/11/13 Python
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
python删除文本中行数标签的方法
2018/05/31 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
使用python从三个角度解决josephus问题的方法
2020/03/27 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
PHP笔试题
2012/02/22 面试题
幼师求职信
2014/06/23 职场文书
2019求职信大礼包
2019/05/15 职场文书
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android