.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 跨域访问解决方案
Feb 14 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
微信小程序 开发工具快捷键整理
Oct 31 Javascript
js实现textarea限制输入字数
Feb 13 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
javascript实现QQ空间相册展示源码
Dec 12 Javascript
Vue.set()实现数据动态响应的方法
Feb 07 Javascript
微信接入之获取用户头像的方法步骤
Sep 23 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
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
python常见数制转换实例分析
2015/05/09 Python
Python2.x与Python3.x的区别
2016/01/14 Python
Python手机号码归属地查询代码
2016/05/04 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
Sanic框架Cookies操作示例
2018/07/17 Python
python实现快递价格查询系统
2020/03/03 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
书法大赛策划方案
2014/06/04 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
优秀团支部申报材料
2014/12/26 职场文书
八达岭长城导游词
2015/01/30 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS