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. 一个优化极点的ViewHolder

    代码中有注释: 使用方法: 1.可以在listview,gridview,stageView直接继承LazyAdapter使用 2.下面有Demo 代码 ViewHolder代码: import an ...

  2. 为神马精确Sprite的碰撞形状不通过简单的放大Sprite的尺寸来解决?

    原因是SoftBodyDrawNode的绘制代码中已经没有完整的,一体化的(incorporate)缩放,旋转或者甚至是精灵的位置(scale,rotation,or even the sprite' ...

  3. iOS实现时间线列表效果(例如订单详情页面的效果)

    之前看到美团的订单详情页面很有特色,于是决定模仿一下这个效果. 其实就是简单的 TableView 技巧,下面我们就来一步一步实现它. 设计 TableViewCell 原型 子类化一个新的 UITa ...

  4. 配置安装nginx

    1.解决依赖关系和优化所需的组件 编译安装nginx需要事先需要安装开发包组"Development Tools" .同时,安装pcre-devel包,用yum安装即可 安装TCM ...

  5. HADOOP中的CRC数据校验文件

    Hadoop系统为了保证数据的一致性,会对文件生成相应的校验文件(.crc文件),并在读写的时候进行校验,确保数据的准确性.在本地find -name *.crc -print 看 比如我们遇到的这个 ...

  6. Linux常用命令(第二版) --压缩解压缩命令

    压缩解压缩命令: ----------.gz---------- 1.压缩 gzip[GNU zip]: /bin/gzip 格式: gzip 选项 [文件] #压缩文件,压缩后扩展名为.gz,Lin ...

  7. spring的maven配置文件

    spring各个包的maven配置文件 <!--spring-context--> <dependency> <groupId>org.springframewor ...

  8. dex分包方案

    当一个app的功能越来越复杂,代码量越来越多,也许有一天便会突然遇到下列现象: 1. 生成的apk在2.3以前的机器无法安装,提示INSTALL_FAILED_DEXOPT 2. 方法数量过多,编译时 ...

  9. iOS多线程篇:NSThread简单介绍和使用

    一.什么是NSThread NSThread是基于线程使用,轻量级的多线程编程方法(相对GCD和NSOperation),一个NSThread对象代表一个线程, 需要手动管理线程的生命周期,处理线程同 ...

  10. obj-c在Xcode之外如何使用@import关键字

    在Xcode中@import可以很方便的代替#import的功能,具体区别和便利请自行google之. 这里简单介绍下在Xcode之外如何使用@import.直接以 @import Foundatio ...