base64图片转文件用ajax上传到服务器附源码下载
日期：2018-09-10
来源：程序思维浏览：2459次
今天在做一个功能用base64图片转文件用ajax上传到服务器，网上找了好多，代码不是很完整，今天教给大家如何用base64图片转文件用ajax上传到服务器，完整教程版，附代码下载。
upload.html文件代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>base64转文件图片上传</title>
</head>
<body>
<img id="img" src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMqaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjUtYzAxNCA3OS4xNTE0ODEsIDIwMTMvMDMvMTMtMTI6MDk6MTUgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDREOTY0QUY5M0ZEMTFFNUI4NkZFMjI3RTZDRjE1NEMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDREOTY0QjA5M0ZEMTFFNUI4NkZFMjI3RTZDRjE1NEMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NEMxRTRDMDkzRkQxMUU1Qjg2RkUyMjdFNkNGMTU0QyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NEMxRTRDMTkzRkQxMUU1Qjg2RkUyMjdFNkNGMTU0QyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv/uAA5BZG9iZQBkwAAAAAH/2wCEAAYEBAQFBAYFBQYJBgUGCQsIBgYICwwKCgsKCgwQDAwMDAwMEAwODxAPDgwTExQUExMcGxsbHB8fHx8fHx8fHx8BBwcHDQwNGBAQGBoVERUaHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fH//AABEIAHsAiAMBEQACEQEDEQH/xAGiAAAABwEBAQEBAAAAAAAAAAAEBQMCBgEABwgJCgsBAAICAwEBAQEBAAAAAAAAAAEAAgMEBQYHCAkKCxAAAgEDAwIEAgYHAwQCBgJzAQIDEQQABSESMUFRBhNhInGBFDKRoQcVsUIjwVLR4TMWYvAkcoLxJUM0U5KismNzwjVEJ5OjszYXVGR0w9LiCCaDCQoYGYSURUaktFbTVSga8uPzxNTk9GV1hZWltcXV5fVmdoaWprbG1ub2N0dXZ3eHl6e3x9fn9zhIWGh4iJiouMjY6PgpOUlZaXmJmam5ydnp+So6SlpqeoqaqrrK2ur6EQACAgECAwUFBAUGBAgDA20BAAIRAwQhEjFBBVETYSIGcYGRMqGx8BTB0eEjQhVSYnLxMyQ0Q4IWklMlomOywgdz0jXiRIMXVJMICQoYGSY2RRonZHRVN/Kjs8MoKdPj84SUpLTE1OT0ZXWFlaW1xdXl9UZWZnaGlqa2xtbm9kdXZ3eHl6e3x9fn9zhIWGh4iJiouMjY6Pg5SVlpeYmZqbnJ2en5KjpKWmp6ipqqusra6vr/2gAMAwEAAhEDEQA/APO8be++WhqKKiZtt8kwRtu5DAg7jeuSYEPWfJeqpd2Koxqy7EZeDbhyFFW81aJHfWUkZXcg0xIRGRBeAavYTWN9JA9RxY0zCnGi7SE7DrDS7+9cLCjNXvviIkrKYHN6F5X/ACtvbpkedWNcvji73Enqe56/5b/K6CBV5RDb2yywHHslnmneU7S2UARDb2yBmzGNOIdIiHSNfuGQMmwQRS6WoFfTH3DI8TLgKcaNZxryLRivyGVzLfiin6QxAfYX7hlYb2zFH/KPuGFWuMI/ZH3DIpUpWgUVIX7hhQS/NWPrl4aii4+mSYIuGlckGDKfJ+oTW2oxxoCwlIAUCprlkS05Rs+g9D/L3UdUtklulMSOKhe9PfBPKAwhhJdqX/ON/lvUp1nuErIO+UnNE9HIjgmORTfRvyG8sacB6cIqMHj9y/lieZZZZeQ9KtFAjipTInMSzjpgEyTQLZPspkPELZ4IXHSIR2x40+GFyadEuPEnw1UWS+GDiTwqkcQiNRtgJSBSuLhQNzilZLdqB9rFbQ4m51NdsNMbY/5jvvRjJVj75bjFuNmNPgVbdh03p1GAScgxVUBHUZMFrKJhBJHjkwwL2/8AIrylY3N3+kLtRI6mkYPQZKWwcc+qVPqayijSJVUAKAABmFduyiKCJ+HG1dUY2rtsNq7bFWiFwJaontiq1iuBULdTBFJwgMZGmPXmsEScVBPjTLhDZxZZVA6ue4P04eBj4q3/ABFCgozUph8NfGYb5084Wsds9HFfnl0IU4+Sdp3c+Q/y71In655fsJGPVhCqNv7x8Tmqjld/LEGN6z/zjz+XWoBmsln0uQ9PScyRg/6knI/8NkxmLA4QWG3n/OL+pRy8tN1i2ni/ZEyvE/TvT1B1y6Odonpu5N/LPkT8yvJ8n7qxS9gG5NvIr/cKhvwy8Z4kUXElpJjcMjuvza86acvCXypfEL1f0mp+rBwwPVeLKOYSuX/nI+9tzS40G7iI68kIw+DFHjTdH/zk5aA/vtMuE/2Bx8EKM80VH/zk3oDU52sy/NTg8AL+Yl3I23/5yQ8rykDhKD4cTj4Hmv5k9ydaf+c+j3xHpRSkHxUjH8uj835J9b+c4rkAxxPv4g5E4WY1N9E1tdQmuQCIyo8TlZiA2xyEoz6ssn298jbZw2pPpVqf2cPGWPhhDT6LbspoorkhkLGWIJFf+UxMDQ0r4ZbHK48sDznzb+Ul7eoxiuGUH9nLhkBaDiMU/wBE12aRlDsG5DY5z4L1k8bLbK4EiEH7Xb3y4OPIUoXOptAxqtad60wGVJjC10GteoP3bfEOqk748anHSo+vSKvHlxc/ZPjh418NEWOqw3gMF7CrA7Msiq6n/gq5ZDKQ1ZMIKXav+W3lu/5SWsEdtK2/p8R6ZJ8P5cy4aguvnpI9GAa7+WMdrUy2fBf5+NV/4IbZlRyguFPTyjySvT/IunJMCYl6+Ayyw0UXoeg+XrCFVCxKPoGUzm3Y8YLLbWxtYwKKu3tmOZFzIwARyPEg2oMhu2bKn12IdxjSeING9h/mH348JRxhTfUbYChcD6cPCUGYUxqFm3WRfvw8JR4gWzXljTeRafMYBEoM4vnLQ/MSwzDmSR4eGa8xehelaH5gglRaSA+FcALTOCd3tobuH1Iz8dK5Mi2uMqNMF1PWGsLlopecUgICHfjXp1ykuXGFsfvPPFy10VSTjMvVe3zocLMY12n/AJoXaTyxT0aJDwEg+Fge4FMJtj4ILIbT83VsipnmWSEkChO4qe2ETkGMtPGTNtM/MnSLuIfvBRtmRtwQfY5ZHPTjT0ZVJrfy1fOskDi0nc9YyOBP+odvupmRj1bhZdBfRjWua5rvl3UTZS2jTKyh4LiIEpIniPl3GZ8DGTqckJwS2T80ryPaS2dPmCMn4YavFkhX/NyWtOP0Vx8ML4slEfmvNI/EJ+OHwwviFOLbzvPLH6gWu1euPhhHiFjHmr80rmyhYotGFe+PCAtmTym8/P8A11ZnCqaA0G+VnKO5yBpieqGP5/eYG6of+Cx8XyT+V82QK8kTGuxXc5qSHpgU60fX5LeVatT2yBizG71nyt5mimSOIv1+xX9WRiWvJjR/m7QLTXNIuDFFW8jjYhE6sAK1XxIPbJSjbHDMxlvyfNvmHWmtktoxRdQaKlxTqgbc1964IRtzdRk4dgkDakVi/vDt26DLOFxxkpnn5P6X5Q8w6hdWXmMSPcTJSxIkaIRkftCnVvCu3thiQDR5NebjMbid1Xz5pF35H1T6vbal9agZeScl4SKK0AalVPzGZEtHYsODj7V34ZBB2nmbzRbra6pewTR2cm8MpUhWptWvTMXJpzHm7HBq4ZNgXs/krzxpfmrThpepvwYCsE5NWV+lR/TJYcxiaLTq9GJCw3qflfzBbSOn1RriMH4ZYgHVl7Ed9828MgIeZy4JRLE9T07hUXen8fH1ISP1jLAQ0kEJBJp2kB+SW6o3+SWH6jkkWiYJordeKA8elOX9cUMT8z+WptV5+he+iW/ZdOQ+8EZCUbbcc+EsBuPyl8yci0Fxa3H+yaM/8MtPxyjwZOWNVFLLn8uPOdtUnTzIB3ikjf8AU1cicUu5sGeB6vSNL17StcPGMi1u2Sj28jAVPjGxpy+XXMGUCHawzAqnpS28qrLVeXwb9n7ffkHJjNMbDzDPptzGWJaPbkte3iMqMW0Sep+WvPcJMbq3MbF1r8XzGAGiwnjBQP5h/k5pnnFZdd8tyx2OuyjnNDJtBcNTq1KmNz/MNj38cujJxySNi8V1v8vtY0XSFk1iwmstRtZyl2HNY3janpvEwqhWu1QcNswdwgtGe4tbqO5t5OEqGqkGnTIycgc3tNro2nebpLLzDqFZ5kjSKSzO6+sg2c+PIdvHNhpMtxo9Hnu0tOYT4hyk9JtPy+stU06SDXYuVnOnFbRTxIFKBqj7JHamTnMS2cfBjMTxPFvPf5W+aPIUp1XTLs3ug+pQTgcZoa/ZWZRtTtzH4ZgZcDv9LreI0Weflf8AmzBqMcWmalJ+/wBlilY7VHZq5XjmYmjybdTpBMGUeb1WRgRRtx77jNhW1ugltsUtu9G0a5r9YsYJfEtGtfvphEiGswieiTXXkHyhcVP1ARE94ndPwBpkhkLDwopJd/lPoEhJt7q5gPgSsg/EA/jkxlLDwQlc35R3SmttqaN4CWMr+Kk5LxWJwpbe/lj5qQH0vq9wP8iTifuYDCMoYnEXzIYJrW6kt5hR4mKOD4jKJQdhHJ1eiWsuo3HlyK5taSWttCsN1BIvMhl/bqd/iJrsdsw54yC7LBngRXVKhrzSxAXFuWA+zJHWv0g5W5lFMdH1yBpPTtpWS4G4icFWI708ciY2jipmeifmLqek3IZ5maLYMjb19sgY1ybABLm9T0vzXoPmvTHsdUjjubW5UrcW0tOKq21FI3r79cRk33a8mCtw8583/kXBosra1o8kl9oR+N7eQlpoAfcEc4/8rr45KV0uHICaPNmP5LWF1Jq8jwp/uNtIv3zMNvUYUjUV/a75PTgk20a+QoA83srNmUNnVlC3kNvcwSW1xGs0EylJYnAZGVtiGB6jLubXdF4J+YP5K6d5divfNWhasNL0+zRri4srhXdVA7ROtW3OwVh9OY09PxAux0/aBh9W6Yfkn+dcPnCV/L1zbyQ39pAZYbh2DLLGhCsKAAqRWuT08eEUXH1khOXEBQesFzy67ZeQ4SwvTrkQFWM+SQSsLgdcaRa4SVHjim3yV+cfln9Deb5GVeMVyS30jLJjqxxHYhn35OWaXGkywhFdmBKo/wBliRSje2RywuKcOSsm7GPMeg+ZvLby3eo6a9vCGJSb01kgb5utQK/Rms8EvRx1cTyQ1n5i8tXsCNcwxxzAhg3QgjwOVSiQ3xyxLVzJb6tK8emwmSgNZV+yGHavjkhsN2P1H0qematdaPOYGDRSqfsNUb++AwvkyjOub3Tyf58sBYQW17S6otJpCd6nsPbCDw7FpniMjY2el+X7TSbPSo49KiENo7NIFXuzmpJ/VmdgA4BTqNSTxm0W7YSKawVJmpkosJPJv+cmLuaH8pr9YyQLi4toZCP5DJyNf+ByUuSx5vmz8kfMDaL+Y+jThqJcTC0mHYx3H7s/iQcrjzbp/Sbfaz7V8ctcVSLYWJKk8mLG1Bpd8LHiau9UstPs5Lu8lWGCIVd2O30e+NWkyDyn/nJny+7QQ6hEm8Tip9jjDeLKXpn70t/Je8MESI/emXVYaJGpPY9buIZdNbkAVKkEHcfSMpjDfdullNbPEZvy1ttb1g3VxElnpitVjGoWSXfooA2H+VhniB5Jx6mQ5pjfeTPNy6oieV9Blm03giWzxhVgXiKEFmZR13Nc1+bATJ3ui1kI4/NMbr8o/wA3NcKR6pa6Pb26qAryTFnX/kUjH7jgGmPemWvj3Mt8v/kLpWmWtvJqWr3Mt1H8V0ICsVue/Feas4A8Sa/LLvyw6uNLXy6ITz5/zkR5B8mQfovSCNW1C3X0ktbZgYo+IoBJKdv1nLwBEU4RMpm3m/lz/nL3Vm1pF8waTB+h5XAkktSwmhUmnIBtn49xtgJtPBT6WgvLa6tobq2kWa2uEWWCZDVXRxyVgfAg5GmJLyT/AJyhuzF+Vc6Lubi8toz8gxb/AI1yXMIifUHyT5aumtfMOm3J2EF1DIfksinIx5tuTkX6ASSBjyHRtx9OW04tod5MWJQ0sop1wsCkmu+Y9P0aze7vZQiL9lf2mPgoyYDAl4t5m866n5jvPjJS0U/6Paqdh7nxbJBS+gvzf8u/pXytdBV5MEJHzG+Y+GXRytTHq+f/ACJftYXQifahoMyg4cnrUmqvLbqjDqOh/pg4UWyTy55QluuF5qilINjHbdGceL+A9soyZK2DlYcN7lmzzW9pbMzFYbeBSzHYKqKKk+wAysStyCKDx/W/+cp/yztIb9LC4lvb22RvqyLEwimkBoFWQ7de+TtFHufMvmv87PzH8xzXS3WszQ2d1VXsrc+nEEJrwFPiP35AyLMYwGEAAb/fkWa0vRsVfWv/ADi954k1fydP5fun5XOhMBbk9TazElR/sHqPlTJNE9ikf/OV/nGCPTdO8qx0ee4k+u3O+6IlVQf7InCdgjGLPufNNu0gkUA71HEe+RDfLk++NNuZDo9g0lRIbaHmD15emK5fTgW1LdAV3wgMDJjXmvzlp2hWZmuG5TN/cwD7TH+mSAYmy8M17zJqev6gZ7pyxJpFCPsovgMLICko1bVv0VbcYfiu5RT1Oyj/ACf64JGmeOHEX3WyQXtmUYBkkWhHzzBui51CQeW6r+Vmm6ZdTalYRfv2JYKfsrXf4R45mY81uDkwUmPk208uJIs97fQyakD8FpIeAiPyenJsGWUuicEY8yd2emSoqOh6HscxXNt5T/zkr5ql0P8AK29it5PTutWkSwjIO/CSrS0/2CkZOPewO5p8Rrtv2HbA2tADcn7sVWs5riq0VJ2GKvQPyX/MODyP5vXUL3m2mXUT216kYqwVviRwO/F1GSiWvJG+SVfmb5wHm/zpqGuIGW2nYJao/VYkFFH8cZGyuKNBMPye8r/p/wA72MUicrW0YXNzXpRDVQfm2Sxxssc8qj7315PcqFoNgNgPbLqcG2F+cvPtjoMBQES3zj91AD0929slSKt4lqmsahrF891dyGWZz1PRR4DwGNtgjSc+VNIhvJDK5rAnU93P9MMQwmaQH5k6QFVbhFoAOO3QDtkcg2Z4Jb0+uPL+sv6KoxrlGSDdhyMgfhcxFWFajKeRcn6g8f8AzM0UadL9eA4QsaOxB479yemZuKduuywILD7HzVrFhR9Pv5Yk7BHqh/2Jqv4ZMxBYCZDzb8+/PvmHX30fT9QkSS2tElnjZE4FpHIQlqfCaAbbZjZYgcnO08jKyXkQND+vKnIaJP0Yq7FV0YPIYq6SnM0FB4Yq0MVfRv8Azj5osVj5cm1V0/f3rni/fgvwr+o5k440HX6iVz9yf+e/zHt9Iia0s2EuoMKbbhPc5JrjG3i15qNze3L3FxIZZ5TVnO5wW3iNBXn9K10a5mm2mlX0rVO5durH/VGJ5MRvIJ1+W16Vh9B2qU23/DJYzsxzje2S+bbJbvTJFpU0NPnkyLaoSovfNGhYGh7ZjyLdjDKop1jQVPTKKcwFjXn23uLrSpzaM6TcCVaMkNWntlmJx8++753n1WeOYpqenQzPWjScGtpv+RkPp1/2QOZXC41obWvy50zzjbQzW1/NptxAGEcdyi3EZ5U29SP03pt/LkJ4+Jsx5uEsA1r8lvPWm8ngto9UgX/dllIJGp/xjPGT/hcoOKQcqOoiWFXdje2cphvLeS3lXYxyoyN9zAZAghuEgVHAlcjUNcVaY1JPjiqJ06xuL68htLdeU07hEHue59h1wgWUSlQsvdb3zlD5d8uwaDpBBuUQJJMOigALt7mlcy7oOtjEyNlIPKfkjzB5xuriaBhHawhpLvUZyRGCN6V7nItpICXR6dBYm4mupVaK2LBpV6GhoOP+t2x5IMr2DHrvU21C6Mr/AARr8MUXZV/z65AytujDhCY+XdVFlqib0R9jkondhkjYentdLc2g71GXOHT6GsP7w0p9H9uYsnLgirmtP2vopkQ2SVE/uN6dP92f2YF6PMvPf1fg/L9EdT/e+ty/4XvmTDl1cSfwY1onD6seHp8f+KefH6OfxZa1IDzLX0h/edf91U5/RiqSeavrP6Jh48vS9MV/Tvoel9HL9592Qm2Y3i3mH6l6h9P9F+p3/R31un/JT4PuzFl8HPhfn9iRjINzsVZF5Mp9een2uB/uq+vSn7Nfh4+OW42jPyTqSn1j4q8efxepXpX9rj8XzpvlrU9y1Pn/AMqrtvR5fVuG/wCgeP1P/nt637/54tDxLzJX9Dw05cef7H93X/Lr8XLw7YMnJuxfUxqKlO345WHIKpH/AL0R9eo6dcKDyes6PX6kleXQfap/DMkOAX//2Q==" /><br />
<button type="button" onclick="uploadFile()">上传上面的图片</button>
<script src="https://cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>
<script>
//获取上面图片的base64位图片
var oImgSrc = document.getElementById("img").src;
function dataURLtoFile(dataurl, filename) {//将base64转换为文件
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
}
//上传文件
function uploadFile(){
var formData=new FormData();
//把file改成后台给的参数字段
formData.append("file",dataURLtoFile(oImgSrc,uuid(11,10)+'.png'));
$.ajax({
url:"upload.php",//改成后台给的接口路径
type:"post",
data:formData,
contentType: false,//发送文件时不需要"application/x-www-form-urlencoded"这个类型
processData: false,//如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false
success:function(res){
console.log(res);
}
});
}
//生成唯一随机图片名称
function uuid(len, radix) {
var chars='0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
var uuid = [], i;
radix = radix || chars.length;
if (len) {
// Compact form
for(var i=0;i<len;i++){
uuid[i]=chars[0|Math.random()*radix];
}
}else{
var r;
uuid[8]=uuid[13]=uuid[18]=uuid[23]='-';
uuid[14]='4';
for (var i = 0; i < 36; i++) {
if(!uuid[i]){
r=0|Math.random()*16;
uuid[i] = chars[(i==19)?(r&0x3)|0x8:r];
}
}
}
return uuid.join('');
}
</script>
</body>
</html>
upload.php里面的代码：
<?php
$fileName=$_FILES["file"]["name"];
$fileInfo=pathinfo($fileName);
$extension=$fileInfo["extension"];
if($fileName!="" && is_uploaded_file($_FILES["file"]["tmp_name"])){
//$tempName=time().".".$extension;
$tempName=$fileName;
move_uploaded_file($_FILES["file"]["tmp_name"],"files/".$tempName);
echo $tempName;
}
用搭建好的php环境运行，我用的是apache先访问upload.html文件即可。
base64图片转文件代码下载
upload.html文件代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>base64转文件图片上传</title>
</head>
<body>
<img id="img" src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMqaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjUtYzAxNCA3OS4xNTE0ODEsIDIwMTMvMDMvMTMtMTI6MDk6MTUgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDREOTY0QUY5M0ZEMTFFNUI4NkZFMjI3RTZDRjE1NEMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDREOTY0QjA5M0ZEMTFFNUI4NkZFMjI3RTZDRjE1NEMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NEMxRTRDMDkzRkQxMUU1Qjg2RkUyMjdFNkNGMTU0QyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NEMxRTRDMTkzRkQxMUU1Qjg2RkUyMjdFNkNGMTU0QyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv/uAA5BZG9iZQBkwAAAAAH/2wCEAAYEBAQFBAYFBQYJBgUGCQsIBgYI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" /><br />
<button type="button" onclick="uploadFile()">上传上面的图片</button>
<script src="https://cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>
<script>
//获取上面图片的base64位图片
var oImgSrc = document.getElementById("img").src;
function dataURLtoFile(dataurl, filename) {//将base64转换为文件
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
}
//上传文件
function uploadFile(){
var formData=new FormData();
//把file改成后台给的参数字段
formData.append("file",dataURLtoFile(oImgSrc,uuid(11,10)+'.png'));
$.ajax({
url:"upload.php",//改成后台给的接口路径
type:"post",
data:formData,
contentType: false,//发送文件时不需要"application/x-www-form-urlencoded"这个类型
processData: false,//如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false
success:function(res){
console.log(res);
}
});
}
//生成唯一随机图片名称
function uuid(len, radix) {
var chars='0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
var uuid = [], i;
radix = radix || chars.length;
if (len) {
// Compact form
for(var i=0;i<len;i++){
uuid[i]=chars[0|Math.random()*radix];
}
}else{
var r;
uuid[8]=uuid[13]=uuid[18]=uuid[23]='-';
uuid[14]='4';
for (var i = 0; i < 36; i++) {
if(!uuid[i]){
r=0|Math.random()*16;
uuid[i] = chars[(i==19)?(r&0x3)|0x8:r];
}
}
}
return uuid.join('');
}
</script>
</body>
</html>
upload.php里面的代码：
<?php
$fileName=$_FILES["file"]["name"];
$fileInfo=pathinfo($fileName);
$extension=$fileInfo["extension"];
if($fileName!="" && is_uploaded_file($_FILES["file"]["tmp_name"])){
//$tempName=time().".".$extension;
$tempName=$fileName;
move_uploaded_file($_FILES["file"]["tmp_name"],"files/".$tempName);
echo $tempName;
}
用搭建好的php环境运行，我用的是apache先访问upload.html文件即可。
base64图片转文件代码下载
- 上一篇：初识Python，学习前必看
- 下一篇：百度echarts入门教程
精品好课
jquery视频教程从入门到精通，课程主要包含：jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器，利用mp4转成m3u8格式的视频，并在移动端和PC端进行播放支持m3u8直播格式，兼容...
HTML5基础入门视频教程，教学思路清晰，简单易学必会。适合人群：创业者，只要会打字，对互联网编程感兴趣都可以学。课程概述：该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程，本课程教你如何快速学会VUE和uni-app并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己...
React是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习React高薪就...
React是前端最火的框架之一，就业薪资很高，本课程教您如何快速学会React并应用到实战，对正在工作当中或打算学习React高薪就业的你来说，那么这门课程便是你手中的葵花宝典。
VUE是目前最火的前端框架之一，就业薪资很高，本课程教您如何快速学会VUE+ES6并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习VUE高薪就...
React和VUE是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React和VUE并应用到实战，教你如何解决内存泄漏，常用库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习Re...