js實現上傳文件
A. 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規范組織代碼，清晰明了，方便高級玩家擴展。
B. 使用js向伺服器上傳文件
（1）js無法向網站伺服器傳送文件只能用FTP傳送文件，（2）是動態網站要用js代碼函數與伺服器資料庫代碼建立連接函數。對應資料庫，數據，相應單位，通過指定路徑傳輸倒是制定數據單位。例如照片imag數據單位格式標注照片。通過編輯代碼任意網路客戶端都可上傳到資料庫imag格式單位標注中.相片.
C. 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屬性包含文本的內容作為文本字元串。
D. 使用jquery.form.js實現文件上傳及進度條前端代碼
ajax的表單提交只能提交data數據到後台，沒法實現file文件的上傳還有展示進度功能，這里用到form.js的插件來實現，搭配css樣式簡單易上手，而且高大上，推薦使用。
需要解釋下我的結構， #upload-input-file 的input標簽是真實的文件上傳按鈕，包裹form標簽後可以實現上傳功能， #upload-input-btn 的button標簽是展示給用戶的按鈕，因為需要樣式的美化。上傳完成生成的文件名將會顯示在 .upload-file-result 裡面， .progress 是進度條的位置，先讓他隱藏加上 hidden 的class， .progress-bar 是進度條的主體， .progress-bar-status 是進度條的文本提醒。
去掉hidden的class，看到的效果是這樣的
[圖片上傳失敗...(image-2c700a-1548557865446)]
將上傳事件綁定在file的input裡面，綁定方式就隨意了。
var progress = $(".progress-bar"), status = $(".progress-bar-status"), percentVal = '0%'; //上傳步驟 $("#myupload").ajaxSubmit({ url: uploadUrl, type: "POST", dataType: 'json', beforeSend: function () { $(".progress").removeClass("hidden"); progress.width(percentVal); status.html(percentVal); }, uploadProgress: function (event, position, total, percentComplete) { percentVal = percentComplete + '%'; progress.width(percentVal); status.html(percentVal); console.log(percentVal, position, total); }, success: function (result) { percentVal = '100%'; progress.width(percentVal); status.html(percentVal); //獲取上傳文件信息 uploadFileResult.push(result); // console.log(uploadFileResult); $(".upload-file-result").html(result.name); $("#upload-input-file").val(''); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(errorThrown); $(".upload-file-result").empty(); } });
[圖片上傳失敗...(image-3d6ae0-1548557865446)]
[圖片上傳失敗...(image-9f0adf-1548557865446)]
更多用法可以 參考官網
E. 如何通過js完成多個文件的上傳
HTML5 file組件的新屬性
accept : 如果在file組件中增加這個屬性就可以直接控制上傳的文件類型了，實在是很方便。
multiple：是否允許選擇多個文件
HTML5 頁面代碼修改後
<img width="400" height="250"/><br />
<input type="file" id="pic" name="pic" onchange="printFileInfo()" accept="image/*" multiple="multiple"/>
<input type="button" value="上傳圖片" onclick="uploadFile()" /><br />
<div id="parent">
<div id="son"></div>
</div>
accept 的值可以參閱：IANA MIME 類型（標准 MIME 類型的完整列表），如果使用的是DW開發的話，軟體本身就有提示。
如果選擇了多個文件，可以用JS做循環列印，看看文件的名稱，類型和大小,看演示代碼
function printFileInfo(){
var picFile = document.getElementById("pic");
var files = picFile.files;
for(var i=0; i<files.length; i++){
var file = files[i];
var div = document.createElement("div")
div.innerHTML = "第("+ (i+1) +") 個文件的名字："+ file.name +
" , 文件類型："+ file.type +" , 文件大小:"+ file.size
document.body.appendChild( div)
}
}
既然可以循環多文件的話，就可以嘗試多文件上傳了。
1、首先創建 XMLHttpRequest 對象
//這是全局變數。因為是示例，所以就沒有判斷瀏覽器類型，低版本IE這么寫的話會出問題的
var xhr = new XMLHttpRequest()
2、上篇介紹了進度事件(Progress) ， 這次實現 progress 和 error 2個事件
error：在請求發生錯誤時觸發。
對應上傳時發生錯誤導致的上傳失敗：uploadFailed()
//上傳失敗
function uploadFailed(evt) {
alert("上傳失敗");
}
progress：在接收相應期間持續不斷觸發。
對應上傳進度方法：onprogress()
/**
* 偵查附件上傳情況 ,這個方法大概0.05-0.1秒執行一次
*/
function onprogress(evt){
var loaded = evt.loaded; //已經上傳大小情況
var tot = evt.total; //附件總大小
var per = Math.floor(100*loaded/tot); //已經上傳的百分比
$("#son").html( per +"%" );
$("#son").css("width" , per +"%");
}
最後就是上傳方法了，注意上面的html代碼中上傳用的方法也需要改成這個uploadFile()方法才能正常使用。
//上傳文件
function uploadFile() {
//將上傳的多個文件放入formData中
var picFileList = $("#pic").get(0).files;
var formData = new FormData();
for(var i=0; i< picFileList.length; i++){
formData.append("file" , picFileList[i] );
}
//監聽事件
xhr.upload.addEventListener("progress", onprogress, false);
xhr.addEventListener("error", uploadFailed, false);//發送文件和表單自定義參數
xhr.open("POST", "upload");
//記得加入上傳數據formData
xhr.send(formData);
}
F. js文件上傳中遇到的知識點
在前端開發中，我們經常遇到上傳文件的需求，以前都是用到時再找資料，但總是感覺對這塊不熟，最近翻資料學習了一下，記錄一下。
本文中涉及的知識點有：FileList對象，Blob對象，File對象，URL對象、FormData對象等。
本文參考 網道 ，總結而來。另外，強烈推薦網道，可以去 網道的官方 看看，是阮一峰大神發起的項目，提供互聯網開發文檔，文檔非常全面易懂。
FileList對象，是一個像數組的對象，擁有length屬性和item()方法，同時，它的每一項都是File對象。
input 標簽，將type設為file，之後得到的files屬性就是一個FileList對象。
blob 對象表示1個二進制文件的數據內容。blob對象和arraybuffer區別是，blob對象用於操作二進制文件，arraybuffer用於操作內存。
blob 對象擁有2個屬性和1個方法，分別是size(單位是位元組)、type屬性和slice()方法。
File 對象是一種特殊的Blob 對象。它在繼承了size、type屬性外，還同時有name、lastModified、lastModifiedDate等幾個屬性。
FileList 對象中的每一項都是File 對象。
拿到File 對象之後就要進行操作，下面是操作。
URL.createObjectURL(file) 允許為File 對象創建一個臨時鏈接，
FileReader 對象的屬性和方法比較多，屬性中比較重要的是result，方法中比較重要的是
FileReader 對象的所有屬性和方法可以參考 這里 ,這里就不再列出來了。
在早期的互聯網時候，提交數據都是用表單。表單提交數據有些缺陷，例如無法校驗表單數據，會刷新整個頁面等。隨著Ajax的興起，頁面表單提交數據慢慢退出歷史舞台，但有時上傳文件時我們偶爾會用到表單提交數據。
在調用構造函數new FormData(form)構造formdata對象時需要傳入form節點，如果不傳入，則默認構建空表單。如果傳入，則按照key=value的時候構建表單。
可以看看效果圖
FormData 對象主要的方法有：
cavas壓縮圖片其實很簡單，無非就是幾個步驟：
1、選擇圖片，判斷圖片是否大於2M（用File對象的size進行判斷，size的單位是位元組）；
2、用FileReader對象讀取文件成base64,
3、然後創建Image對象，賦值src屬性，在Image對象載入完成的回調里創建cavas並繪制圖片(根據圖片是否大於2M動態調整畫布大小)；
4、將cavas轉成blob，拼在formdata中用ajax上傳。
這篇文章到這里也就結束了，這篇文章包含了一些瀏覽器中提供的對象，可以看到都是很簡單的內容。
G. js如何上傳文件
js採用File API 來上傳文件的。
File API 由一組 javaScript 對象以及事件構成。賦予開發人員操作在 <input type=」file」 … /> 文件選擇控制項中選定文件的能力。圖 1 展示了 File API 所有的 JavaScript 的組合關系。
File API 簡單示例
<body>
<h1>File API Demo</h1>
<p>
<!-- 用於文件上傳的表單元素 -->
<form name="demoForm" id="demoForm" method="post" enctype="multipart/form-data"
action="javascript: uploadAndSubmit();">
<p>Upload File: <input type="file" name="file" /></p>
<p><input type="submit" value="Submit" /></p>
</form>
<div>Progessing (in Bytes): <span id="bytesRead">
</span> / <span id="bytesTotal"></span>
</div>
</p>
</body>
運行效果：
H. 請高手給一個JS多文件上傳的例子（必須兼容IE）解決追加50分。請看補充。
一、Servlet實現文件上傳，需要添加第三方提供的jar包
下載地址：
1) commons-fileupload-1.2.2-bin.zip: 點擊打開鏈接
2) commons-io-2.3-bin.zip: 點擊打開鏈接
接著把這兩個jar包放到 lib文件夾下：
二：文件上傳的表單提交方式必須是POST方式，
編碼類型：enctype="multipart/form-data"，默認是 application/x-www-form-urlencoded
比如：
<form action="FileUpLoad"enctype="multipart/form-data"method="post">
三、舉例：
1.fileupload.jsp
<%@ page language="java" import="javautil*" pageEncoding="UTF-8"%>
<%
String path = requestgetContextPath();
String basePath = requestgetScheme()+"://"+requestgetServerName()+":"+requestgetServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'fileuploadjsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="stylescss">
-->
</head>
<body>
<!-- enctype 默認是 application/x-www-form-urlencoded -->
<form action="FileUpLoad" enctype="multipart/form-data" method="post" >
用戶名：<input type="text" name="usename"> <br/>
上傳文件：<input type="file" name="file1"><br/>
上傳文件： <input type="file" name="file2"><br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
2.實際處理文件上傳的 FileUpLoad.java
package comservletfileupload;
import javaioFile;
import javaio*;
import javaioIOException;
import javaioPrintWriter;
import javautilList;
import javaxservletServletException;
import javaxservlethttpHttpServlet;
import ;
import ;
import ;
import ;
import ;
import ;
/**
*
* @author Administrator
* 文件上傳
* 具體步驟：
* 1）獲得磁碟文件條目工廠 DiskFileItemFactory 要導包
* 2） 利用 request 獲取 真實路徑 ，供臨時文件存儲，和 最終文件存儲 ，這兩個存儲位置可不同，也可相同
* 3）對 DiskFileItemFactory 對象設置一些 屬性
* 4）高水平的API文件上傳處理 ServletFileUpload upload = new ServletFileUpload(factory);
* 目的是調用 parseRequest（request）方法 獲得 FileItem 集合list ，
*
* 5）在 FileItem 對象中 獲取信息， 遍歷， 判斷 表單提交過來的信息 是否是 普通文本信息 另做處理
* 6）
* 第一種 用第三方 提供的 itemwrite( new File(path,filename) ); 直接寫到磁碟上
* 第二種 手動處理
*
*/
public class FileUpLoad extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
requestsetCharacterEncoding("utf-8"); //設置編碼
//獲得磁碟文件條目工廠
DiskFileItemFactory factory = new DiskFileItemFactory();
//獲取文件需要上傳到的路徑
String path = requestgetRealPath("/upload");
//如果沒以下兩行設置的話，上傳大的 文件 會佔用 很多內存，
//設置暫時存放的 存儲室 , 這個存儲室，可以和 最終存儲文件 的目錄不同
/**
* 原理 它是先存到 暫時存儲室，然後在真正寫到 對應目錄的硬碟上，
* 按理來說 當上傳一個文件時，其實是上傳了兩份，第一個是以 tem 格式的
* 然後再將其真正寫到 對應目錄的硬碟上
*/
factorysetRepository(new File(path));
//設置 緩存的大小，當上傳文件的容量超過該緩存時，直接放到 暫時存儲室
factorysetSizeThreshold(1024*1024) ;
//高水平的API文件上傳處理
ServletFileUpload upload = new ServletFileUpload(factory);
try {
//可以上傳多個文件
List<FileItem> list = (List<FileItem>)uploadparseRequest(request);
for(FileItem item : list)
{
//獲取表單的屬性名字
String name = itemgetFieldName();
//如果獲取的 表單信息是普通的 文本 信息
if(itemisFormField())
{
//獲取用戶具體輸入的字元串 ，名字起得挺好，因為表單提交過來的是 字元串類型的
String value = itemgetString() ;
requestsetAttribute(name, value);
}
//對傳入的非 簡單的字元串進行處理 ，比如說二進制的 圖片，電影這些
else
{
/**
* 以下三步，主要獲取 上傳文件的名字
*/
//獲取路徑名
String value = itemgetName() ;
//索引到最後一個反斜杠
int start = valuelastIndexOf("\\");
//截取 上傳文件的 字元串名字，加1是 去掉反斜杠，
String filename = valuesubstring(start+1);
requestsetAttribute(name, filename);
//真正寫到磁碟上
//它拋出的異常 用exception 捕捉
//itemwrite( new File(path,filename) );//第三方提供的
//手動寫的
OutputStream out = new FileOutputStream(new File(path,filename));
InputStream in = itemgetInputStream() ;
int length = 0 ;
byte [] buf = new byte[1024] ;
Systemoutprintln("獲取上傳文件的總共的容量："+itemgetSize());
// inread(buf) 每次讀到的數據存放在 buf 數組中
while( (length = inread(buf) ) != -1)
{
//在 buf 數組中 取出數據 寫到 （輸出流）磁碟上
outwrite(buf, 0, length);
}
inclose();
outclose();
}
}
} catch (FileUploadException e) {
// TODO Auto-generated catch block
eprintStackTrace();
}
catch (Exception e) {
// TODO Auto-generated catch block
//eprintStackTrace();
}
requestgetRequestDispatcher("filedemojsp")forward(request, response);
}
}
System.out.println("獲取上傳文件的總共的容量："+item.getSize());
3.filedemo.jsp
<%@ page language="java" import="javautil*" pageEncoding="UTF-8"%>
<%
String path = requestgetContextPath();
String basePath = requestgetScheme()+"://"+requestgetServerName()+":"+requestgetServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'filedemojsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="stylescss">
-->
</head>
<body>
用戶名：${requestScopeusename } <br/>
文件：${requestScopefile1 }<br/>
${requestScopefile2 }<br/>
<!-- 把上傳的圖片顯示出來 -->
<img alt="go" src="upload/<%=(String)requestgetAttribute("file1")%> " />
</body>
</html>
4結果頁面：
以上就是本文的全部