js上傳圖片的原理
Ⅰ 前端，js實現圖片上傳的原理是設么能回答面試即可
H5的話，就是把本地的圖片按照指定的格式讀取到緩存里，再供JS代碼進行調用傳給後台，格式的話base64吧
Ⅱ 用js、jquery如何實現上傳圖片的預覽
$("#btnLoadPhoto").upload({ url: "../UploadForms/RequestUpload.aspx?action=photo", type: "json", callback: calla });
//獲得表單元素
HttpPostedFile oFile = context.Request.Files[0];
//設置上傳路徑
string strUploadPath = "temp/";
//獲取文件名稱
string fileName = context.Request.Files[0].FileName;
補充：JQuery是繼prototype之後又一個優秀的Javascript庫。它是輕量級的js庫 ，它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及後續版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML（標准通用標記語言下的一個應用）、events、實現動畫效果，並且方便地為網站提供AJAX交互。jQuery還有一個比較大的優勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁面保持代碼和html內容分離，也就是說，不用再在html裡面插入一堆js來調用命令了，只需要定義id即可。
Ⅲ 3分鍾上手JS中的FileReader對象（實現上傳圖片預覽）
詳見原文：
https://www.cnblogs.com/LO-gin/p/6817319.html
方法一：使用js的FileReader對象
1、FileReader對象簡介
檢測瀏覽器對FileReader的支持
調用FileReader對象的方法
FileReader 的實例擁有 4 個方法，其中 3 個用以讀取文件，另一個用來中斷讀取。下面的表格列出了這些方法以及他們的參數和功能，
需要注意的是 ，無論讀取成功或失敗，方法並不會返回讀取結果，這一結果存儲在 result屬性中。
readAsText：該方法有兩個參數，其中第二個參數是文本的編碼方式，默認值為 UTF-8。這個方法非常容易理解，將文件以文本方式讀取，讀取的結果即是這個文本文件中的內容。
readAsBinaryString：該方法將文件讀取為二進制字元串，通常我們將它傳送到後端，後端可以通過這段字元串存儲文件。
readAsDataURL：這是例子程序中用到的方法，該方法將文件讀取為一段以 data: 開頭的字元串，這段字元串的實質就是 Data URL，Data URL是一種將小文件直接嵌入文檔的方案。這里的小文件通常是指圖像與 html 等格式的文件。（其中base64的方式就是由此來獲得的。。）
文件一旦開始讀取，無論成功或失敗，實例的 result 屬性都會被填充。如果讀取失敗，則 result 的值為 null ，否則即是讀取的結果，絕大多數的程序都會在成功讀取文件的時候，抓取這個值。
例子：
3 、使用js的FileReader對象實現上傳圖片時的圖片預覽功能
方法二：使用window.createObjectURL
Ⅳ js 前端上傳多張圖片
可以用webuploader插件，上傳成功後，服務端返回圖片地址，客戶端<img>顯示圖片
X關閉按鈕這個得自己用css樣式控制，點擊X後，服務端刪除圖片，然後前端移除該X掉的圖片
Ⅳ js 大文件分片上傳處理如何實現
推薦採用webuploader控制項來解決。
關於WebUploader的功能說明：
大文件上傳續傳
支持超大文件上傳(100G+)和續傳，可以關閉瀏覽器，重啟系統後仍然繼續上傳。
開源
提供ASP.NET,JSP,php示例和源代碼，其中JSP提供MySQL,Oracle,SQL Server資料庫的配置和示例代碼。
分片、並發
分片與並發結合，將一個大文件分割成多塊，並發上傳，極大地提高大文件的上傳速度。
當網路問題導致傳輸錯誤時，只需要重傳出錯分片，而不是整個文件。另外分片傳輸能夠更加實時的跟蹤上傳進度。
預覽、壓縮
支持常用圖片格式jpg,jpeg,gif,bmp,png預覽與壓縮，節省網路數據傳輸。
解析jpeg中的meta信息，對於各種orientation做了正確的處理，同時壓縮後上傳保留圖片的所有原始meta數據。
多途徑添加文件
支持文件多選，類型過濾，拖拽(文件&文件夾)，圖片粘貼功能。上傳本地指定路徑的文件，不需要通過點擊按鈕選擇文件。
粘貼功能主要體現在當有圖片數據在剪切板中時（截屏工具如QQ(Ctrl + ALT + A), 網頁中右擊圖片點擊復制），Ctrl + V便可添加此圖片文件。
HTML5 & FLASH
兼容主流瀏覽器和低版本瀏覽器，介面一致，實現了兩套運行時支持，用戶無需關心內部用了什麼內核。而且支持IE6，IE8瀏覽器。
同時Flash部分沒有做任何UI相關的工作，方便不關心flash的用戶擴展和自定義業務需求。
基於內存映射模式進行IO操作，充分發揮操作系統性能。
MD5秒傳
當文件體積大、量比較多時，支持上傳前做文件md5值驗證，一致則可直接跳過。
如果服務端與前端統一修改演算法，取段md5，可大大提升驗證性能，耗時在20ms左右。
易擴展、可拆分
採用可拆分機制, 將各個功能獨立成了小組件，可自由搭配。
採用AMD規范組織代碼，清晰明了，方便高級玩家擴展。
Ⅵ js input file文件上傳圖片並展示
1 頁面HTML內容
2 獲取input[file]元素
3 對獲取的file元素操作，也就是操作fileReader屬性
1：Blob
2: File
3: FileList
4: FileReader
FileList ：
這里，默認狀態下選擇文件 每次files屬性上FileList對象里只有一個file文件。
file對象中包含了name 文件名; size ; type 文件類型; lastModified 最後修改時間；
FileReader：非同步讀取本地文件內容；包括File 和Blob ；
創建FileReader對象;讀取file文件
關於fileReader的幾個屬性：
FileReader.error 只讀一個 DOMException 代表在讀取文件中出現的錯誤。 FileReader.readyState 只讀一個數字表明的狀態FileReader。這是以下之一：
FileReader.result 只讀文件的內容。該屬性僅在讀取操作完成後才有效，並且數據的格式取決於使用哪種方法來啟動讀取操作。
fileReader的幾個事件處理程序：
1 . FileReader.onbort:在讀取操作中止時觸發。
2 . FileReader.onerror:在讀取操作遇到錯誤時觸發。
3 . FileReader.onload:在讀取操作成功完成時觸發。
4 . FileReader.onloadstart:在開始閱讀時觸發。
5 . FileReader.onloadend:無論是否成功 只要讀取操作完成都會觸發。
6 . FileReader.onprogress:閱讀Blob內容時觸發。
FileReader的方法：
1 . FileReader.abort();中止讀取操作
2 . FileReader.readAsArrayBuffer();完成時result屬性包含ArrayBuffer表示文件數據
3 . FileReader.readAsBinaryString();完成時result屬性將包含來自文件的原始二進制數據作為字元串。
4 . FileReader.readAsDataURL();完成時result屬性包含data：表示文本數據的URL；
5 . FileReader.readAsText();完成時result屬性包含文本的內容作為文本字元串。
Ⅶ 如何在前端用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以便顯示
//文件格式驗證
//圖片壓縮
Ⅷ CSS加JS怎麼實現網頁移動端上傳身份證和頭像
為+號添加點擊事件，點擊時彈出文件上傳的對話框，ajax非同步上傳完文件有現成的js庫，文件上傳完畢後執行回調，現在圖片在+的位置，點擊修改的本質就是一個update，原理和前面一樣。我這里有現成的代碼
Ⅸ Javascript如何實現上傳圖片的功能
你應該用asp、php、jsp、.net、pythone、ruby、node.js之類的東西寫一個運行在伺服器上的後台程序。
你寫的js是在瀏覽器前端運行的，瀏覽器上傳圖片是往伺服器端程序發送數據，前端運行的js是沒這個能力的。