.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 相关文章推荐
JQuery 1.4 中的Ajax问题
Jan 23 Javascript
js获取网页高度(详细整理)
Dec 28 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
在vue中使用jointjs的方法
Mar 24 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
解决vue的router组件component在import时不能使用变量问题
Jul 26 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关联链接常用代码
2012/11/05 PHP
php实现aes加密类分享
2014/02/16 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
php中socket通信机制实例详解
2015/01/03 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
ThinkPHP模板标签eq if 中区分0,null,false的方法
2017/03/24 PHP
jquery 指南/入门基础
2007/11/30 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
javascript定义变量时有var和没有var的区别探讨
2014/07/21 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
使用js实现数据格式化
2014/12/03 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
关于vue面试题汇总
2018/03/20 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
Python可跨平台实现获取按键的方法
2015/03/05 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
DNA基因检测和分析:23andMe
2019/05/01 全球购物
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
公司市场部岗位职责
2015/04/15 职场文书
python解决12306登录验证码的实现
2021/04/18 Python