html5上傳文件代碼
㈠ 如何在手機瀏覽器中運用HTML5的文件API實現上傳多圖功能
Html5終於解決了上傳文件的同時顯示文件上傳進度的老問題。現在大部分的網站用Flash去實現這一功能，還有一些網站繼續採用Html <form>with enctype=multipart/form-data，但是需要修改伺服器端可用才能顯示給用戶文件上傳的進度。本質上你需要做的工作是在伺服器端接收一個文件時，你發送給它一個位元組流，所以你需要知道你已經接收到多少位元組並以某種方式傳達這些信息給客戶端瀏覽器，在這個過程一直在不斷的進行文件的上傳。這種方式運行的非常好，不像Flash上傳那這樣充滿了問題(特別是處理大文件上傳的時候)，然而這種方法是相當復雜的並且聽起來不容易理解，因為你本質上是接管了整個伺服器端的處理（獲取位元組流的時候）同時包括了在伺服器端實現multipart/form-data協議，伴隨一系列的其他事情。
使用Html5 上傳文件
XMLHttpRequest 在Html5 規范中已經有全新的變化，規定了XMLHttpRequest Level 2規范（目前最新版本）包含下列新的特性：
處理位元組流，例如作為上傳或者下載的File，Blob，FormData對象
上傳或者下載中的進度事件
跨站點請求
允許創建匿名請求
可以設置請求超時
在這篇文章中我們將能夠更清楚的看到#1和#2兩個特性。通常，上傳文件用XMLHttpRequest並且提供上傳進度信息給最終的用戶，需要注意的是這種方式解決了不需要伺服器端做任何改變，至少是目前處理multipart/form-data協議。所以伺服器端的處理邏輯保留不變，這使得開發者適應這種技術相當容易。
圖1：文件上傳畫面-准備上傳 圖2：顯示上傳完成畫面
注意：上面的圖片中，信息提示區域是提供給用戶的：
當前選中文件的信息
文件名
文件大小
文件類型
上傳完成多少的百分比進度條
上傳速度或者上傳帶寬
距離上傳完成大概還有多長時間
已上傳文件大小
伺服器端的響應
上面第6項或許看起來不重要，但事實上是相當重要的。因為我們用XMLHttpRequest，上傳發生在後台，頁面沒有發生跳轉等任何變化，所以對於你用它處理其他一些事情來說是一個非常好的特性。
Html5 Progress Event
對於Html5 Progress Events規范，Html5 Progess Events提供了下列與本次討論相關的信息
total - 總的位元組數
loaded - 到目前為止上傳的位元組數
lengthComputable - 可計算的已上傳位元組
請注意到我們需要用兩個信息去計算要顯示給用戶的其他所有信息。要計算出來其他的信息通過上面我們得到信息是相當容易的，但是那需要一些額外的代碼並且創建一個定時器。
Html5 Progress Event 應該是什麼
考慮到有一部分人想更好的提供給用戶所有的信息，所以Html5 Progress Event應該更好的滿足需要，因為它給瀏覽器供應商提供這些額外信息是相當簡單的，所以建議progress event應該修改成如下：
total - 總的位元組數
loaded - 到目前為止上傳的位元組數
lengthComputable - 可計算的已上傳位元組
transferSpeed long類型
timeRemaining javaScript 日期對象
Html5 上傳 用XMLHttpRequest
瀏覽器支持情況
支持這一特性的瀏覽器最低版本
Firefox 4.0 beta 6
Chrome 6
Safari 5.02
IE 9 Beta and Opera 10.62 不支持這一特性
簡單的示例
下面是一個完整的Html頁麵包含了實現文件上傳並帶有進度提示的JavaScript代碼，只是實現了基本的功能，感興趣的可以自己做擴展。 需要吧上傳介面修改成自己服務的。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
<title>Upload Files using XMLHttpRequest - Minimal</title>
<script type="text/javascript">
function fileSelected() {
var file = document.getElementById('fileToUpload').files[0];
if (file) {
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
}
}
function uploadFile() {
var fd = new FormData();
fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "upload.do");//修改成自己的介面
xhr.send(fd);
}
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
}
function uploadComplete(evt) {
/* 伺服器端返回響應時候觸發event事件*/
alert(evt.target.responseText);
}
function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}
function uploadCanceled(evt) {
alert("The upload has been canceled by the user or the browser dropped the connection.");
}
</script>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx">
<div class="row">
<label for="fileToUpload">Select a File to Upload</label><br />
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
<input type="button" onclick="uploadFile()" value="Upload" />
</div>
<div id="progressNumber"></div>
</form>
</body>
</html>
㈡ 誰有springmvc multipartfile html5 多文件上傳的示例代碼，急!急!急!
<formid="fileUpload"action="<%=basePath%>template/fileUpload.do"enctype="multipart/form-data"method="post"class="form-horizontal">
<divclass="modal-header">
<buttontype="button"class="close"data-dismiss="modal"
aria-hidden="true">×</button>
<h4class="modal-title"id="myModalLabel"style="color:#15428b;">上傳</h4>
</div>
<divclass="modal-body">
<inputtype="file"name="targetFile">
<inputtype="file"name="targetFile">
<inputtype="file"name="targetFile">
</div>
<divclass="modal-footer">
<buttonid="cancel"type="button"class="btnbtn-default"data-dismiss="modal">取消
</button>
<buttontype="button"class="btnbtn-primary"onclick="uploadFile();">確認</button>
</div>
</form>
@RequestMapping(value="/fileUpload.do")
publicStringfileUpload(Modelmodel,@RequestParamMultipartFile[]targetFile,HttpServletRequestrequest,PageSplit<BankVo>pageSplit){
try{
FileOperationsUtil.uploadFileMVC(request,targetFile,"/files/temporary");
model.addAttribute("msg","文件上傳成功！");
}catch(Exceptione){
logger.error(e);
model.addAttribute("msg","文件上傳失敗！");
}
returnthis.allButton(model,request,pageSplit);
}
publicstaticvoiploadFileMVC(HttpServletRequestrequest,MultipartFile[]fileSource,StringfileTarget){
for(MultipartFilefile:fileSource){
if(file.isEmpty()){
System.out.println("文件未上傳");
}else{
//如果用的是Tomcat伺服器，則文件會上傳到\%TOMCAT_HOME%\webapps\項目\fileTarget\文件夾中
StringrealPath=request.getSession().getServletContext().getRealPath(fileTarget);
//這里不必處理IO流關閉的問題，因為FileUtils.InputStreamToFile()方法內部會自動把用到的IO流關掉，我是看它的源碼才知道的
try{
FileUtils.InputStreamToFile(file.getInputStream(),newFile(realPath,file.getOriginalFilename()));
}catch(IOExceptione){
//TODOAuto-generatedcatchblock
e.printStackTrace();
}
}
}
}
㈢ 如何使用html5的FileApi上傳大文件
根本不需要那麼麻煩，裝一個擴展就實現了，代碼都不用寫。
AetherUpload-Laravel提供超大文件上傳的Laravel擴展包，支持分組配置、斷線續傳、秒傳等功能，簡單易用，滿足多數人的主流需求，無需編寫適配代碼，幾乎開箱即用。
㈣ HTML文件上傳
使用 input ，指定類型為 file ，來完成文件上傳功能。
多文件上傳需要在標簽上添加 mulyiple 屬性：
使用 accept 屬性來限制上傳文件的類型，當然這么做任然是不可靠的，還需要後端做進一步的判斷。
如果我們是用戶，當我們上傳了一張圖片，卻只顯示了幾個文字，是不是很不爽，那我們怎麼來實現預覽功能呢？
我們可以使用 FileReader 將圖像轉換為二進制字元串，然後添加 load 事件監聽，在文件上傳成功後獲取二進制字元串。
顯示文件上冊進度 來提高用戶體驗
FileReader 還有一個 progress 事件，表示當前上傳進度，配合HTML5的 progress 標簽，我們來模擬一下文件的上傳進度。
㈤ html5網頁背景圖手動上傳切換代碼怎麼寫
html5網頁背景圖手動上傳切換代碼這樣寫。
1、html5網頁背景圖手動棗含上傳切換代碼需要在網頁上點擊滑鼠右鍵查看網站源代碼。
2、找到css裡面的背景圖這一段代碼，查看背絕伏景凳宏笑圖路徑，通過ftp或者伺服器進行替換圖片即可。
㈥ 用HTML5方式上傳文件403錯誤啥意思
403錯誤，是一種在網站訪問過程中，常見的錯誤提示。
403錯誤，表示資源不可用。伺服器理解客戶的請求，但拒絕處理它。通常由於伺服器上文件或目錄的許可權設置導致的WEB訪問錯誤。
403.1錯誤是由於"執行"訪問被禁止而造成的，若試圖從目錄中執行 CGI、ISAPI 或其他可執行程序，但該目錄不允許執行程序時便會出現此種錯誤。
403.2錯誤是由於"讀取"訪問被禁止而造成的。導致此錯誤是由於沒有可用的默認網頁並且沒有對目錄啟用目錄瀏覽，或者要顯示的HTML網頁所駐留的目錄僅標記為"可執行"或"腳本"許可權。
403.3錯誤是由於"寫入"訪問被禁止而造成的，當試圖將文件上載到目錄或在目錄中修改文件，但該目錄不允許"寫"訪問時就會出現此種錯誤。
403.4錯誤是由於要求SSL而造成的，您必須在要查看的網頁的地址中使用"https"。
403.5錯誤是由於要求使用 128 位加密演算法的 Web瀏覽器而造成碼襪中的，如果您的瀏覽器不支持128位加密演算法就會出現這個錯誤，您可以連接微軟網站進行瀏覽器升級。
403.6錯誤是由於IP 地址被拒絕而造成的。如果伺服器中有不能訪問該站點的 IP 地址列表，並且您使用的 IP 地址在該列表中時您就會返回這條錯誤信息。
403.7錯誤是因為要求客戶證書，當需要訪問的資源要求瀏覽器擁有伺服器能夠識別的安全套接字層(SSL) 客戶證書時會返回此種錯誤。
403.8錯誤是由於禁止站點訪問而造成的，若伺服器中有不能訪問該站點的 DNS 名稱列表，而您使用的 DNS 名稱在列表中時就會返回此種信息。請注意區別403.6與403.8錯誤。
403.9錯誤好腔是由於連接的用戶過多而造成的，由於Web 伺服器很忙，因通訊量過多而無法處理請求時便會返回這條錯遲山誤。
403.10錯誤是由於無效配置而導致的錯誤，當您試圖從目錄中執行 CGI、ISAPI 或其他可執行程序，但該目錄不允許執行程序時便會返回這條錯誤。
403.11錯誤是由於密碼更改而導致無權查看頁面。
403.12錯誤是由於映射器拒絕訪問而造成的。若要查看的網頁要求使用有效的客戶證書，而您的客戶證書映射沒有許可權訪問該Web站點時就會返回映射器拒絕訪問的錯誤。
403.13錯誤是由於需要查看的網頁要求使用有效的客戶證書而使用的客戶證書已經被吊銷，或者無法確定證書是否已吊銷造成的。
403.14錯誤[2] Web 伺服器被配置為不列出此目錄的內容，拒絕目錄列表。
403.15錯誤是由於客戶訪問許可過多而造成的，當伺服器超出其客戶訪問許可限制時會返回此條錯誤。
403.16錯誤是由於客戶證書不可信或者無效而造成的。
403.17錯誤是由於客戶證書已經到期或者尚未生效而造成的。
㈦ 怎樣用html5實現拖拽上傳文件
，首先要判斷拖入的文件是否符合要求，包括圖片類型、大小等，然後獲取本地圖片信息，實現預覽，最後上傳。
$(function(){
...接上部分
var box = document.getElementById('drop_area'); //拖拽區域
box.addEventListener("drop",function(e){
e.preventDefault(); //取消默認瀏覽器拖拽效果
var fileList = e.dataTransfer.files; //獲取文件對象
//檢測是否是拖拽文件到頁面的操作
if(fileList.length == 0){
return false;
}
//檢測文件是不是圖片
if(fileList[0].type.indexOf('image') === -1){
alert("您拖的不是圖片！");
return false;
}
//拖拉圖片到瀏覽器，可以實現預覽功能
var img = window.webkitURL.createObjectURL(fileList[0]);
var filename = fileList[0].name; //圖片名稱
var filesize = Math.floor((fileList[0].size)/1024);
if(filesize>500){
alert("上傳大小不能超過500K.");
return false;
}
var str = "<img src='"+img+"'><p>圖片名稱："+filename+"</p><p>大小："+filesize+"KB</p>";
$("#preview").html(str);
//上傳
xhr = new XMLHttpRequest();
xhr.open("post", "upload.php", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
var fd = new FormData();
fd.append('mypic', fileList[0]);
xhr.send(fd);
},false);
});
㈧ C# .NET從操作系統直接拖拽文件，並上傳到伺服器。求html5具體代碼
這個和html5 沒有關系， 和瀏覽器有關系， 可以給你兩穗檔嘩個方向，
第一： 如果你是使用的IE系列的瀏覽器， 那麼只有一種方式，編猜行寫一個Active X控制項，這個可以完成，但是比較復雜， 不過windows 的all in one framework裡面有用C#編寫Active X 控制項的例子，你可以參考一下， 如果能用..net 開發的話，這個拖拽功能網上一大片的代碼，自己搜索一下，主蠢絕要是要搞定那個Active X控制項。也可以用C++ 來編寫， 這個有很多的模板。
第二， 如果你是用IE之外的，如火狐， chorme之類的， 你可以參考一下 網路 google 等寫的js代碼， 這些搜索引擎的圖片搜索裡面有一個以圖找圖， 這個是用js實現的， 好像叫做 dragdrop.js的，你打開這個頁面就能看到這個js ，自己下載吧
㈨ 用HTML5方式上傳文件403錯誤啥意思
http狀態碼 403 （禁止） 伺服器拒絕請求。
常有的狀態代碼表示請求可能出錯，妨礙了伺服器的處理。
http狀態碼 400 （錯誤請求） 伺服器不理解請求的語法。
http狀態碼 401 （未授權） 請求要求身份驗證。 對於需要登錄的網頁，伺服器可能返回此響應。
http狀態碼 404 （未找到） 伺服器找不到請求的網頁。
http狀態碼 405 （方法禁用） 禁用請求中指定的方法。
http狀態碼 406 （不接受） 無法使用請求的內容特性響應請求的網頁。
http狀態碼 408 （請求超時） 伺服器等候請求時發生超時。
http狀態碼 409 （沖突） 伺服器在完成請求時發生沖突。 伺服器必須在響應中包含有關沖突的信息。
http狀態碼 410 （已刪除） 如果禪絕亮請求的資源已永久刪除，伺服器就會返回此響應。
http狀態碼 411 （需要有效長度） 伺服器不接受不含有效內容長度標頭欄位的請求。
http狀態碼 412 （未滿足前提條件） 伺服器未滿足請求者在請求中設置的其中一個前提條件。
http狀態碼 413 （請求實體過大） 伺服器無法處理請求，因為請求實體過大，賀寬超出伺服器的處理能力。
http狀態碼 414 （請求的 URI 過長） 請求的 URI（通常為網址）過長，伺服器無法處理。
http狀態碼宏襲 415 （不支持的媒體類型） 請求的格式不受請求頁面的支持。
㈩ html5文件上傳實現進度條需要後端嗎
不需要後端的，前端自己判斷，代碼如下：
function uploadFile(){
// 獲取上傳文件，放到 formData對象裡面
var pic = $("#myhead").get(0).files[0];
var formData = new FormData();
formData.append("file" , pic);
$.ajax({
type: "POST",
url: "upload",
data: formData ,//這里上傳的數據使用了formData 對象
processData : false,
//必須false才會自動加上正確的Content-Type
contentType : false ,
//這里我們先拿到jQuery產生的 XMLHttpRequest對象，為其增加 progress 事件綁定，然後再返回交給ajax使用
xhr: function(){
var xhr = $.ajaxSettings.xhr();
if(onprogress && xhr.upload) {
xhr.upload.addEventListener("progress" , onprogress, false);
return xhr;
}
}
});