html5文件上傳
⑴ 怎樣用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超大文件上傳如何實現
後端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();
}
⑶ html中怎麼上傳文件代碼
在HTML標准中，XMLHttpRequest對象被重新定義，被稱為「XMLHttpRequest Level 2」，其中包含了以下5個新特性：
1、支持上傳、下載位元組流，比如文件、blob以及表單數據。
2、增加了上傳、下載中的進度事件。
3、跨域請求的支持。
4、允許發送匿名請求（即不發送HTTP的Referer部分）。
5、允許設置請求的超時。
在這篇教程中，我們主要關注第一和第二項特性，尤其是第二項——它能夠提供我們想要的上傳進度。和之前的方案不同，這個方案並不要求伺服器作出特殊的設置，因此大家邊看教程就可以邊動手試試了。
上面圖示的就是我們能夠實現的內容：
1、顯示上傳的文件信息，比如文件名、類型、尺寸。
2、一個能夠顯示真實進度的進度條。
3、上傳的速度。
4、剩餘時間的估算。
5、已上傳的數據量。
6、上傳結束後伺服器返回的響應。
另外，憑借XMLHttpRequest，我們的上傳過程整個都是非同步的，因此用戶在上傳文件的時候，依然可以操作網頁當中的其它元素，並不需要專門等待上傳的完成。而在上傳結束後，我們能夠獲取伺服器發回的響應，因此整個上傳過程都顯得相當順理成章。
⑷ 如何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); } } }); }
⑸ html點擊button彈出選擇文件，上傳，這個怎麼實現
<divclass="buttonoperating-button"id="fileUpdate-button">從Excel中批量導入</div>
<formaction=""id="fileUpdate-form">
<inputtype="file"name="filename"id="fileUpdate-input"style="display:none"/>
</form>
<scripttype="text/javascript">
//上傳文件處理
varfileUpdate_button=document.getElementById("fileUpdate-button");
varfileUpdate_input=document.getElementById("fileUpdate-input");
varfileUpdate_form=document.getElementById("fileUpdate-form");
fileUpdate_button.onclick=function(){
fileUpdate_input.click();
}
fileUpdate_input.onchange=function(){
fileUpdate_form.submit();
}
</script>
⑹ ajax+html實現文件上傳有哪幾種方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>大文件切割上傳</title>
<link rel="stylesheet" href="">
<script>
function selfile(){
const LENGTH = 1024 * 1024 * 10;//每次上傳的大小
var file = document.getElementsByName('video')[0].files[0];//文件對象
var filename=document.getElementsByName('video')[0].files[0].name;
var totalSize = file.size;//文件總大小
var start = 0;//每次上傳的開始位元組
var end = start + LENGTH;//每次上傳的結尾位元組
var fd = null//創建表單數據對象
var blob = null;//二進制對象
var xhr = null;//xhr對象
while(start < totalSize){
fd = new FormData();//每一次需要重新創建
xhr = new XMLHttpRequest();//需要每次創建並設置參數
xhr.open('POST','upload.php',false);
blob = file.slice(start,end);//根據長度截取每次需要上傳的數據
fd.append('video',blob);//添加數據到fd對象中
fd.append('filename',filename); //獲取文件的名稱
xhr.send(fd);//將fd數據上傳
//重新設置開始和結尾
start = end;
end = start + LENGTH;
}
}
</script>
</head>
<body>
<h1>大文件切割上傳</h1>
<input type="file" name="video" onchange="selfile();" />
</body>
</html>
⑺ 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可以通過路徑上傳文件么
這個當然可以 只需要有合適的插件支持即可
⑽ 只使用html 怎樣實現 上傳文件
<!--STATUS OK-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>只使用html 怎樣實現 上傳文件？_網路知道 </title><link rel="alternate" type="application/rss+xml" title="「只使用html 怎樣實現 上傳文件？」的最新回答（RSS 2.0）" href="http://..com/q?ct=20&qid=68168077&pn=65535&rn=25&tn=rssqb">
<link href="/ikqb.css" rel="stylesheet" type="text/css">
</head>
<body><form action="http://localhost/UpLoadFile/Default.aspx" method="post" enctype ="multipart/form-data" runat="server">
<input id="File1" runat="server" name="UpLoadFile" type="file" />
<input type="submit" name="Button1" value="Button" id="Button1" />
</form>
</body>
</html>
然後保存到1.html 這個頁面時靜態頁面。但是只能提交到動態頁面去處理
後台頁面是asp.net。
處理的頁面時
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
if (Request.Files.Count >= 1)
{
HttpPostedFile postedFile = Request.Files[0];
string fileName, fileExtension;
fileName = System.IO.Path.GetFileName(postedFile.FileName); //文件名稱
if (fileName != "")
{
fileExtension = System.IO.Path.GetExtension(fileName); //上傳文件的擴展名
string new_filename = DateTime.Now.ToString("yyyyMMddHHmmss") + fileExtension; //給文件重新命名
//postedFile.FileName： 客戶端文件地址
//postedFile.ContentType.ToString()： 上傳的文件類型
//保存文件到文件夾，地址是當前頁面的同一級目錄下的files文件夾中
postedFile.SaveAs("D:\\file\\" + new_filename);
//.....可以把文件的相應信息保存到資料庫中去。
//Response.Write("success");
Response.Redirect("reslut.aspx?result=true");
}
else
{
//Response.Write("false");
Response.Redirect("reslut.aspx?result=false");
}
}
}
}