㈠ html+js，求個多圖片上傳預覽的代碼
這個問題已經困擾我好多年了，html+js不能實現，網上大多是ajax或者flash
㈡ 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>
㈢ html頁面上 如何上傳文件
超文本標記語言或超文本鏈接標示語言（標准通用標記語言下的一個應用）HTML（HyperText Mark-up Language）是一種製作萬維網頁面的標准語言，是萬維網瀏覽器使用的一種語言，
它消除了不同計算機之間信息交流的障礙。
它是目前網路上應用最為廣泛的語言，也是構成網頁文檔的主要語言。
HTML文件是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。HTML文件的結構包括頭部（Head）、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內容。
㈣ 求助,html頁面里，寫多文件上傳,在controller進行後台處理文件數據
」及時響應數據「這句話沒理解錯的話應該就是非同步更新的意思吧！
用MVC3有兩個個好東西你一定要知道的：一個是AJAX.BegionForm,還有一個AJAX.ActionLink這兩個是MVC3中提供的非同步刷新處理數據的兩個小玩意，可以學習下；
根據樓主的需求，當用戶輸入的時候就需要響應數據，那以上的兩個方法都不行；因為樓主的需求是需要觸發JS事件的，所以可以考慮用JS實現的非同步提交，或者JQ;
下面JS代碼：
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url, cfunc) {
//根據瀏覽器的不同選擇初始化
if (window.XMLHttpRequest) { // Mozilla, Safari,...
xmlhttp = new XMLHttpRequest();
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // 判斷各種瀏覽器
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP.4.0");
} catch (e) {
alert("頁面載入錯誤！");
return;
}
}
}
}
else {
alert("頁面載入錯誤！");
return;
}
//End
xmlhttp.onreadystatechange = cfunc;
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
// 使用 Callback 函數
function myFunction(id) {
loadXMLDoc("./AJAX/TimeTxt.cshtml?ID="+id, function () { //此地址為Action的地址，就是C層控制器的URl，這里需要根據你的需求來改，ID實際上就是傳入的數據，ID在C層獲取就行業務邏輯操作。
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;//此為響應返回的數據把他放在一個ID為myDiv的div裡面，比如return 「hello」; div裡面則顯示hello.
}
});
}
</script>
<input type="text" onblur="myFunction(this.value)" name="id" value="" /> //這句話的意思就是當用戶輸入完成時離開text的時候執行JS事件
<div id="myDiv"></div>
基本上就是這樣了，不知道符合你的需求不！
㈤ 求html多文件上傳代碼 可參考以下代碼
從技術角度看，你只需要在input控制項中標注multiple標簽就夠了
以下就是演示代碼：
<!DOCTYPE html>
<html>
<head>
<title>
Solution 4-5: Sending multiple files
</title>
</head>
<body>
<form id="myForm">
<fieldset>
<legend>Solution 4-5: Sending multiple files</legend>
<label>Upload one or more files:</label>
<input type="file" name="multipleFileUpload" multiple />
</fieldset>
</form>
</body>
</html>
重要心得
用戶選擇的多個文件傳遞到服務端後將會被服務端的編程語言去處理的。有些編程語言，比如PHP需要你為name標簽的字元添加方括弧來支持傳輸多個文件。
1<inputname="filesUploaded[]"type="file"multiple/>
㈥ html有關多個文件上傳
//改好了沒問題..加文件試試
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function imgChange(next) {
if(next != null)
document.getElementById(next).style.display = "";
}
function validate() {
var phos = 2;
for(i = 0; i < 2; i++) {
if($("del" + i).checked == true)
phos--;
}
for(i = 0; i < 4; i++) {
if($("photoFile" + i).value != "")
phos++;
}
if(phos > 4) {
alert("圖片太多,您最多總共可以保存4張圖片!");
return false;
}
return true;
}
</script>
<form action="/addTrade.do" method="post" enctype="multipart/form-data" onSubmit="return validate()">
<!-- 上傳照片-->
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0"
summary="upload pictures">
<tr id="tr_photoFile0">
<td width="119" align="right" class="title">
上傳照片：
</td>
<td width="499">
<input type="file" name="photoFile0" id="photoFile0"
size="40" onChange='return imgChange("tr_photoFile1")' />
</td>
</tr>
<tr id="tr_photoFile1" style="display: none;">
<td>
</td>
<td>
<input type="file" name="photoFile1" id="photoFile1"
onChange='return imgChange("tr_photoFile2")' size="40" />
</td>
</tr>
<tr id="tr_photoFile2" style="display: none;">
<td>
</td>
<td>
<input type="file" name="photoFile2" id="photoFile2"
onChange='return imgChange("tr_photoFile3")' size="40" />
</td>
</tr>
<tr id="tr_photoFile3" style="display: none;">
<td>
</td>
<td>
<input type="file" name="photoFile3" id="photoFile3"
onChange='return imgChange(null)' size="40" />
</td>
</tr>
</table>
</div>
<!--/ 上傳照片-->
<input name="submit" type="submit" value="提交"/>
</form>
㈦ 誰有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超大文件上傳如何實現
後端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，我們的上傳過程整個都是非同步的，因此用戶在上傳文件的時候，依然可以操作網頁當中的其它元素，並不需要專門等待上傳的完成。而在上傳結束後，我們能夠獲取伺服器發回的響應，因此整個上傳過程都顯得相當順理成章。
㈩ 只使用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");
}
}
}
}