前端js图片上传,原理用input type="file"获取图片然后把图片转换成base64编码传到后台.

图片上传

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <title></title>

    </head>

    <body>
        <!--header-->
        <div class="header">
            <i class="header-calendar" id="return"></i>
            <h3><span>个人资料</span></h3>
        </div>
        <form>
            <ul class="tab-nav">                
            </ul>
            <div class="form-btn">
                <input id="files" type="file" onchange="previewImage(this, 'prvid')" >
                            <div id="prvid" class="prvid"></div>    
            </div>
        </form>       
        <script>
var user_img; //图片

            //把图片转成base64
            function previewImage(file, prvid) {
                /* file：file控件
                 * prvid: 图片预览容器
                 */
                var tip = "Expect jpg or png or gif!"; // 设定提示信息
                var filters = {
                    "jpeg": "/9j/4",
                    "gif": "R0lGOD",
                    "png": "iVBORw"
                }
                var prvbox = document.getElementById(prvid);
                prvbox.innerHTML = "";
                if(window.FileReader) { // html5方案
                    for(var i = 0, f; f = file.files[i]; i++) {
                        var fr = new FileReader();
                        fr.onload = function(e) {
                            var src = e.target.result;
                            if(!validateImg(src)) {
                                //alert(tip);
                                alert('图片格式错误');
                            } else {
                                alert(src);
                                showPrvImg(src);
                            }
                        }
                        fr.readAsDataURL(f);
                    }
                } else { // 降级处理

                    if(!/\.jpg$|\.png$|\.gif$/i.test(file.value)) {
                        //alert(tip);
                        mui.toast('图片格式错误');
                    } else {
                        showPrvImg(file.value);
                    }
                }

                function validateImg(data) {
                    var pos = data.indexOf(",") + 1;
                    for(var e in filters) {
                        if(data.indexOf(filters[e]) === pos) {
                            return e;
                        }
                    }
                    return null;
                }
                //图片
                function showPrvImg(src) {
                    var img = document.createElement("img");
                    img.src = src;
                    prvbox.appendChild(img);
                    user_img = src //向后台传输的图片
                }
            }

           </script>

    </body>

</html>

前端js图片上传的更多相关文章

  1. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  2. JS图片上传预览插件制作（兼容到IE6）

    其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...

  3. 微信JS图片上传与下载功能--微信JS系列文章（三）

    概述 在前面的文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的图片上传功能进行描述,供大家参考. 图片上传 $(function(){ v ...

  4. js图片上传 的方法

    先规划出框架 <div id="AQA" style="width:300px; height:200px; background-color:aquamarine ...

  5. js 图片上传

    可能很多不熟悉的图片上传的同学会觉得有点懵,其实做过一次你就会发现特别的简单. 只是一个formData格式的表单提交,把地址写到 action = "" 里面就可以了,当然你可以 ...

  6. 一个node.js图片上传显示小应用

    文件结构如下: 实现的功能有: 可以通过浏览器使用. 当请求http://domain/start时,可以看到一个欢迎页面,页面上有一个文件上传的表单. 用户可以选择一个图片并提交表单,随后文件将被上 ...

  7. 前端实现图片上传预览并转换base64

    前端实现文件的上传,就必须用到input标签,type属性为file. 在vue项目中通ref操作dom.input有一个属性accept,是必须要搭配type=file使用. multiple可以上 ...

  8. node.js图片上传

    1.node-formidable 对文件上传提供帮助的组件 2.app.js var formidable = require('formidable'); var http = require( ...

  9. 前端js webuploader上传(导入)excel文件

    项目开发中用到导入(上传)Excel文件 我使用的是百度的webuploader: 1:下载:http://fex.baidu.com/webuploader/(官方下载/示例) 2:使用Web Up ...

随机推荐

  1. spark教程(11)-sparkSQL 数据抽象

    数据抽象 sparkSQL 的数据抽象是 DataFrame,df 相当于表格,它的每一行是一条信息,形成了一个 Row Row 它是 sparkSQL 的一个抽象,用于表示一行数据,从表现形式上看, ...

  2. 基于FCN的图像语义分割

    语义图像分割的目标在于标记图片中每一个像素,并将每一个像素与其表示的类别对应起来.因为会预测图像中的每一个像素,所以一般将这样的任务称为密集预测.(相对地,实例分割模型是另一种不同的模型,该模型可以区 ...

  3. 命名空间System.IO

    基本介绍:System.IO 命名空间提供读写文件和数据流的类型.基本文件和目录支持的类型. 原文:http://blog.sina.com.cn/s/blog_48a45b950100erhz.ht ...

  4. EJS学习（二）之语法规则上

    标签含义 <% %> :'脚本' 标签,用于流程控制,无输出即直接使用JavaScript语言. <%= %>:转义输出数据到模板(输出是转义 HTML 标签)即在后端定义的变 ...

  5. vue高亮一级、二级导航

    使用vue开发过程中有的项目会存在多级导航的情况,如下图,这种就存在了两层,那么该如何高亮一级导航,又该如何高亮二级导航这就是今天我要记录的内容. 1.高亮一级导航很简单,代码如下: // 点击一级导 ...

  6. python 有用的库

    1.Faker pip3 install faker官网: https://faker.readthedocs.io/en/master/providers.htmlgithub: https://g ...

  7. Linux配置iSCSI存储

    1.基础知识 1.1 存储相关     直接存储(DAS):例如本机上的磁盘,就是属于直接存储设备.     存储区域网络(SAN):来自网络内的其他存储设备提供的磁盘.Iscsi就是属于该方式.   ...

  8. springmvc框架中的核心对象DispatcherServlet

    SpringMVC是Spring中的模块,它实现了mvc设计模式,首先用户发起请求,请求到达SpringMVC的前端控制器(DispatcherServlet),前端控制器根据用户的url请求处理器映 ...

  9. MVC 事物

    前一阵学习mvc但是对于关联表的数据操作总是分裂开来写,这样有很大的侥幸,比如嵌套了3个 if(){ if(){ if(){ } } } 如果前两个都是true那么最后一个是false了,这样是不想看 ...

  10. cmd 创建并写入文件

    一.建立空文件的几种方法1.cd.>a.txtcd.表示改变当前目录为当前目录,即等于没改变:而且此命令不会有输出.>表示把命令输出写入到文件.后面跟着a.txt,就表示写入到a.txt. ...