Remember a simple and complete image upload

Finally completed a complete picture upload function!

Go directly to the code! !

style

<style>
      at the {
        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>

 

The content code is as follows:

<li id="Identification_img">
      <!-- Picture frame-->
        <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>
        <!-- Add button -->
        <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;">Image upload</span>
            </label>
        </div>
        <div id="waitAlert" style="float:left;margin-top:40px;"></div>
    </li>

And finally the script code:

<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( "Please select the correct image format!" );
                 return ;
            }
            img_type = files[0].type; // Get the image format 
            var name=files[0].name; // Get the image name 
            // Create a new instance of the FileReader 
            var reader = new FileReader(files[0 ]);
             var img_attr = $("#imgPlace"); // In order to change the image attributes

            // Load image 
            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);
            };

            // Because the picture here is too large, it will be stuck, the entire page will be inoperable, and the entire page will be blurred 
            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;
                }
                // Export image as base64 grid 
                result_img = cvs.toDataURL(img_type, quality);
                 var formData = new FormData();
                formData.append("file",result_img);
                $.ajax({
                    type: "post",
                    url: 'interface path' ,
                    data: formData, // The image data to be passed to the background 
                    contentType: false ,
                    processData: false,
                    dataType: "json",
                    success: function (data) { // Callback function after successful upload 
                        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( 'Network error' );
                        $("#waitAlert").html('<img src="/img/file_upload_ok.gif" align="absmiddle">');
                        $('#submit-btn').removeAttr("disabled");
                    }
                });
                // Page restore 
                if (files[0].size > 1024 * 1024 ) {
                    $("body").css("opacity", 1);
                }
            };
        },
        // delete function 
        deleteImg: function () {
            $("#doImg").css({'display':'none'});
            $("#doImg").find('img').attr('src','');
            $("#addButton").css({'display':'block'});
            $("#waitAlert").html('');
        }

      }
  </script>

Image upload to understand?