程序开发 ajax上传图片 form和base64上传 后端上传图片接口测试
用于后端测试,前端ajax上传图片。 JavaScript通过 new FileReader() 获取图片base64 无组件上传图片 Vue input上传图片 小程序选择、预览、删除、上传图片 Demo: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片上传测试</title> <style> section { width: 1000px; margin: 50px auto; box-shadow: 0 0 5px 5px #eee; padding: 20px 20px 40px; } #api { width: 300px; padding: 10px } </style> </head> <body> <section> <p>输入测试接口:</p> <input type="text" placeholder="https://huangliangbo.com" name="api" id="api"> <br> <br> <p>form表单提交:</p> <input type="file" name="file" id="img"> <br> <br> <p>base64:</p> <input type="file" name="base64" id="base64"> <p>输出:</p> <div id="res"></div> </section> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> $('#img').change(function(e) { let file = e.target.files[0]; let param = new FormData(); //创建form对象 param.append('file', file, file.name); //通过append向form对象添加数据 // console.log(file) $.ajax({ url: $('#api').val(), type: 'POST', data: param, contentType: false, processData: false, }) .done(function(res) { console.log("form-----success"); console.log('form:', res) $('#res').text(JSON.stringify(res)) }) .fail(function() { console.log("form----error"); }) .always(function() { console.log("form----complete"); }); }); $('#base64').change(function(e) { let file = e.target.files[0]; // 获取图片信息 可以从中获取图片大小 let reader = new FileReader(); reader.readAsDataURL(file); // 读出 base64 reader.onloadend = function() { // 图片的 base64 格式, 可以直接当成 img 的 src 属性值 let dataURL = reader.result; // dataURL 为图片 base64 码 // 下面逻辑处理 $.ajax({ url: $('#api').val(), type: 'POST', data: { img: dataURL // img 为后端接收参数 }, }) .done(function(res) { console.log("base64 -- success"); console.log('base64:', res) $('#res').text(JSON.stringify(res)) }) .fail(function() { console.log("base64---error"); }) .always(function() { console.log("base64----complete"); }); }; }); </script> </body> </html> github: https://github.com/hlbj105/upload-image coding: https://dev.tencent.com/u/hlbj105/p/upload-image/git Demo: https://hlbj105.github.io/upload-image/ https://hlbj105.coding.me/upload-image/
最新评论
北海の猫
博主您好!技术猫博客最近搬家了,前来通知小主更新一下域名及名称(顺便再来踢个门)
名称:Kitten's Blog
地址:http://blog.skillcat.cn
简介:设计成就梦想,细节成就品质。
图标:http://cn.gravatar.com/avatar/59cb46c14fe1df1292ca09a761b7cbe3
评:留言崔先森
效果真的一般般~
评:Linux QQ全新回归崔先森
deepin.用得挺爽?
评:在荣耀笔记本(Linux版)中拥有深度应用商店,几步就搞定!Jason
[img] /wp-content/uploads/comments/2162/20191017093509309002.jpg[/img] 测试图片上传
评:Vultr怎么解除信用卡绑定?挖站否
评论可以上传图片了?
评:Vultr怎么解除信用卡绑定?delong
中文域名好记
评:留言崔先森
哟,这次主题很牛逼啊~
评:留言saber
和qi一样的想法…
评:jQuery tab选项卡中的瀑布流挖站否
又换域名了?
评:jQuery tab选项卡中的瀑布流xiaomo
懂就是好,会玩
评:宝塔面板使用WebHook 更新nuxt网站