.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 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
过虑特殊字符输入的js代码
Aug 05 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
Oct 17 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
Jul 09 Javascript
简介JavaScript中search()方法的使用
Jun 06 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
node.js连接MongoDB数据库的2种方法教程
May 17 Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 Javascript
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 Javascript
vue 防止页面加载时看到花括号的解决操作
Nov 09 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 is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
php微信开发之关注事件
2018/06/14 PHP
js的event详解。
2006/09/06 Javascript
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
javascript常用功能汇总
2015/07/05 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
python去除字符串中的换行符
2017/10/11 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
Python之用户输入的实例
2018/06/22 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
python的命名规则知识点总结
2019/10/04 Python
Python如何在DataFrame增加数值
2020/02/14 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
关于python中remove的一些坑小结
2021/01/04 Python
奥地利网上书店:Weltbild
2017/07/14 全球购物
涉外文秘个人求职的自我评价
2013/10/07 职场文书
联谊会主持词
2014/03/26 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书