JavaScript实现单图片上传并预览功能

时间：2021-05-26

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章