早睡早起,方能养生
Sleep early rise early, way to keep healthy

一次点击上传图片思路

super
2018-05-08 17:32
views 4454

点击图片,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示例



分享
1 条讨论
top