下面給你介紹3種web前端上傳圖片的方法：
1.表單上傳
最傳統的圖片上傳方式是form表單上傳，使用form表單的input[type=」file」]控制項，打開系統的文件選擇對話框，從而達到選擇文件並上傳的目的。
ajax無刷新上傳
Ajax無刷新上傳的方式，本質上與表單上傳無異，只是把表單里的內容提出來採用ajax提交，並且由前端決定請求結果回傳後的展示結果。
3.各類插件上傳
當上傳的需求要求可預覽、顯示上傳進度、中斷上傳過程、大文件分片上傳等等，這時傳統的表單上傳很難實現這些功能，我們可以藉助現有插件完成。
如網路上傳插件Web Uploader、jQuery圖片預覽插件imgPreview 、拖拽上傳與圖像預覽插件Dropzone.js等等，大家可根據項目實際需求選擇適合的插件。
⑵ 前端上傳文件的幾種方法
1.表單上傳
最傳統的圖片上傳方式是form表單上傳，使用form表單的input[type=」file」]控制項，打開系統的文件選擇對話框，從而達到選擇文件並上傳的目的。
form表單上傳
表單上傳需要注意以下幾點：
(1).提供form表單，method必須是post。
(2).form表單的enctype必須是multipart/form-data。
javascript學習交流群：453833554
enctype 屬性規定在發送到伺服器之前應該如何對表單數據進行編碼。默認地，表單數據會編碼為 "application/x-www-form-urlencoded"。就是說，在發送到伺服器之前，所有字元都會進行編碼。HTML表單如何打包數據文件是由enctype這個屬性決定的。enctype有以下幾種取值：
application/x-www-form-urlencoded：在發送前編碼所有字元(默認)(空格被編碼為』+』，特殊字元被編碼為ASCII十六進制字元)。
multipart/form-data：不對字元編碼。在使用包含文件上傳控制項的表單時，必須使用該值。
text/plain：空格轉換為 「+」 加號，但不對特殊字元編碼。
默認enctype=application/x-www-form-urlencoded，所以表單的內容會按URL規則編碼，然後根據表單的提交方法：
method=』get』 編碼後的表單內容附加在請求連接後，
method=』post』 編碼後的表單內容作為post請求的正文內容。
⑶ 前端如何將圖片上傳至後端
1. 如果是通過form提交的方式 ，後端直接通過前端的name值即可獲得圖片
2.如果沒有通過form提交 ，則可以通過js將上傳的圖片進行base64轉碼，後端再進行解碼即可
⑷ 前端圖片上傳的兩種邏輯分析
用戶在表單中選擇文件/圖片後即發送請求，後端將文件存入伺服器，返迴文件對應id，用戶提交表單時帶上此id，實現表單與文件的關聯。
用戶選擇圖片後，前端使用FileReader()對象將其轉換成base64地址，只在前端進行圖片預覽。表單提交時，將base64轉換成file文件，先上傳圖片，再提交表單。
⑸ 如何在前端用js進行多圖片上傳
產品提了一個需求，要求在一個html中實現多行多圖片上傳，原型圖如下:
2.1 ：html
html頁面由前端實現，此處增加<ul><li></li></ul>是為了配合圖片單擊放大圖片功能的實現
<ul id="ul_other">
<li><input type="file" id="file_other" class="file_input" onchange="add_file_image('other')"></li>
</ul>
2.2 ：js
var imgSrc_other=[];
var imgFile_other=[];
function add_file_image(id) {
var fileList =document.getElementById("file_"+id).files;// js 獲取文件對象
if (verificationFile(fileList[0])){
for(var i =0;i
var imgSrcI =getObjectURL(fileList[i]);
if (id=="other"){
imgSrc_other.push(imgSrcI);
if(fileList[i].size/1024 >100) { //大於100kb，進行壓縮上傳
fileResizetoFile(fileList[i],0.6,function(res){
imgFile_other.push(res);
})
}else{
imgFile_other.push(res);
}
}
addNewContent(id);
}
}
//新增圖片
function addNewContent(obj) {
//刪除原先
$("#ul_"+obj).html("");
//判斷循環新增
var text="";
if (obj=="other"){
for(var a =0;a < imgSrc_examReportCard.length;a++) {
text +='<li><input type="file" id="file_other" class="file_input" onchange="add_file_image('other')"></li>';
}
}else{
console.log('臟數據');
}
var oldBox ="<li><div class=\"filediv\"><span>+</span>\n" +
"<input type=\"file\" id=\"file_"+obj+"\" class=\"file_input\" onchange=\"add_file_image('"+obj+"')\">\n" +
"</div></li>";
$("#ul_"+obj).html( text+localText);
}
使用formData上傳
var form =document.getElementById("form_addArchive");//表單id
var formData =new FormData(form);
$.each(imgFile_other,function(i, file){
formData.append('imgFileOther', file);
});
$.ajax({
url:url,
type:'POST',
async:true,
cache:false,
contentType:false,
processData:false,
dataType:'json',
data:formData,
xhrFields:{
withCredentials:true
},
success:function(data) {
}
},
error:function(XMLHttpRequest, textStatus, errorThrown) {
}
})
後台使用@RequestParam(value ="imgFileOther", required=false) List<MultipartFile> imgFileOther, 接受
//獲取圖片url以便顯示
//文件格式驗證
//圖片壓縮
⑹ 前端壓縮並上傳圖片
移動端工單報修的場景中，上傳圖片的功能已經屢見不鮮，但現在手機像素普遍較高，隨手拍一張圖片都6、7M，十幾兆的圖片也並不罕見。如果這些未處理的圖片直接隨數據上傳向伺服器，不但會佔用更多的存儲空間，而且用戶也要等更久的時間，體驗性會差很多，同時更長的傳輸時間，也加大了問題發生的概率，基於這些情況，壓縮圖片並上傳的需求應運而生。
FileReader.readAsDataURL() 該方法會讀取指定的 Blob 或 File 對象。讀取操作完成的時候，readyState 會變成已完成（DONE），並觸發 loadend 事件，同時 result 屬性將包含一個data:URL格式的字元串（base64編碼）以表示所讀取文件的內容。
canvas 用來轉換圖片，將原來的圖片「另存為」新圖片。這里核心方法是cavas的 drawImage 方法來壓縮圖片。
上傳圖片至伺服器，使用 formData 對象生成表單，這里使用axios提交數據
⑺ koa實現簡單圖片上傳
文件上傳請求肯定是post請求，koa中處理post請求參數需要安裝一個中間件
我們處理文件上傳需要在 koaBody 的配置設置 multipart 為 true ，這樣上傳的文件也就是 formdata ，會被 koaBody 處理在 ctx.request.files 中，其他普通的參數通過 ctx.request.body 就可以拿到:
上傳的文件會包含上面那個幾個欄位，其中 path 為臨時路徑，把他們返回，下面會把介面請求結果貼出來，看一下就知道各個欄位的含義。
app中引入並使用：
引入 upload 路由:
這里用了原生的ajax，返回的response是個json字元串
安裝: npm install fs-extra --save
改一下我們的 upload 介面，upload.js:
然後我們重新上傳一下文件
其實上面已經實現了圖片上傳並且保存到我們想要的位置，那怎麼訪問呢，前端怎麼展示呢，這就需要處理靜態資源了。
在app.js中:
這時候我們就可以直接通過圖片的文件名訪問圖片了，我們上面上傳的一張圖片叫 girl.jpg ，這時候直接訪問:
前端加個img標簽展示圖片:
前端上傳後:
如果需要添加其他參數，就在 formdata 中再 append 其他參數
這時候把ctx.request.body返回給前端，看看是什麼樣的：
到這里整個功能就實現了，歡迎大家指教哦。
⑻ 前端圖片壓縮上傳
最近公司有個需求，就是上傳照片時需要先壓縮。
其中上傳原理是用ajax上傳formdata數據，壓縮是採用canvas進行處理。
利用canvas處理Image對象調整像素尺寸，輸出base64格式，再將base64格式轉換為blob對象，再放進formdata對象
上傳文件用formdata，圖像處理用canvas。
⑼ 前端是否選了照片就開始上傳,還是點擊按鈕再上傳
點擊按鈕。
上傳照片的時候，彈出這個框，然後點擊按鈕才能實現上傳，不點按鈕上傳不了。
照片，指用感光紙放在照相底片下曝光後經顯影、定影而成的人或物的圖片。
⑽ 前端文件上傳多種方式
前端上傳文件【包含圖片、視頻等資源文件】是相當常見的場景，作為一名前端開發人員你會遇到後端接收文件的多種方式，以及前端不同場景下的生成的不同文件上傳格式。
1、表單上傳方式【最場景、最簡單的方式】
上面的是挺簡單的，but 刷新了，這個體驗大多數場景中讓人接受不了，最簡單的處理方式設置submit 返回 false;
2、表單升級版 【formData】
有些場景中我們不一樣會使用form，或者說不想用，那麼formData就是一個很好的選擇了，首先刷新問題是肯定沒有了，而且看上逼格更高。
3、formData 上傳 blob 圖片
4、formData 上傳 base64 圖片； // 一般是把base64轉blob在上傳
其他方式歡迎留言探討， 上面大部分寫法是直接用vue的方式，其實都差不多哈。