當前位置:首頁 » 文件傳輸 » html5上傳文件
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

html5上傳文件

發布時間: 2022-02-22 08:27:10

① 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,JS怎樣上傳文件

不寫標簽讓用戶選擇文件,用戶要在那裡找選擇上傳文件的入口?

JS上傳文件很多,某度搜索「JS上傳文件示例」就很多了。

例如我自己之前寫的:

③ HTML5如何上傳本地文件並播放 想用button打開本地文件在video標簽中進行播放,如何實現

不說怎麼實現,
你這個方案在網站設計中就是一個大忌,
「用戶輸入的東西都是邪惡的」,相信你的老師跟你說過這句話吧,
如果用戶上傳的是掛馬的文件,你的網站就會很危險,
一般的網站都會對用戶上傳的文件夾做多重限制,一般都不會給執行許可權。

④ 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;
}
}
});

⑤ 用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分割上傳實現超大文件無插件網頁上傳

//代碼不支持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); } } }); }