當前位置:首頁 » 文件管理 » htmlform文件上傳

htmlform文件上傳

發布時間: 2022-12-06 16:50:43

⑴ html設置文件上傳類型,如何設置在選擇文件的時候只能選圖片

可以設置一下html中的accept屬性以實現上傳文件類型的篩選,accept 屬性只能與 <input type="file"> 配合使用。它規定能夠通過文件上傳進行提交的文件類型。

工具原料:編輯器、瀏覽器

1、設置一個文件上傳選項,刪選一下只能上傳圖片或者詳細的限制只能上傳圖片的某些格式,代碼如下:

<!DOCTYPEhtml>
<html>
<body>

<formaction="demo_form.asp">
<inputtype="file"name="pic"accept="image/*">
<inputtype="submit">
</form>

<p><strong>注釋:</strong>InternetExplorer9以及更早的版本不支持input標簽的accept屬性。</p>
<p><strong>注釋:</strong>鑒於安全考慮,該例不允許您上傳文件。</p>

</body>
</html>

2、運行的結果是只能上傳圖片不能上傳其他的文件,在彈出的上傳選擇對話框中也會值顯示圖片,如下圖:

⑵ form表單提交上傳圖片

上傳圖片我首先想到的是利用這個插件,webupload LUploade這類插件大多支持圖片預覽,斷點/分片上傳,功能比較豐富,但是由於後台原因我需要利用form表單進行上傳圖片,所以就整理了一下關於圖片上傳的幾種方式:

1.form表單上傳圖片

表單上傳遇到了一下幾個問題:

(1)進行表單提交時,無法獲取返回值

(2)表單提交會進行頁面刷新

為了解決這個問題,我想到了利用iframe進行解決,在form元素上直接添加target屬性,使提交跳轉頁面直接跳轉到iframe中,阻止頁面進行跳轉,返回結果也會呈現在 iframe框架之中,我們可以去除iframe中的返回值,前提是必須在同一個域名下。這樣我們獲取返回值就會擁有局限性。還好我反降了另外一種方法,jquery中jqueryj.form.js表單提交插件。我們可以直接這樣來獲取表單返回值。

form表單提交注意事項:

(1).提供form表單,method必須是post。

(2).form表單的enctype必須是multipart/form-data。

javascript學習交流群:4538335s's's's'sssssssssssssss54

enctype 屬性規定在發送到伺服器之前應該如何對表單數據進行編碼。默認地,表單數據會編碼為 "application/x-www-form-urlencoded"。就是說,在發送到伺服器之前,所有字元都會進行編碼。HTML表單如何打包數據文件是由enctype這個屬性決定的。enctype有以下幾種取值:

application/x-www-form-urlencoded:在發送前編碼所有字元(默認)(空格被編碼為』+』,特殊字元被編碼為ASCII十六進制字元)。

multipart/form-data:不對字元編碼。在使用包含文件上傳控制項的表單時,必須使用該值。

text/plain:空格轉換為 「+」 加號,但不對特殊字元編碼。

默認enctype=application/x-www-form-urlencoded,所以表單的內容會按URL規則編碼,然後根據表單的提交方法:

method=』get』 編碼後的表單內容附加在請求連接後,

method=』post』 編碼後的表單內容作為post請求的正文內容。

(3).提供input type="file"上傳輸入域。

2.ajax無刷新上傳 

ajax和FormData可實現頁面無刷新的文件上傳效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的

FormData介面。通過FormData對象可以更靈活方便的發送表單數據,因為可以獨立於表單使用。如果你把表單的編碼類型設置為multipart/form-data ,則通過FormData傳輸的數據格式和表單通過submit()方法傳輸的數據格式相同。

ajax無刷新上傳

Ajax無刷新上傳的方式,本質上與表單上傳無異,只是把表單里的內容提出來採用ajax提交,並且由前端決定請求結果回傳後的展示結果。

3.各類插件的使用:

webupload LUPloader

⑶ HTML選擇不同選項上傳到不同的文件夾

是為這個選項框添加一個javascript事件函數,對選項框作出選擇就會觸發事件,在事件函數里根據選項的不同決定跳轉的地址。

是選項框選擇時先不跳轉,點擊提交的時候才進行跳轉,這個需要在提交按鈕上添加一個提交前事件,同樣是javascript,在javascript函數里實現跳轉。

第三種是動態web,在form里指定一個action,跳轉到一個處理頁面上,在這個頁上通過獲取request的請求參數來決定跳轉到哪個地址。

HTML的英文全稱是 Hyper Text Markup Language,即超文本標記語言。

HTML是由Web的發明者Tim BernersLee和同事 Daniel WConnolly於1990年創立的一種標記語言,它是標准通用化標記語言SGML的應用。

用HTML編寫的超文本文檔稱為HTML文檔,它能獨立於各種操作系統平台UNIX,Windows等,使用HTML,將所需要表達的信息按某種規則寫成HTML文件,通過專用的瀏覽器來識別,並將這些HTML文件翻譯成可以識別的信息,即現在所見到的網頁。

⑷ html上傳文件代碼

在HTML標准中,XMLHttpRequest對象被重新定義,被稱為「XMLHttpRequest Level 2」,其中包含了以下5個新特性:

1、支持上傳、下載位元組流,比如文件、blob以及表單數據。

2、增加了上傳、下載中的進度事件。

3、跨域請求的支持。

4、允許發送匿名請求(即不發送HTTP的Referer部分)。

5、允許設置請求的超時。

    在這篇教程中,我們主要關注第一和第二項特性,尤其是第二項——它能夠提供我們想要的上傳進度。和之前的方案不同,這個方案並不要求伺服器作出特殊的設置,因此大家邊看教程就可以邊動手試試了。

    上面圖示的就是我們能夠實現的內容:

    1、顯示上傳的文件信息,比如文件名、類型、尺寸。

    2、一個能夠顯示真實進度的進度條。

    3、上傳的速度。

    4、剩餘時間的估算。

    5、已上傳的數據量。

    6、上傳結束後伺服器返回的響應。

    另外,憑借XMLHttpRequest,我們的上傳過程整個都是非同步的,因此用戶在上傳文件的時候,依然可以操作網頁當中的其它元素,並不需要專門等待上傳的完成。而在上傳結束後,我們能夠獲取伺服器發回的響應,因此整個上傳過程都顯得相當順理成章。

⑸ html 表單上傳圖片

  1. 使用表單中的文件域(<input type="file".../>)控制項可以上傳文件。

  2. 打開DreamWeaver,這里使用的版本是CS6,新建一個php文件。

  3. 保存到網站目錄下,命名為upload.php。

  4. 在代碼中插入一個表單

  5. 對話框中,操作留空,方法選擇「post」,編碼類型輸入「multipart/form-data」,名稱命名為「upload_form」,其中編碼類型必須為「multipart/form-data」。點擊確定,產生的代碼如下:

    <body>

    <form action="" method="post" enctype="multipart/form-data" name="upload_form"></form>

    </body>

  6. 接下來在form中插入一個標簽控制項、一個文件域控制項和一個上傳按鈕。

    結果如下:

    <body>

    <form action="" method="post" enctype="multipart/form-data" name="upload_form">

    <label>選擇圖片文件</label>

    <input name="imgfile" type="file" accept="image/gif, image/jpeg"/>

    <input name="upload" type="submit" value="上傳" />

    </form>

    </body>

  7. 不同的瀏覽器,對於文件域控制項的顯示不同,IE9瀏覽器和FireFox中的預覽效果都要看一下

  8. 代碼中,重要的是名為imgfile的文件域控制項,type屬性為「file」,表示這是一個文件域控制項。

    accept屬性表示點擊「瀏覽...」按鈕時,彈出的打開對話框中的文件類型。accept="image/gif, image/jpeg"表示我們只想在文件打開對話框中顯示後綴名為「gif」和「jpg」、「jpeg」的文件。對於此屬性,有些瀏覽器並不支持。比如在IE9中,此屬性不起任何作用。在chrome中,此屬性起作用。

  9. 如果想支持所有的圖像文件,accept值可以設置為「image/*」,在chrome中,文件類型顯示

  10. 好了,html代碼就寫完了,因為action="",表示點擊上傳按鈕時,將表單提交給自身,因此,我們還要添加接收表單的處理代碼。

    代碼如下:

    <?php

    if (isset($_FILES['imgfile'])

    && is_uploaded_file($_FILES['imgfile']['tmp_name']))

    {

    $imgFile = $_FILES['imgfile'];

    $imgFileName = $imgFile['name'];

    $imgType = $imgFile['type'];

    $imgSize = $imgFile['size'];

    $imgTmpFile = $imgFile['tmp_name'];

    move_uploaded_file($imgTmpFile, 'upfile/'.$imgFileName);

    $validType = false;

    $upRes = $imgFile['error'];

    if ($upRes == 0)

    {

    if ($imgType == 'image/jpeg'

    || $imgType == 'image/png'

    || $imgType == 'image/gif')

    {

    $validType = true;

    }

    if ($validType)

    {

    $strPrompt = sprintf("文件%s上傳成功<br>"

    . "文件大小: %s位元組<br>"

    . "<img src='upfile/%s'>"

    , $imgFileName, $imgSize, $imgFileName

    );

    echo $strPrompt;

    }

    }

    }

    ?>

  11. 代碼分析:

    $_FILES是一個數組變數,用於保存上傳後的文件信息。

    $_FILES['imgfile']表示文件域名稱為'imgfile'的控制項提交伺服器後,上傳的文件的信息。

    一個上傳的文件,有以下屬性信息:

    'name': 上傳的文件在客戶端的名稱。

    'type': 文件的 MIME 類型,例如"image/jpeg"。

    'size': 已上傳文件的大小,單位為位元組。

    'tmp_name':上傳時,在伺服器端,會把上傳的文件保存到一個臨時文件夾中,可以通過此屬性得到臨時文件名。

    'error':文件在上傳過程中的錯誤代碼。如果上傳成功,此值為0,其它值的意義如下:

    1:超過了php.ini中設置的上傳文件大小。

    2:超過了MAX_FILE_SIZE選項指定的文件大小。

    3:文件只有部分被上傳。

    4:文件未被上傳。

    5:上傳文件大小為0。

    代碼中首先判斷$_FILES['imgfile']變數是否存在,如果存在,並且$_FILES['imgfile']['tmp_name']變數所指文件被上傳了,判斷error屬性,如果屬性為0,把上傳後的圖像從臨時文件夾移到upfile文件夾中,顯示上傳文件的信息,並顯示上傳後的圖像。

    如果error值不為0,表示上傳失敗,顯示失敗信息。

  12. 完成的代碼如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.mobiletrain.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="www.mobiletrain.org">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>上傳圖片文件</title>

    </head>

    <?php

    if (isset($_FILES['imgfile'])

    && is_uploaded_file($_FILES['imgfile']['tmp_name']))

    {

    $imgFile = $_FILES['imgfile'];

    $upErr = $imgFile['error'];

    if ($upErr == 0)

    {

    $imgType = $imgFile['type']; //文件類型。

    /* 判斷文件類型,這個例子里僅支持jpg和gif類型的圖片文件。*/

    if ($imgType == 'image/jpeg'

    || $imgType == 'image/gif')

    {

    $imgFileName = $imgFile['name'];

    $imgSize = $imgFile['size'];

    $imgTmpFile = $imgFile['tmp_name'];

    /* 將文件從臨時文件夾移到上傳文件夾中。*/

    move_uploaded_file($imgTmpFile, 'upfile/'.$imgFileName);

    /*顯示上傳後的文件的信息。*/

    $strPrompt = sprintf("文件%s上傳成功<br>"

    . "文件大小: %s位元組<br>"

    . "<img src='upfile/%s'>"

    , $imgFileName, $imgSize, $imgFileName

    );

    echo $strPrompt;

    }

    else

    {

    echo "請選擇jpg或gif文件,不支持其它類型的文件。";

    }

    }

    else

    {

    echo "文件上傳失敗。<br>";

    switch ($upErr)

    {

    case 1:

    echo "超過了php.ini中設置的上傳文件大小。";

    break;

    case 2:

    echo "超過了MAX_FILE_SIZE選項指定的文件大小。";

    break;

    case 3:

    echo "文件只有部分被上傳。";

    break;

    case 4:

    echo "文件未被上傳。";

    break;

    case 5:

    echo "上傳文件大小為0";

    break;

    }

    }

    }

    else

    {

    /*顯示表單。*/

    ?>

    <body>

    <form action="" method="post" enctype="multipart/form-data" name="upload_form">

    <label>選擇圖片文件</label>

    <input name="imgfile" type="file" accept="image/gif, image/jpeg"/>

    <input name="upload" type="submit" value="上傳" />

    </form>

    </body>

    <?php

    }

    ?>

    </html>

⑹ html網頁上傳文件的完整代碼

html前端代碼:

<html>
<body>
<formaction="upload-file.php"method="post"
enctype="multipart/form-data">
<labelfor="file">文件名:</label>
<inputtype="file"name="file"id="file"/>
<br/>
<inputtype="submit"name="submit"value="提交"/>
</form>
</body>
</html>

如果是ubuntu上部署apache2,你應該是php開發者吧,action="upload-file.php
" 中的upload-file.php改為你自己的後端php接收文件的邏輯代碼即可!

這里提供upload-file.php後端接收文件的代碼:

<?php
if($_FILES["file"]["error"]>0)
{
echo"錯誤:".$_FILES["file"]["error"]."<br/>";
}
else
{
echo"文件名:".$_FILES["file"]["name"]."<br/>";
echo"類型:".$_FILES["file"]["type"]."<br/>";
echo"大小:".($_FILES["file"]["size"]/1024)."Kb<br/>";
}
if(file_exists("upload/".$_FILES["file"]["name"]))
{
echo$_FILES["file"]["name"]."文件已經存在.";
}
else
{
move_uploaded_file($_FILES["file"]["tmp_name"],
"upload/".$_FILES["file"]["name"]);
echo"文件已經被存儲到:"."upload/".$_FILES["file"]["name"];
}
?>

代碼很簡單,我相信你應該能看懂,這里的 文件夾 upload/ 需要你自己手動創建,請確保文件路徑正取!


我也是web開發者,有問題可繼續追問我!或是加我工作室QQ(540144097),在群里向我提問!有問必答,望採納......

⑺ HTML表單的POST上傳方式

是<form></form>之間的內容,例如:<form action="/search" name="search-form" method="post" id="search-form" class="search-form">,其中method就是上傳的方式。

⑻ 跪求高手 在html中 用form上傳一個文件到伺服器 然後用php讀取出來。html文件和php文件分別怎麼寫謝謝啦

告訴你一個思路,
簡單歸納如下三個部分即可實現
.
////存儲的部分
<?
if($_FILE[文件名])
{
$destFilename=指定目錄/文件名;
($_FILE[文件名],$destFilename);
}
?>
<?
//php讀出部分,
這里可以有多個.如果是圖片文件的,可以直接使用HTML的<IMG
src=相對URI圖片路徑>標記
//如果是其它如WORD/EXCEL/PDF這類的.你就要用一個<IFRAME
src=文件
高/寬設定>
?>
//////////上傳的部分
<form
method="POST"
>
<input
type=file
name=文件變數>
<input
type=submit>
</form>

⑼ 如何成功上傳HTML文件

HTML中使用input type="file"上傳文件時,代碼中只能得到文件的名稱,而有些特殊的需要要求得到上傳文件的絕對路徑,為此採用Javascript實現得到文件的絕對路徑。
<form name="thisform" method="post"
action="<%=request.getContextPath()%>/movieManage.do" id="thisform" enctype="multipart/form-data">

<input type="file" name="theFile" onchange="document.getElementById('theFilePath').value=this.value"/>

<input type="hidden" id="theFilePath" name="theFilePath" value="">

</form>

注意:要有enctype="multipart/form-data"

Action代碼:
String filePath = request.getParameter("theFilePath");

filePath既是上傳文件的絕對路徑。

瀏覽器中測試:
Firefox和IE中可以得到絕對路徑。

⑽ html表單怎麼上傳圖片

html表單這樣上傳圖片:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.mobiletrain.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="www.mobiletrain.org">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>上傳圖片</title>

</head>

熱點內容
如何改奇跡伺服器名字 發布:2023-02-09 04:46:42 瀏覽:324
免費e信賬號和密碼是什麼 發布:2023-02-09 04:43:56 瀏覽:1000
資料庫論文題目 發布:2023-02-09 04:41:18 瀏覽:691
途樂哪個配置有360 發布:2023-02-09 04:40:22 瀏覽:779
對象存儲sdk 發布:2023-02-09 04:36:19 瀏覽:235
預算權的配置有哪些 發布:2023-02-09 04:34:58 瀏覽:490
分段上傳方式 發布:2023-02-09 04:34:14 瀏覽:587
iis搭建php伺服器搭建 發布:2023-02-09 04:34:09 瀏覽:552
蟻群演算法原理 發布:2023-02-09 04:31:20 瀏覽:408
批量上傳文章 發布:2023-02-09 04:28:20 瀏覽:839