一个原生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 ...
随机推荐
- 02_JNI中Java代码调用C代码，Android中使用log库打印日志，javah命令的使用，Android.mk文件的编写，交叉编译
1 编写以下案例(下面的三个按钮都调用了底层的C语言): 项目案例的代码结构如下: 2 编写DataProvider的代码: package com.example.ndkpassdata; ...
- 《java入门第一季》之面向对象面试题（形式参数的问题）
/* 形式参数的问题: 基本类型:形式参数的改变不影响实际参数 引用类型:形式参数的改变直接影响实际参数 */ //形式参数是基本类型 class Demo { public int sum(int ...
- 手持机设备公司(WINCE/ANDROID/LINUX)
1.深圳扬创科技有限公司网址: http://www.yctek.com/ 2.无锡盈达聚力科技有限公司 点击打开链接 3.上海鲲博通信技术有限公司(主要为用WINCE开发导航产品) 点击打开链接 4 ...
- ANDROID框架结构和介绍
下图是ANDROID4.4 版本包含的所有系统服务.本地服务和应用的框架图,组织为三层:应用层.系统服务层.本地进程和服务层.应用层通常通过服务提供的对外API接口(一个服务管理对象)与服务交互,系统 ...
- Linux - RAID和LVM
什么是 RAID 磁盘阵列全名是『 Redundant Arrays of Inexpensive Disks, RAID 』,英翻中的意思是:容错式廉价磁盘阵列. RAID 可以透过一个技术(软件或 ...
- Linux - 延伸正则表达式
RE 字符 意义与范例 + 意义:重复『一个或一个以上』的前一个 RE 字符 范例:搜寻 (god) (good) (goood)... 等等的字串. 那个 o+ 代表『一个以上的 o 』所以,底下的 ...
- HBase 运维分析
问题分析的主要手段 1.监控系统:首先用于判断系统各项指标是否正常,明确系统目前状况 2.服务端日志:查看例如region移动轨迹,发生了什么动作,服务端接受处理了哪些客户端请求. 3.gc日志:gc ...
- Libevent库学习笔记
Libevent是一个事件触发的网络库,适用于windows.linux.bsd等多种平台,Libevent在底层select.pool.kqueue和epoll等机制基础上,封装出一致的事件接口.可 ...
- LeetCode（40）-Merge Sorted Array
听到初爱有感 开头啰嗦两句,刚在做算法题目的时候,听到了杨宗纬的<初爱>,突然有了一种本科时候的感觉,想想自己现在研二了,青春喂了狗,我果断喝了一罐啤酒,循环这首歌到吐-.. 题目: Gi ...
- 容器（list集合）
--为什么使用集合而不使用数组?why ·集合和数组相似点:都可以存储多个对象,对外作为一个整体存在: ··数组的缺点:1.长度必须在初始化时指定,且固定不变: 2.数组采用连续存储空间,删除和添加元 ...