.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 HTML中的table
Apr 15 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
php基于redis处理session的方法
Mar 14 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
jquery对table做排序操作的实例演示
Aug 10 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
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生成zip压缩文件的方法详解
2013/06/09 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
Apache+PHP+MySQL搭建PHP开发环境图文教程
2020/08/06 PHP
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
python简单猜数游戏实例
2015/07/09 Python
python2 与python3的print区别小结
2018/01/16 Python
Python反转序列的方法实例分析
2018/03/21 Python
Python中关于浮点数的冷知识
2019/09/22 Python
python获取引用对象的个数方式
2019/12/20 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
python3中布局背景颜色代码分析
2020/12/01 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
文秘大学生求职信
2014/02/25 职场文书
爱祖国演讲稿
2014/05/04 职场文书
五四青年节演讲稿
2014/05/26 职场文书
幼儿园植树节活动总结
2014/07/04 职场文书
2014年社团工作总结范文
2014/11/27 职场文书
2015年暑期社会实践总结
2015/07/13 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python