㈠ 如何html5分割上傳實現超大文件無插件網頁上傳
//代碼不支持IE 因為IE對HTML5支持不好$("#file").change(function(event) { var file = $("#file")[0].files[0]; PostFile(file,0); });function PostFile(file,i){ var name = file.name, //文件名 size = file.size, //總大小shardSize = 2 * 1024 * 1024, shardSize = 2 * 1024 * 1024,//以2MB為一個分片 shardCount = Math.ceil(size / shardSize); //總片數 if(i >= shardCount){ return; } //計算每一片的起始與結束位置 var start = i * shardSize, end = Math.min(size, start + shardSize); //構造一個表單,FormData是HTML5新增的 var form = new FormData(); form.append("data", file.slice(start,end)); //slice方法用於切出文件的一部分 form.append("lastModified", file.lastModified); //slice方法用於切出文件的一部分 form.append("name", name); form.append("total", shardCount); //總片數 form.append("index", i + 1); //當前是第幾片 //Ajax提交 $.ajax({ url: "/test/AjaxFile", type: "POST", data: form, async: true, //非同步 processData: false, //很重要,告訴jquery不要對form進行處理 contentType: false, //很重要,指定為false才能形成正確的Content-Type success: function(data){ if(data){ i = data++; var num = Math.ceil(i*100 / shardCount); $("#output").text(num+'%'); PostFile(file,i); } } }); }
㈡ html5超大文件上傳如何實現
後端code
<?php
class Upload{
private $filepath = './upload'; //上傳目錄
private $tmpPath; //PHP文件臨時目錄
private $blobNum; //第幾個文件塊
private $totalBlobNum; //文件塊總數
private $fileName; //文件名
private $md5FileName;
public function __construct($tmpPath,$blobNum,$totalBlobNum,$fileName, $md5FileName){
$this->tmpPath = $tmpPath;
$this->blobNum = $blobNum;
$this->totalBlobNum = $totalBlobNum;
$this->fileName = $this->createName($fileName, $md5FileName);
$this->moveFile();
$this->fileMerge();
}
㈢ 用HTML5方式上傳文件403錯誤啥意思
403 Forbidden 解釋:
Forbidden
You don't have permission to access / on this server.
403 Forbidden 是HTTP協議中的一個狀態碼(Status Code)。可以簡單的理解為沒有許可權訪問此站點。
你說上傳文件時出現403錯誤,估計可能原因有以下:
在不允許寫/創建文件的目錄中執行了創建/寫文件操作
你的網頁腳本文件在當前目錄下沒有執行許可權
㈣ jquery html5怎樣把文件上傳到文件夾
樓主你好!根據你的描述,讓我來給你回答!
var fd = new FormData(document.getElementById("fileinfo"));
fd.append("CustomField", "This is some extra data");
$.ajax({
url: "stash.php",
type: "POST",
data: fd,
processData: false, // tell jQuery not to process the data
contentType: false // tell jQuery not to set contentType
});
希望能幫到你,如果滿意,請記得採納哦~~~
㈤ 用html5進行多文件上傳的時候是一次性把所有已選擇文件傳到後台么
html傳多個文件對前端來說是一股腦的提交,但是其實主要還是看後台是如何接收的。後台可以設置一次性接收的文件數據,文件大小等等。其實就和平時的上傳下載是一樣的。
以下載為例:下載的時候,比如用迅雷下載,你的本機是否可以選擇並行下載、逐個下載還可以停止、繼續下載。同樣的,上傳也是一個類似的過程,主要依靠伺服器代碼進行管理設置。本質上,是兩個計算機之間相互傳遞數據流而已。
當然,在默認的時候,伺服器是接收多個文件的,比如javaweb中struts2接收文件默認是接收完所有文件然後再操作的。
㈥ 怎樣用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);
});
㈦ html5可以通過路徑上傳文件么
這個當然可以 只需要有合適的插件支持即可
㈧ 如何使用html5的FileApi上傳大文件
根本不需要那麼麻煩,裝一個擴展就實現了,代碼都不用寫。
AetherUpload-Laravel提供超大文件上傳的Laravel擴展包,支持分組配置、斷線續傳、秒傳等功能,簡單易用,滿足多數人的主流需求,無需編寫適配代碼,幾乎開箱即用。
㈨ 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;
}
}
});