<!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> <label>图片上传</label> <div> <div>+</div> <div> <input type="file" onchange="previewFile()"> </div> <div> <img src="" 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实现单图片上传并预览功能
内容版权声明：除非注明，否则皆为本站原创文章。
转载注明出处：http://www.heiqu.com/676384fcf344159639e42198d48c739a.html