这篇文章给大家分享的是有关使用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" > <div class="addPhoto">+</div> <div class="addinput"> <input type="file" class="addFile" onchange="previewFile()" name="sPicture"> </div> <div class="addShow" > <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>感谢各位的阅读！关于“使用JavaScript实现单图片上传并预览功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
