wqewe
阿新 • • 發佈:2019-01-25
jquer otto text aci rev chang ctype NPU RoCE
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .avatar_con { height: 100px; width: 100px; position: relative; } .avatar_con iframe { display: none } .avatar_con img { height: 100%; width: 100%; border: 0; overflow: hidden; max-height: 100px; } .avatar_con #previewImg { border-radius: 50%; border: 1px solid #dddddd; padding: 3px; height: 96px; width: 96px; } .avatar_con #avatarImg { top: 0; left: 0; right: 0; bottom: 0; opacity: 0; position: absolute; z-index: 102; } .avatar-avatar_con .text { position: absolute; left: 0; bottom: 0; text-align: center; } </style> <body> <h1>jQuery Ajax上傳文件</h1> <div class="avatar_con"> <label for="avatar"> <img id="previewImg" src="/static/avatar/1.jpg"> <div class="text">點擊圖片更換</div> </label> <input id="avatarImg" name="avatar" type="file"/> </div> <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> <script type="text/javascript"> $(function () { bindChangeAvatar(); }); // ajax上傳文件 function bindChangeAvatar() { $(‘#avatarImg‘).change(function () { /* // 頭像預覽 方法1: // 獲取用戶選中的文件對象 var file_obj = $(this)[0].files[0]; // 獲取文件對象的路徑 var reader = new FileReader(); reader.readAsDataURL(file_obj); // 修改img的src屬性 ,src=文件對象的路徑 reader.onload = function () { $("#previewImg").attr("src", reader.result) }; */ var formdata=new FormData(); formdata.append("avatar",$("#avatarImg")[0].files[0]); formdata.append("csrfmiddlewaretoken","{{ csrf_token }}"); //csrf $.ajax({ url:"", //不填寫就是當前 /upload/ type:"post", contentType:false, // processData:false, // data:formdata, success:function(arg){ arg = JSON.parse(arg); if (arg.status) { console.log(arg.data); // 頭像預覽 方法2: $(‘#previewImg‘).attr(‘src‘, ‘/‘ + arg.data); } } }) }) } </script> </body> </html>
wqewe