文档章节

记一次简单且完整的图片上传

o
 osc_mervd488
发布于 2018/04/24 12:05
字数 671
阅读 0
收藏 0

精选30+云产品,助力企业轻松上云!>>>

终于完成一次完整图片上传功能!

直接上代码!!

样式

<style>
      li {
        list-style: none;
        cursor: pointer;
      }
      #doImg {
        width: 100px;
        height: 100px;
        float: left;
        display: none;
      }
      .spanColor {
        display: block;
        margin-top: 3px;
        text-align: center;
        height: 18px;
      }
      #addButton {
        width: 100px;
        height: 100px;
        color: #ddd;
        border: 2px solid #ddd;
        text-align: center;
    }
    </style>

 

内容代码如下:

<li id="Identification_img">
      <!-- 图片框 -->
        <div id="doImg">
            <img id="imgPlace"  src=''  style="display: block;margin: 0px auto;" height="100px"/>
                <span class="span spanColor" style="display: block;margin-top: 3px;text-align: center;height: 18px;">
                    <input type="file" name="IdentificationImg" id="replace_img" style="display: none;"  onchange="discern_img.photoUpload(this)" accept="image/png,image/jpeg"  class="basic_prop">
                    <label for="replace_img">
                        <span title="替换" class="fa fa-image" style="margin-right: 10px;color: blue;cursor: pointer;">替换</span>
                    </label>
                    <a title="删除" href="javascript:void(0);" class="fa fa-times" onclick="discern_img.deleteImg()">删除
                    </a>
                </span>
        </div>
        <!-- 添加按钮 -->
        <div id="addButton">
            <input type="file" name="IdentificationImg" id="add_img" style="display: none;" onchange="discern_img.photoUpload(this)" class="basic_prop">
            <label for="add_img" style="margin-bottom: 0">
                <span class="fa fa-plus imgAdd" style="line-height: 98px;"></span>
                <span style="line-height: normal;">图片上传</span>
            </label>
        </div>
        <div id="waitAlert" style="float:left;margin-top:40px;"></div>
    </li>

最后是脚本代码:

<script src="./js/jquery-2.1.4.min.js"></script>
  <script>
    var discern_img = {
    photoUpload: function (file) {
            // Get a reference to the fileList
            var files = !!file.files ? file.files : [];
            // If no files were selected, or no FileReader support, return
            if(!files.length || !window.FileReader) return;
            // 不是图片格式或jpg/png
            if(files[0].type.split("/")[0] !== "image" || files[0].type.split("/")[1] !== "jpeg" && files[0].type.split("/")[1] !== "png") {
                alert("请选择正确的图片格式!");
                return;
            }
            img_type = files[0].type; // 获取图片格式
            var name=files[0].name;//获取图片名称
            // Create a new instance of the FileReader
            var reader = new FileReader(files[0]);
            var img_attr = $("#imgPlace"); // 为了改图片属性

            // 加载图片
            reader.onload = function () {
                var result=this.result;
                $('#submit-btn').attr("disabled","disabled");
                $("#waitAlert").html('<img src="/img/loading1.gif" align="absmiddle">');

                $("#doImg").css({'display':'block'});
                $("#addButton").css({'display':'none'});
                img_attr.attr("src", result);
            };

            // 因为这里图片太大会被卡一下,整个页面会不可操作,页面整体虚化
            if(files[0].size > 1024 * 1024) {
                $("body").css("opacity", 0.5);
            }

            // Read the local file as a DataURL
            reader.readAsDataURL(files[0]);
            // When loaded, set image data as background of div
            // 加载图片完成
            reader.onloadend = function() {
                var img_attr = $("#imgPlace");
                var width = img_attr[0].naturalWidth,height = img_attr[0].naturalHeight;
                var cvs = document.createElement('canvas');
                var ctx = cvs.getContext("2d"); // 新建画布
                cvs.width = width; cvs.height = height;
                ctx.drawImage(img_attr[0],0,0,width,height,0,0,width,height);
                var img_type = files[0].type;
                var quality=0.93;
                var size=files[0].size;
                if(1*1024*1024<size && size<2*1024*1024){
                    quality=0.7;
                }else if(2*1024*1024<=size && size<4*1024*1024){
                    quality=0.5;
                }else if(size>=4*1024*1024){
                    quality=1;
                }
                // 导出图片为base64格数
                result_img = cvs.toDataURL(img_type, quality);
                var formData = new FormData();
                formData.append("file",result_img);
                $.ajax({
                    type: "post",
                    url: '接口路径',
                    data: formData,//要传给后台的图片数据
                    contentType: false,
                    processData: false,
                    dataType: "json",
                    success: function (data) {//上传成功后的回调函数
                        var url=data.data.url;
                        img_attr.attr("src",url);
                        $("#waitAlert").html('<img src="/img/file_upload_ok.gif" align="absmiddle">');
                        $('#submit-btn').removeAttr("disabled");
                    },
                    error:function(e){
                        alert('网络错误');
                        $("#waitAlert").html('<img src="/img/file_upload_ok.gif" align="absmiddle">');
                        $('#submit-btn').removeAttr("disabled");
                    }
                });
                // 页面还原
                if(files[0].size > 1024 * 1024) {
                    $("body").css("opacity", 1);
                }
            };
        },
        // 删除功能
        deleteImg: function () {
            $("#doImg").css({'display':'none'});
            $("#doImg").find('img').attr('src','');
            $("#addButton").css({'display':'block'});
            $("#waitAlert").html('');
        }

      }
  </script>

图片上传了解一下?

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

平时使用的Lszrz到底是什么协议?说说Xmodem/Ymodem/Zmodem

XMODEM, YMODEM, and ZMODEM 由于平时使用rz/sz较多,r/s好理解,一个send一个receive。但是由不太清楚z是什么意思,故有此文。 sx/rx, sb/rb (b=batch)和sz/rz分别实现了xmodem,ymodem和z...

独钓渔
14分钟前
9
0
真正的强智能时代已经到来。道翰天琼认知智能机器人平台API大脑。

最近,我常说人工智能的寒冬快要来了,提醒业界要做好思想准备,但同时我也说:冬天来了,春天就不会远了…… 2019年6月我写了篇文章《深度学习的问题究竟在哪?》,说到深度学习的一个主要问...

jackli2020
23分钟前
24
0
什么是控制型人格,控制型人格的筛查测试

一、 什么是控制性人格 拥有控制型人格的人,他们会尽力的隐藏自己的意图,但是又会使用很微妙的方式来利用周围人的弱点,进而占取便宜时,使他们能够得到自己想要的东西。这类人的控制欲非常...

蛤蟆丸子
31分钟前
14
0
【Spring】Spring AOP 代理对象生成逻辑源码分析

1. spring aop案例(POJO注入) 1.0 被代理接口 TargetInterface /** * 被代理的接口 * @author Yang ZhiWei */public interface TargetInterface { void show(); String show......

ZeroneLove
40分钟前
36
0
聊聊dubbo-go的gracefulShutdownFilter

序 本文主要研究一下dubbo-go的gracefulShutdownFilter gracefulShutdownFilter dubbo-go-v1.4.2/filter/filter_impl/graceful_shutdown_filter.go type gracefulShutdownFilter struct {......

go4it
41分钟前
30
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部