.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 EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
Jquery ajaxsubmit上传图片实现代码
Nov 04 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 Javascript
如何用js判断dom是否有存在某class的值
Feb 13 Javascript
jquery实现页面加载效果
Feb 21 Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 Javascript
js实现拖拽功能
Mar 01 Javascript
vue-ajax小封装实例
Sep 18 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 Javascript
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 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二维数组的去重问题解析
2011/07/17 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
原生js调用json方法总结
2018/02/22 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
python for和else语句趣谈
2019/07/02 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
揠苗助长教学反思
2014/02/04 职场文书
2014年英语工作总结
2014/12/20 职场文书
小孩不笨观后感
2015/06/03 职场文书
会议主持词通用版
2019/04/02 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA
带你了解Java中的ForkJoin
2022/04/28 Java/Android