一个原生input上传图片记录
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Content/js/index.js"></script>
<style>
body {
margin: 0px;
background-color: #F5F5F5;
}
h1 {
background-color: #3D83D9;
margin: 0px;
height: 40px;
}
.div-gap {
margin: 20px;
background-color: #FFFFFF;
}
.div-bgNo {
margin: 20px;
}
.div-border {
border: 5px;
border-radius: 5px;
}
.h200 {
height: 200px;
}
input {
border: 0px;
width: 100%;
height: 30px;
}
button {
background-color: #0074BA;
margin: 00px;
width: 100%;
height: 30px;
padding: 0px;
}
</style>
</head>
<body>
<h1></h1>
<div>
<!--1.输入框区域-->
<div>
<form id="j_form">
<input type="reset" style="display:none;" />
<div class="div-bgNo">
<label>亲爱的：<span>莫负韶华</span></label>
</div>
<div class="div-gap div-border h200">
<input name="userMessage" placeholder="请在这里直接填写你的问题或意见建议，谢谢">
<div style="margin-top:40px;margin-left:15px">
<img id="imgIdCard" style="width:100px;height:100px;border:0px" src="~/Content/image/add.png">
<input name="userLogo" id="urlIdCard" type="hidden" />
<input type="file" value="123456" id="btnIdCard" style="display:none" />
<div>上传照片</div>
</div>
</div>
<div class="div-gap">
<input name="userStore" placeholder="请选择门店">
</div>
<div class="div-gap">
<input name="userPhone" placeholder="请输入联系方式">
</div>
</form>
</div>
<!--2.按钮区域-->
<div class="div-gap">
<button id="j_sub">提交</button>
</div>
</div>
</body>
</html>js文件代码
//一.这里使用立即函数都一些方法进行封装
//访问入口为变量：myUitls
(function (w) {
//一.封装核心对象
var mainUtil = {
init: function () {
this.initLoad();
this.initEvent();
},
initLoad:function(){
var input = document.getElementById("btnIdCard");
if (typeof (FileReader) === 'undefined') {
input.setAttribute('disabled', 'disabled');
} else {
input.addEventListener('change',methodUtil.readFile, false);
}
},
initEvent: function () {
//1.上传图片事件
$('#imgIdCard').on('click', function () {
var input1 = document.getElementById("btnIdCard");
input1.click();
});
//2.提交按钮
$("#j_sub").on('click', function () {
//1.获取数据
$.ajax({
type: "Post",
url: "/Home/SaveData",
data: methodUtil.serializeObject($("#j_form")),
success: function (data) {
if (data.status == '2') {
alert("提交成功")
$("input[type=reset]").trigger("click");
}
else {
alert("提交失败")
}
}
});
})
},
}
/*********************************一.方法实现**********************************/
var methodUtil = {
//1.上传图片文件
readFile: function () {
var file = this.files[0];
//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
if (!/image\/\w+/.test(file.type)) {
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
$.ajax({
type: "Post",
url: "/Home/UploadAppImg",
data: {
imgStr: this.result,
},
success: function (data) {
if (data.status == '1') {
var url = data.message1;
document.getElementById("imgIdCard").src = url;
document.getElementById("urlIdCard").value = url;
}
else {
alert("上传失败")
}
}
});
}
},
//2.表单
serializeObject: function (form) {
var o = {};
$.each(form.serializeArray(), function (intdex) {
if (o[this['name']]) {
o[this['name']] = o[this['name']] + "," + this['value'];
} else {
o[this['name']] = this['value']
}
});
return o;
}
}
w.mainUtil = mainUtil;
})(window);
$(function () {
mainUtil.init();
})
后台图片处理
#region 1.保存用户图片
/// <summary>
/// 保存用户图片
/// </summary>
/// <param name="imgStr">图片文件Base64字符串</param>
/// <returns></returns>
public ActionResult UploadAppImg(string imgStr)
{
try
{
if (imgStr.Length > 22)
{
if (imgStr.Contains("data:image/jpeg;base64"))
{
imgStr = imgStr.Substring(23).Replace("\n\r", "");
}
else
{
imgStr = imgStr.Substring(22).Replace("\n\r", "");
}
}
else
{
return Json(new
{
status = "0",
promptInfor = "上传失败"
});
}
string[] ret = ToImage(null, null, imgStr);
if (ret[0] == "Success")
{
string relativePath = Path.Combine("/Upload\\ShopImg\\", ret[1]);
return Json(new
{
status = "1",
message1 = relativePath,
promptInfor = "上传成功",
});
}
else
{
return Json(new
{
status = "0",
promptInfor = "上传失败"
});
}
}
catch (Exception ex)
{
return Json(new
{
status = "0",
promptInfor = "上传失败"
});
}
}
#endregion
#region 2.图片转换
/// <summary>
/// 图片转换
/// </summary>
/// <param name="ObjFilePath">图片文件路径</param>
/// <param name="filename">图片文件名称</param>
/// <param name="filestring">图片文件Base64字符串</param>
/// <returns></returns>
private string[] ToImage(string ObjFilePath, string filename, string filestring)//文件到流的转换
{
string[] result = { "0", "0" };
if (string.IsNullOrEmpty(ObjFilePath))
{
//ObjFilePath = Server.MapPath(@"..\Upload\ShopPhoto\");//目标图片路径
string basePath = Server.MapPath(Request.ApplicationPath);
//上传路径
ObjFilePath = Path.Combine(basePath, "Upload\\ShopImg\\");
}
if (string.IsNullOrEmpty(filename))
{
filename = string.Format("{0:yyyyMMddHHmmssffff}", DateTime.Now) + ".jpg";
}
else
{
filename += ".jpg";
}
if (Directory.Exists(ObjFilePath) == false)
{
Directory.CreateDirectory(ObjFilePath);
}
byte[] photo;
#region
if (string.IsNullOrEmpty(filestring))
{
filestring = “";//这里要做空值验证使用时请写入一个base64字符
}
#endregion
photo = Convert.FromBase64String(filestring);
MemoryStream ms = new MemoryStream(photo);
Bitmap bmp = new Bitmap(ms);
bmp.Save(ObjFilePath + filename, System.Drawing.Imaging.ImageFormat.Jpeg);
ms.Close();
result[0] = "Success";
result[1] = filename;
return result;
}
#endregion一个原生input上传图片记录的更多相关文章
- 自定义input上传图片组件
自定义input上传图片组件,美化样式 前段时间因为项目需求,做过一个上传图片组件,这里分享下大致思路,希望对有需要的童鞋有所帮助~~~ 功能需求:1.上传图片限制大小.分辨率.类型 2.上传图片支持 ...
- pwnable.kr input解题记录
pwnable input解题记录 给了源码如下: #include "stdio.h" #include "unistd.h" #include " ...
- SQL 拼接多个字段的值&一个字段多条记录的拼接 [轉]
例如student表: studentID studentName studentScore 01 Alice 90 02 Bill 95 03 Cindy 100 一.拼接多个字段的值 select ...
- SQL 拼接多个字段的值&一个字段多条记录的拼接
如student表: studentID studentName studentScore 01 Alice 90 02 Bill 95 03 Cindy 100 一.拼接多个字段的值 select ...
- 运用Spring Aop，一个注解实现日志记录
运用Spring Aop,一个注解实现日志记录 1. 介绍 我们都知道Spring框架的两大特性分别是 IOC (控制反转)和 AOP (面向切面),这个是每一个Spring学习视频里面一开始都会提到 ...
- 现有有N个学生的数据记录，每个记录包括学号、姓名、三科成绩。 编写一个函数input,用来输入一个学生的数据记录。 编写一个函数print,打印一个学生的数据记录。 在主函数调用这两个函数，读取N条记录输入，再按要求输出。 N<100
#include <iostream> using namespace std; struct student {char num[100]; char name[100]; int ...
- 原生js上传图片遇到的坑（axios封装）
后台给我写了一个上传图片的接口,自己用form表单测试成功 接口可以正常跳转 测试的代码: <!doctype html> <html lang="en"> ...
- input上传图片并预览
首先说一下input 大家都知道上传文件,图片是通过input 的file进行上传的. 1. 首先是样式 大家都知道input在HTML的代码为 <input type="file&q ...
- vue中原生file上传图片
效果 视图层 <el-form-item class="file-box" label="微信分享图片url链接" prop="wx_share ...
随机推荐
- Xcode中的调试工具栏简介
如下图所示: 从左至右,第一个按钮用来隐藏调试区域. 第二个按钮向你展示断点是否被全局开启或禁用.如果它不是高亮蓝色,则没有断点会被触发. 第三个按钮暂停或继续程序的执行,你一般点击它继续运行到程序的 ...
- opencv读写视频，对感兴趣区域进行裁剪
作为小码农,本人最近想对一段视频的某个区域进行处理,因此要将该段视频区域裁剪出来,搜搜网上,发现没有痕迹,是故自己琢磨一下,左右借鉴,编了如下代码,目标得以实现,希望对你有用. #include &q ...
- UML之状态图
状态图,英文名曰-Statechart Diagram,她是系统的动态方面建模的五种图之一,一个状态图显示了一个状态机,在为对象的生命期建模中,她发挥着重要的作用,展示了单个对象内从状态到状态的控制流 ...
- JavaScript检测提交表单text合法
近日,一朋友开设了地方性质的论坛,让我帮他处理下Login.php(所谓的用户的登陆页面),但是登陆的时候,出现空字符或敏感字符,需要提交到服务端的Script处理,大大降低了效率,于是乎,就有了此代 ...
- SharePoint JS感悟-js脚本
最近有些迷恋js脚本,因为自己对Asp.net不够熟悉,又是Moss的一年级新生,不是对代码开发不感兴趣,面向对象自己也了解一些,代码也能大致读懂,个人觉得还是经验积累,作为代码开发人员,还是需要3- ...
- 收藏 - android
收藏 - android开发 2018-05-04 16:39:36 介绍:这篇文章是收藏系列的开山第一篇,主要收藏了跟android开发有关的一些内容,也算是内容汇总,后期会持续更新: 内容目录 1 ...
- RocketMQ源码 — 六、 RocketMQ高可用（1）
高可用究竟指的是什么?请参考:关于高可用的系统 RocketMQ做了以下的事情来保证系统的高可用 多master部署,防止单点故障 消息冗余(主从结构),防止消息丢失 故障恢复(本篇暂不讨论) 那么问 ...
- Form 和 Input 对象
更改表单的 action 属性 <html> <head> <script type="text/javascript"> function c ...
- 常见Map 及 ArrayList 是否有序总结
常见Map 及 ArrayList 是否有序总结 说明:此处的排序 是指: 1: 往集合中插入元素的顺序与遍历元素的顺序的关系: 2: 往对象中插入元素否会根据元素的大小排序 public cla ...
- 以太坊智能合约虚拟机(EVM)原理与实现
以太坊 EVM原理与实现 以太坊底层通过EVM模块支持合约的执行与调用,调用时根据合约地址获取到代码,生成环境后载入到EVM中运行.通常智能合约的开发流程是用solidlity编写逻辑代码,再通过编译 ...