这篇文章给大家分享的是有关使用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进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。