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上传图片记录的更多相关文章

  1. 自定义input上传图片组件

    自定义input上传图片组件,美化样式 前段时间因为项目需求,做过一个上传图片组件,这里分享下大致思路,希望对有需要的童鞋有所帮助~~~ 功能需求:1.上传图片限制大小.分辨率.类型 2.上传图片支持 ...

  2. pwnable.kr input解题记录

    pwnable input解题记录 给了源码如下: #include "stdio.h" #include "unistd.h" #include " ...

  3. SQL 拼接多个字段的值&一个字段多条记录的拼接 [轉]

    例如student表: studentID studentName studentScore 01 Alice 90 02 Bill 95 03 Cindy 100 一.拼接多个字段的值 select ...

  4. SQL 拼接多个字段的值&一个字段多条记录的拼接

    如student表: studentID studentName studentScore 01 Alice 90 02 Bill 95 03 Cindy 100 一.拼接多个字段的值 select ...

  5. 运用Spring Aop,一个注解实现日志记录

    运用Spring Aop,一个注解实现日志记录 1. 介绍 我们都知道Spring框架的两大特性分别是 IOC (控制反转)和 AOP (面向切面),这个是每一个Spring学习视频里面一开始都会提到 ...

  6. 现有有N个学生的数据记录,每个记录包括学号、姓名、三科成绩。 编写一个函数input,用来输入一个学生的数据记录。 编写一个函数print,打印一个学生的数据记录。 在主函数调用这两个函数,读取N条记录输入,再按要求输出。 N<100

    #include <iostream> using namespace std; struct student {char num[100];  char name[100];  int ...

  7. 原生js上传图片遇到的坑(axios封装)

    后台给我写了一个上传图片的接口,自己用form表单测试成功 接口可以正常跳转 测试的代码: <!doctype html> <html lang="en"> ...

  8. input上传图片并预览

    首先说一下input 大家都知道上传文件,图片是通过input 的file进行上传的. 1. 首先是样式 大家都知道input在HTML的代码为 <input type="file&q ...

  9. vue中原生file上传图片

    效果 视图层 <el-form-item class="file-box" label="微信分享图片url链接" prop="wx_share ...

随机推荐

  1. 《java入门第一季》之Arrays类前传(排序问题)

    一:冒泡排序 /* * 数组排序之冒泡排序: * 相邻元素两两比较,大的往后放,第一次完毕,最大值出现在了最大索引处 * * 引申: * 利用冒泡排序法,可以获取一个数组的最大值(先冒泡排序,取最后一 ...

  2. Leetcode_94_Binary Tree Inorder Traversal

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/42876657 Given a binary tree, r ...

  3. platform_driver_probe与platform_driver_register的区别

    Platform Device and Drivers  从<linux/platform_device.h>我们可以了解Platform bus上面的驱动模型接口:platform_de ...

  4. Erlang cowboy routing 路由

    Erlang cowboy routing 路由 本文译自: http://ninenines.eu/docs/en/cowboy/1.0/guide/routing/ Routing 默认情况下,C ...

  5. gtk+2.0中GtkObject结构中没有klass成员的解决办法

    gtk+2.0中一些较老的程序中会有如下的代码: #define EVENT_METHOD(obj, method) GTK_WIDGET_CLASS(GTK_OBJECT(obj)->klas ...

  6. RGB颜色转换算法C语言实现

    typedef unsigned short     TUINT16; #define RGB565(R, G, B) \ (((TUINT16) ((R) >> 3)) << ...

  7. ios中XMPP的搭建

    1 首先下载xmppframework这个框架 https://github.com/robbiehanson/XMPPFramework   2 环境配置 参考:https://github.com ...

  8. java队列

    "队列"这个单词是英国人说的"排".在英国"排队"的意思就是站到一排当中去.计算机科学中,队列是一种数据结构,有点类似栈,只是在队列中第一个 ...

  9. C#中的var和dynamic

    在理解var和dynamic关键字之前,让我们先了解一下编程语言的类别. C#中有两类编程语言: 静态类型语言类别 动态语言类别 静态类型语言 静态类型语言也被称为强类型语言.所谓强类型语言,通俗的讲 ...

  10. orderBy新写法

    通常,我们处理排序规则的处理方法是在sql 语句中order by create_time desc, 但是这时我们需要从控制器中一步步找到该方法,操作多. 我们试着将业务逻辑拆分到控制器 中, 把排 ...