一次点击上传图片思路

点击图片，button等等直接触发上传操作：

思路：

以以下Html代码为例，点击图片（default.png） 区域时，触发 js upload() 方法

由 upload() 触发页面隐藏form中的input file

选择图片后，触发 input file 的 onchange 事件来完成表单的提交

Html

<div class="photo-box">
    <p>头像</p>
    <div class="head-img" onclick="upload();">
    	<img src="default.png"/>
    </div>
</div>
<form id="uploadForm" action="submit.php" method="post" enctype="multipart/form-data" style="display:none">
    <input type="file" name="img" id="uploadImg" onchange="submitImg();">
</form>

Js

<script>
    function upload(){
        document.getElementById('uploadImg').click();
    }
    function submitImg(){
        document.getElementById('uploadForm').submit();
        // 如需要图片的路径，此处使用ajax formdata提交
    }
</script>

FormData提交

function submitImg(){
	//创建FormData对象
    var formObj = $("#uploadForm")[0];
    //var formObj = document.getElementById("uploadForm"); // 同上
    var formData = new FormData(formObj); // 实例化FormData对象，传入表单对象，注意FormData大小写
    
    //ajax发送表单数据到后台
    $.ajax({
        url: "xx.php",
        type: 'POST',
        data: formData,
        dataType: "JSON",
        async: false,
        cache: false,                    //不缓存
        processData: false,              //jquery不要去处理发送的数据
        contentType: false,              //jquery不要去设置Content-type请求头
        success: function(data) {
            // 后端处理 （上传图片，更新图片信息，返回图片路径）后，替换图片路径
        }
    })
}

FormData示例