一次点击上传图片思路
super
2018-05-08 17:32
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) {
// 后端处理 (上传图片,更新图片信息,返回图片路径)后,替换图片路径
}
})
}
#1