base64圖片上傳圖片
可以讓別人看不到你的路徑,還要base64可以存入資料庫，
Ⅱ 詳述圖片base64加密的原理，告訴你什麼是"/9j/"
在日常的生活中，我們肯定都經歷過類似這樣的場景：報名考試上傳圖片，網站要求的是上傳的照片不能大於多少，而且要求是「.jpg」的格式。
於是你高高興興地把自己最漂亮的照片上傳上去了，但是網站卻提示你照片格式不正確，讓你重新上傳。這個時候內心不知道有多少疑惑湧上心頭（其實是奔騰）我的照片明明就是「.jpg」結尾的，而且大小也符合規范，為啥就不行呢？
我們通常的會認為（Windows電腦情況下，Mac不知道，畢竟我沒有圖片）「.jpg」圖片結尾的就一定是符合規范的「JPG」文件類型。其實一開始我也是這樣認為的，直到前幾天，我在對接項目的時候踩了一個大坑，很大的坑！
我對接的項目要求的是圖片是「JPG」類型的文件，並且經過base64進行編碼之後要以"/9j"開頭的文件。於是我就把我電腦上保存的看似符合規范的圖片上傳上去了，結果就是一堆報錯信息。於是我再次嘗試，換一些其他的圖片進行測試，發現有的就好使，有的就不好使。說實話，我的內心崩潰了！那種感覺你懂得圖片
回到家之後我思來想去就是不知道為什麼要求什麼"/9j"開頭的？我打開了網路，輸入了關鍵詞「/9j」之後，呵呵！我笑了，都是些什麼？完全跟我的問題不著邊！
什麼玩意？這到底是什麼玩意？竟然連強大的網路都沒有給出結果！就這樣，我搜索到了凌晨12點......
扛不住了，我就去睡覺了。但是躺在床上我輾轉難眠，打開手機繼續各種搜索著......突然！我看了一個關於電腦圖片文件頭信息解析的文章！一道靈光從我腦門上閃過。於是我起床，默默打開了電腦，打開了網路......
原來電腦在存儲的時候是存儲了圖片的基本信息的，比如圖片是什麼類型的，圖片的寬高等基本信息，這些個基本信息叫做圖片頭信息。好吧！原諒我的無知，曾經的我天真的以為是按照文件後綴名區分的呢。
我們應知道，圖片在計算機中存儲是一個一個的像素點，最底層也是二進制文件，所以需要文件頭來保存文件信息。經查找資料，我找到如下對圖片不同格式的文件頭標識信息（16進制標識）：
於是我在電腦上保存了一個為「.jpg」後綴結尾的圖片，然後使用UE這個強大的工具打開，果然不出我所料，看看這個文件的內容信息。
不出意外的話，你肯定看不懂這些東西，因為這些是16進制文件。但是重要的我已經給你標注出來了，那就是「FF D8」。
在這里我給大家稍微簡單科普下base64的編碼規則：假如我們有個「hello」這樣的關鍵字進行base64編碼，需要先把「hello」轉換成二進制，也就是"110100011001011101100110 11001101111"。我這里給了一個ASCII表，這里對應的是10進制的，需要把十進制轉化成2進制的。
關於base64 有個規定就是，一個字元轉換之後如果位數不為8位，需要在高位補0，然後再6位截取，最後不夠6位的，低位補0。然後把分割後的2進制轉換成10進制並對照base64編碼表進行解析。那麼上述的「hello」的解析過程就如下：
所以「hello」base64編碼之後的最終結果就是「aGVsbG8=」。也許你會疑惑，為什麼多了個「=」 這個其實是base64的規定，編碼完畢之後自動添加一個或兩個「=」。
那麼再回到「FF D8」，jpg文件的標識頭，他經過base64轉碼之後是什麼呢？
謝天謝地，可算搞明白為什麼是「/9j」開頭的了。其實還有另外一種方式快速查看是不是jpg格式文件。我們可以使用記事本的方式打開一個jpg文件。
打開之後，你肯定還是看不懂這些東西，但是重要的我已經給你標注出來了，那就是「JFIF」，這個是一個很重要的標識，所謂的「JFIF」就是"JPEG File Interchonge Format"即JPEG文件交換格式。
為了還原我之前明明是「.jpg」後綴的文件，但是識別失敗的問題。我們把一個格式為「.png」圖片，通過改後綴名的方式，改成「.jpg」。然後也用記事本打開查看文件的內容。
可以看到，並不是「JFIF」，因此這並不是一個jpg文件，所以上傳無法識別。
帶著問題去睡覺，果然是睡不著的！通過這次的經歷，我知道了base64的編碼原理，明白了文件在電腦中存儲並不是靠簡簡單單的後綴名來區分的，而是有文件頭信息的。文件到底是一個什麼文件，還是要靠文件頭信息來決定的。所以，你以後的程序判斷文件類型千萬不要僅僅判斷後綴名就完事了哦！
Ⅲ html實現圖片上傳
html：
<section class="upload-section">
<article class="upload-piclist">
<div class="upload-file">
<input type="file" id="file" accept="image/*" multiple onchange="imgChange()"/>
</div>
</article>
</section>
css:
/* body {
margin: 0;
padding: 0;
max-width: 414px;
margin: 0 auto;
} */
.upload-fh {
background-image: url('data:image/png;base64,/NlyAAAD1klEQVRoQ+++d972/++T//++XRa2drCkDwG8E4B+A9BH8maZ2FrBkj4D8GYA+hHAKyT/thSRYiGnZtgJogeSgFNglYkgX/+/YOlgSf0AohTOkoBekj/B19KwBdcOz/++5mGm4WttHa3D892xJAspTwXX3Pae//+/+mIZ6GzAjt7iJ49RraWhf+gWnRXY0RaY2Frd/+/yB7sE9nCeW+p8Hjbm2nDAKwcahbAdGPfTGt3nM53/V00ckNMKWY8LAAAAABJRU5ErkJggg==');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 30px;
width: 30px;
}
.upload-hedaer {
height: 55px;
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 0 10px;
box-sizing: border-box;
align-items: center;
text-align: center;
background: #287cff;
color: #fff;
border-bottom: 1px solid #efefef;
font-size: 19px;
}
.upload-hedaer div:last-child {
text-align: right;
}
.upload-textarea {
width: 100%;
height: 60px;
font-size: 28px;
border: 1px solid #efefee;
max-height: 300px;
}
.upload-article-text {
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.upload-file {
position: relative;
background: url('../images/z_add.png') no-repeat 50%/100% 100%;
/* width: 100px; */
height: 120px;
order: 9;
}
.upload-piclist {
padding: 0 10px;
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(3, 120px);
justify-content: space-between;
grid-gap: 14px;
}
#file {
width: 100%;
height: 100%;
opacity: 0;
}
.upload-Picitem {
width: 100%;
height: 120px;
}
.upload-Picitem>img {
width: 100%;
height: 100%;
object-fit: cover;
}
.submit {
padding: 15px 0;
background-color: #287cff;
color: #fff;
text-align: center;
margin: 10px;
font-size: 20px;
border-radius: 10px;
}
.upload-sm {
padding: 10px;
box-sizing: border-box;
color: gray;
}
.upload-sm ol>li {
margin-bottom: 10px;
}
js:let picmax = 9; //限制上傳數量
function imgChange() {
let file = document.getElementById('file').files;
let imglist = document.querySelectorAll('.upload-Picitem');
let piclist = document.getElementsByClassName('upload-piclist')[0];
let filelist = file.length + imglist.length > picmax ? 9 - imglist.length : file.length + imglist.length;
if (file.length + imglist.length >= 9) {
let uploadfile = document.getElementsByClassName('upload-file')[0]
uploadfile.style.display = "none"
}
for (let i = 0; i < filelist; i++) {
readerfile(file[i]).then(e => {
let html = document.createElement('div');
html.className = 'upload-Picitem'
html.innerHTML = '<img src=' + e + ' alt="pic">'
piclist.appendChild(html);
})
}
}
function readerfile(file) {
return new Promise((resolve, reject) => {
let reader = new FileReader();
reader.addEventListener("load", function() {
resolve(reader.result);
}, false)
if (file) {
reader.readAsDataURL(file)
}
})
}
//提交
function submit() {
let imglist = []
let text = document.getElementsByClassName('upload-textarea')[0].value
let piclist = document.querySelectorAll('.upload-Picitem');
for (let i = 0; i < piclist.length; i++) {
imglist.push(piclist[i].lastChild.src)
}
console.log("發布內容：", text)
console.log("圖片列表：", imglist)
}
//textarea高度自適應
var autoTextarea = function(elem, extra, maxHeight) {
extra = extra || 0;
var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
addEvent = function(type, callback) {
elem.addEventListener ?
elem.addEventListener(type, callback, false) :
elem.attachEvent('on' + type, callback);
},
getStyle = elem.currentStyle ? function(name) {
var val = elem.currentStyle[name];
if (name === 'height' && val.search(/px/i) !== 1) {
var rect = elem.getBoundingClientRect();
return rect.bottom - rect.top -
parseFloat(getStyle('paddingTop')) -
parseFloat(getStyle('paddingBottom')) + 'px';
};
return val;
} : function(name) {
return getComputedStyle(elem, null)[name];
},
minHeight = parseFloat(getStyle('height'));
elem.style.resize = 'none';
var change = function() {
var scrollTop, height,
padding = 0,
style = elem.style;
if (elem._length === elem.value.length) return;
elem._length = elem.value.length;
if (!isFirefox && !isOpera) {
padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
};
scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
elem.style.height = minHeight + 'px';
if (elem.scrollHeight > minHeight) {
if (maxHeight && elem.scrollHeight > maxHeight) {
height = maxHeight - padding;
style.overflowY = 'auto';
} else {
height = elem.scrollHeight - padding;
style.overflowY = 'hidden';
};
style.height = height + extra + 'px';
scrollTop += parseInt(style.height) - elem.currHeight;
document.body.scrollTop = scrollTop;
document.documentElement.scrollTop = scrollTop;
elem.currHeight = parseInt(style.height);
};
};
// addEvent('propertychange', change);
// addEvent('input', change);
// addEvent('focus', change);
change();
};
pic:z_add.png
Ⅳ 如何把src為base64格式的img上傳到伺服器
我也正在做，一起研究吧
$.post("/unifiedtool/uploadProctImg", { "img": 「data:image/png;base64,...
」},function(ret){
if(ret.img!=""){
img.src = ret;
}else{
alert("upload fail");
}
});
伺服器那邊
String imgString =request.getParameter("img");
UserBean user = (UserBean)request.getSession().getAttribute("user") ;
String language_id = request.getParameter("language_id");
//對位元組數組字元串進行Base64解碼並生成圖片
if (imgString == null) //圖像數據為空
return "img error";
imgString = imgString.substring(imgString.indexOf(",")+1, imgString.length());
String imgFilePath = "";
BASE64Decoder decoder = new BASE64Decoder();
try
{
//Base64解碼
byte[] b = decoder.decodeBuffer(imgString);
for(int i=0;i<b.length;++i)
{
if(b[i]<0)
{//調整異常數據
b[i]+=256;
}
}
//生成jpeg圖片
File newPath = new File(request.getSession().getServletContext().getRealPath("/")+"download/"+user.getUserid()+"/proct/"+language_id+"/0");
if(!newPath.exists()){
newPath.mkdirs();
imgFilePath = "1.jpg";
}else{
if(newPath.list().length > 0){
imgFilePath = (newPath.list().length+1)+".jpg";
}else{
imgFilePath = "1.jpg";
}
}
//String imgFilePath = "d:\\1111.jpg";//新生成的圖片
OutputStream out = new FileOutputStream(newPath+"/"+imgFilePath);
out.write(b);
out.flush();
out.close();
}
catch (Exception e)
{
return "img error";
}
return "/download/"+user.getUserid()+"/proct/"+language_id+"/0/"+imgFilePath;
ok