FileReader图片预览上传

本文主要是介绍FileReader图片预览上传，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

引用：

<script src="js/jquery.min.js"></script>

html:

<div style="width:200px;height:200px;"><label for="ceshi" style="display:block;"><img style="width:200px;height:200px;" id="image" src=""/><input id="ceshi" type="file" onchange="selectImage(this);" hidden/></label>
</div>

js:

var image = '';function selectImage(file){if(!file.files || !file.files[0]){return;}var reader = new FileReader();reader.onload = function(evt){document.getElementById('image').src = evt.target.result;image = evt.target.result;}reader.readAsDataURL(file.files[0]);}function uploadImage(){$.ajax({type:'POST',url: 'ajax/uploadimage',  //图片上传地址data: {image: image},async: true,dataType: 'json',success: function(data){if(data.success){alert('上传成功');}else{alert('上传失败');}},error: function(err){alert('网络故障');}});
}

结果：

这篇关于FileReader图片预览上传的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---