JavaScript实现单图片上传并预览功能
本文实例为大家分享了JavaScript实现单图片上传并预览功能的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单图片上传并实现预览</title>
<style>
/*上传图片*/
.addPerson{
line-height: 190px;
}
.addPhoto{
width: 50px;
height: 50px;
line-height: 50px;
font-size: 40px;
text-align: center;
vertical-align: middle;
border: 1px dashed #e7eaec;
cursor: pointer;
display: inline-block;
}
.addinput{
display: none;
}
.addShow{
width: 200px;
height: 170px;
display: inline-block;
vertical-align: middle;
background: #f3f3f48f;
margin-left: 30px;
}
.addShow img{
width: 130px;
height: 130px;
margin: 20px auto;
display: block;
}
</style>
</head>
<body>
<div class=" addPerson">
<label class="col-sm-2 control-label">图片上传</label>
<div class="col-sm-9" style="display: inline-block;">
<div class="addPhoto">+</div>
<div class="addinput">
<input type="file" class="addFile" onchange="previewFile()" name="sPicture">
</div>
<div class="addShow" style="position: relative">
<img src="" class="addImg" alt="">
</div>
</div>
</div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(".addPhoto").click(function () {
$('[type=file]').click();
});
function previewFile() {
var preview = document.getElementsByClassName("addImg")[0];
var file = document.getElementsByClassName('addFile')[0].files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
// ajax请求如下
// 使用FormData将图片以文件的形式传到后台
// pictureFile后台接收的参数
// var formdata=new FormData();
// formdata.append("pictureFile",addFile);
// $.ajax({
// url:"",
// type:"post",
// dataType:"json",
// data:formdata,
// async: false, //四个false属性不能少
// cache: false,
// contentType: false,
// processData: false,
// success:function (data) {
// if(data.success){
// myAlert(data.msg);
// }
// },
// error:function () {
// if(data.success){
// myAlert(data.msg);
// }
// }
// })
}
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍js实现图片上传并预览功能，包括了js实现图片上传并预览功能的使用技巧和注意事项，需要的朋友参考一下 本文为大家分享了js实现图片上传并预览的具体代码，供大家参考，具体内容如下 思路：完成这个功能，首先需要美化上传图片的按钮，然后添加一个<img/>标签，在图片上传之后，用新图片的src替换原来<img/>标签中的src。 如下图所示，是原始的按钮样式： 美化步骤： （1）将上传图片
-
本文向大家介绍vue实现图片上传预览功能，包括了vue实现图片上传预览功能的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了vue实现图片上传预览的具体代码，供大家参考，具体内容如下 效果图 html结构 css样式 关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。 更多vue学习教程请阅读专题《vue实战教程》 以上就是本文的全部内容，希望对大家的学习有所
-
本文向大家介绍JS实现图片上传预览功能，包括了JS实现图片上传预览功能的使用技巧和注意事项，需要的朋友参考一下 废话不多说了，直接给大家贴js代码了，具体代码如下所示： 以上所述是小编给大家介绍的JS实现图片上传预览功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！
-
本文向大家介绍React+ajax+java实现上传图片并预览功能，包括了React+ajax+java实现上传图片并预览功能的使用技巧和注意事项，需要的朋友参考一下 之前有在网上找ajax上传图片的资料，大部分的人写得都是用jQuery，但是在这里用JQuery就大才小用了，所以我就自己写了，先上图。 由上图，首先点击上面的选择文件，在选择图片之后，将会自动上传图片到服务器，并且返回图片名字和图
-
本文向大家介绍JavaScript实现图片上传并预览并提交ajax，包括了JavaScript实现图片上传并预览并提交ajax的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JavaScript实现图片上传并预览并提交ajax的具体代码，供大家参考，具体内容如下 图片上传并预览 HTML css JS 上传图片提交ajax 如果想把图片信息通过ajax传给后端，则需要通过new Fo
-
本文向大家介绍Ajax 上传图片并预览的简单实现，包括了Ajax 上传图片并预览的简单实现的使用技巧和注意事项，需要的朋友参考一下 1. 直接上最简单的 一种 ajax 异步上传图片，并预览 html： servlet： 2. 这里会 用到一个 ajaxupload.js， 网上多得很。 以上就是小编为大家带来的Ajax 上传图片并预览的简单实现的全部内容了，希望对大家有所帮助，多多支持呐喊教程~