html5 上传图片实践

来源：互联网发布：种植牙植骨知乎编辑：程序博客网时间：2024/05/08 08:08

使用场景：移动端 HTML5 页面，意见反馈系统中需要开发一个图片上传功能，使用input file 后页面太过丑陋，使用替换样式，将 input file 设置成display : none，上传功能又失效，经过一番搜索，尝试将 input file 透明度设置成完全透明，并将其罗列在替换dom元素上方，当onchange 方法触发时，在这其中读取文件构造出一个表单元素上传文件

看代码

<!DOCTYPE HTML>
<html>
<head>
<title>上传图片</title>
<meta charset="utf-8">
<script src="jquery-2.0.0.min.js"></script>
</head>
<body>
<input type="file" name="file" id="upload" accept="image/*" style="display:none" onchange="javascript:setImagePreview();">
<input type="button" value="submit" id='save' style="width:200px;height:200px;"/>
</body>
<script>

var upload = document.querySelector('#upload');//$("#upload"),
save = document.querySelector('#save');//$("#save");
save.addEventListener('click',function(){
upload.click();
});
function setImagePreview(){
var uploadData = document.getElementById('upload');
var picture = uploadData.value;
var files = uploadData.files;

var formData = new FormData();//构造表单提交的图片数据
for(var i = 0 ; i < files.length; i++){
formData.append(files[i].name,files[i]);
}
}
</script>
</html>

0 0