.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 input 数字验证代码
Jul 30 Javascript
在jquery中处理带有命名空间的XML数据
Jun 13 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
vue cli使用绝对路径引用图片问题的解决
Dec 06 Javascript
vue mounted组件的使用
Jun 18 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 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+DBM的同学录程序(2)
2006/10/09 PHP
深入PHP FTP类的详解
2013/06/13 PHP
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
vue-cli入门之项目结构分析
2017/04/20 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
python中下标和切片的使用方法解析
2019/08/27 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
tornado+celery的简单使用详解
2019/12/21 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
SQL Server笔试题
2012/01/10 面试题
后进生转化工作制度
2014/01/17 职场文书
年终考核评语
2014/01/19 职场文书
财务部总监岗位职责
2014/03/12 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书
详解Laravel制作API接口
2021/05/31 PHP
Java使用jmeter进行压力测试
2021/07/09 Java/Android
Python内置的数据类型及使用方法
2022/04/13 Python