js图片上传功能的实现 FileReader（）

想要实现的功能是，点击一个上传的按钮，然后选中上传图片，在页面上可以看到上传的图片

一开始是

点击这个+之后，上传的图片就出现在+上，将其覆盖

实现的思路如下：

html页面上的要有input type=file 来上传文件，由于上传按钮太丑了，所有将其隐藏起来，用add.png这个图片显示到页面上，accept是设置上传文件的类型，然后点击时调用getupload（）事件

<input type="file" id="upload_file2" style="display: none;" accept="image/jpeg, image/gif,image/png,image/jpg" />
<div id="cj2">
   <img id="img2" onclick="getupload('img2','upload_file2')" src="images/add.png">
</div>

getupload（）里面第一步执行上传，然后读取图片的内容，再返回即可。（看注释）

//图片上传、读取图片和在页面上显示
function getupload(ids,upids){
    //点击隐藏的上传按钮file 图片上传
    $("#"+upids).click();
    $("#"+upids).off("change");//防止多次触发change事件
    $("#"+upids).change(function(){
    	//获取读取的File对象
        var file = this.files[0] ? this.files[0] : null;
        if (!file) { return false; }
		var file_reader = new FileReader();//读取图片的操作 
        //FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件
		file_reader.readAsDataURL(file);//读取图片的内容生成的base64编码的图
        //读取完成后，执行该回调函数，它会返回读取的结果result		
        file_reader.onload = (function(){		
    		var image_url = this.result;  // 此时的图片已经存储到了result中	
    		$("#"+ids).attr('src', image_url);  // 创建图片标签 
		});
		
    });
}