一个原生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 ...
随机推荐
- View,ViewGroup的Touch事件的分发机制
原帖地址:http://blog.csdn.net/xiaanming/article/details/21696315 ViewGroup的事件分发机制 我们用手指去触摸Android手机屏幕,就会 ...
- 极光推送iOS SDK教程
iOS SDK 调试指南 iOS 调试思维导图 2 确认证书 请到"应用详情页面"确认证书可用性: 3 开发环境测试 在对 JPush iOS 开发环境进行测试前,请确保 3 个 ...
- 网站开发进阶(二十四)HTML颜色代码表
HTML颜色代码表 设置背景色:style='background-color:red' 设置字体颜色:style='color:red' 生活在于学习,知识在于积累.
- HDTV（1920x1080）码率和视频质量关系的研究 1 （前期准备）
Hans Hoffmann等人在论文<Studies on the Bit Rate Requirements for a HDTV Format With 1920 x 1080 pixel ...
- java 项目得到jar和classes路径
java 项目得到jar和classes路径 public static String getJarPath(Class clazz) { String path = clazz.getProtect ...
- 中文注释 MariaDB my.cnf 大型服务器配置模板
文件如下所示,请根据需要进行修改: 翻译日期: 2014年5月22日 翻译人员: 铁锚 # /usr/share/mysql/my-huge.cnf # MariaDB 配置文件 示例模板(huge, ...
- 面试之路（16）-归并排序详解（MergeSort）递归和非递归实现
归并排序的概念及定义 归并排序(Merge)是将两个(或两个以上)有序表合并成一个新的有序表,即把待排序序列分为若干个子序列,每个子序列是有序的.然后再把有序子序列合并为整体有序序列. 归并排序是建立 ...
- mybatis 开发环境搭建
不说废话直接上代码,首先看下我的目录机构: 红色部分,表明你所需的jar包,已经配置文件. 创建用户表,以及插入数据. create table books(id int (11) not null ...
- MySQL 表名区分大小写设置
1.关闭MySQL服务: 控制面板主页-管理工具-服务-MySQL服务 2.在服务器运行目录找到my.ini 或者my.cnf文件: 在[mysqld]下面增加一行添加 :lower_ ...
- 编程题：利用for循环打印 9*9 表?
利用for循环打印 9*9 表? 1*1=1 1*2=2 2*2=4 1*3=3 2*3=6 3*3=9 1*4=4 2*4=8 3*4=12 4*4=16 1*5=5 2*5=10 ...