上传图片

<input id="input_show_upload" type="button" onClick="show_upload();" value="我要上传头像"><br>

    <div id="div_upload" style="display:none">
        请选取头像文件：<input id="input_image_file" type="file" onChange="upload_image_preview();"><br>
        头像预览：<span id="span_image_preview"></span>
    </div>

 下面是js函数<script type="text/javascript">

    function show_upload(){
        document.getElementById("div_upload").style.display = "block"; 			// 显示上传头像部分
        document.getElementById("input_show_upload").value = "关闭上传头像";	// 更改按钮文字
        document.getElementById("input_show_upload").onclick = hide_upload; 	// 绑定onclick事件
    }
    
    function hide_upload(){
        document.getElementById("div_upload").style.display = "none";		 	// 隐藏上传头像部分
        document.getElementById("input_show_upload").value = "我要上传头像"; 	// 更改按钮文字
        document.getElementById("input_show_upload").onclick = show_upload; 	// 绑定onclick事件
    }
    
    function upload_image_preview(){
        var img_path = document.getElementById("input_image_file").value;
        // 通过后缀名判断，如果选择的文件不是图片那么终止执行
        if(!img_path.match(/\.(jpg|gif|tif|png)$/i))return;
        // 载入图片
        document.getElementById("span_image_preview").innerHTML = "<img height=\"50px\" src=\"" + img_path + "\">";
    }
	</script>