用js实现加载本地图片并显示并将图片信息上传至服务端

大体上分如下步骤：
1、建立input标签 通过定义type=‘file’来实现打开选择的文件

        var mousestart = cursorPosition(event);
        function cursorPosition(event){ //该函数需要在有效区域内mousemove事件中一直执行
            return{
                x  :  event.pageX,
                y  :  event.pageY,
            };
        }
        //accept="image/*"表示只选择图片文件
        var selEle = $("<input type='file' accept='image/*' οnchange='getImgSrc(this)' style='position:absolute;top:" +
                       mousestart.y + "px; left:" + mousestart.x + "px;display: none'/>");
        $("usage_area").append(selEle);
        $(selEle).click(); //一次点击即可加载图片文件

2、将本地文件路径转换为img的src类型

3、通过canvas本地显示图片
4、将图片进行base64编码上传至服务端 

  function getImgSrc(node) {
            var objUrl;
            var file = node.files[0];
            if (window.FileReader) {
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onloadend = function (e) {
                    objUrl = e.target.result;  //获取到的src可以使用的信息
                    var img = new Image();
                    img.onload = function () {//异步等待图片加载完成后再显示
                        var canvas = document.createElement("canvas");
                        $("ussge_area").append(canvas);
                        canvas.width = img.width;
                        canvas.height = img.height;
                        var ctx = canvas.getContex("2d");
                        ctx.drawImage(img, mousestart.x, mousestart.y, canvas.width, canvas.height); //显示图片
                        var dataUrl = canvas.toDataURL("image/jpg");//转成base64码格式
                        sendToSever(dataUrl);//发送
                        $(node).remove();
                        img = null;
                        ctx = null;
                    }
                    img.src = objUrl;//为img的src属性复制
                }
            }
        }

5、在从服务器都会图片的base64码信息后，进行简单的转换既可以显示图片

        function showPiture(dataURL){
            if(!dataURL) return;
            var img = new Image();
            img.onload = function(){
                var canvas = document.createElement("canvas");
                $("usage_area").append(canvas);
                canvas.width = img.width;
                canvas.height = img.height;
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img,_x,_y,canvas.width,canvas.height);
                ctx = null;
            }
            img.src = dataURL;
        }