這裡蒐索程式師資訊,查找有用的技術資料
當前位置:首頁 » 文件傳輸 » 文件上傳控制項type屬性
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

文件上傳控制項type屬性

發布時間: 2022-10-07 14:46:48

A. 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>

B. form表單中的enctype="multipart/form-data"什麼意思

enctype就是encodetype就是編碼類型的意思。

multipart/form-data是指表單數據有多部分構成,既有文本數據,又有文件等二進制數據的意思。

需要注意的是:默認情況下,enctype的值是application/x-www-form-urlencoded,不能用於文件上傳,只有使用了multipart/form-data,才能完整的傳遞文件數據。

application/x-www-form-urlencoded不是不能上傳文件,是只能上傳文本格式的文件,multipart/form-data是將文件以二進制的形式上傳,這樣可以實現多種類型的文件上傳。

(2)文件上傳控制項type屬性擴展閱讀:

一、關於HTML <form> 標簽的 enctype 屬性

application/x-www-form-urlencoded:在發送前編碼所有字元(默認)

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

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

二、enctype:規定了form表單在發送到伺服器時候編碼方式,有如下的三個值。

1、application/x-www-form-urlencoded。默認的編碼方式。但是在用文本的傳輸和MP3等大型文件的時候,使用這種編碼就顯得 效率低下。

2、multipart/form-data 。 指定傳輸數據為二進制類型,比如圖片、mp3、文件。

3、text/plain。純文體的傳輸。空格轉換為 「+」 加號,但不對特殊字元編碼。

C. 資料庫里input 、accept 、wait 三條命令的功能是什麼意思

都是數據輸入命令,input和accept主要是接收數據,wait實現等待功能。

但是accept只能接收字元串,而且輸入時不能加定界符(如雙引號等),否則系統會把定界符作為字元串的一部分。

input可以接收各種類型數據,但輸入字元串時要加定界符(如雙引號),輸入邏輯型要用圓點定界(如.T.,.F.),輸入日期型要用大括弧(如{^2008-12-1}

(3)文件上傳控制項type屬性擴展閱讀:

作用

在文件上傳控制項(input type='file')中,可以通過accept屬性實現對文件類型的過濾。

一、相關代碼:

下面給出對應的文件上傳控制項代碼:

<input type="file" id="myFile" accept="image/jpeg,image/gif,application/msword"/><br/>

上面的代碼表示限制文件上傳類型為.jpg/.gif/.doc。

二、限制規則:

在文件上傳控制項的accept屬性中,接受以下兩種格式的限制符:

文件類型,但不限制具體擴展名,如:image/*,就只要是圖片就行。

文件類型+具體的文件擴展類型,如:image/jpeg,使用的是MIME_TYPE類型

多個MIME_TYPE類型之間用逗號分隔。

三、accept屬性具體接受的類型:

accept這個屬性,只在FF,ie10和chrome中有效。

D. file控制項怎麼上傳多個文件

File控制項是一個必須結合伺服器端功能才能實現的純客戶端控制項。

要使得文件上載能夠成功,要做到以下幾點:

INPUT type=file 元素必須出現在 FORM 元素內。
必須為 INPUT type=file 元素指定 NAME 標簽屬性的值。
FORM 元素 METHOD 標簽屬性的值必須設置為 post。
FORM 元素 ENCTYPE 標簽屬性的值必須設置為 multipart/form-data。
要處理上載到伺服器的文件,伺服器端進程必須可以處理 multipart/form-data 的提交。例如,Microsoft Posting Acceptor 能夠允許 Microsoft Internet Information Server (IIS) 接受文件上載。而在網上也可找到其它的 Common Gateway Interface (CGI) 腳本用於處理 multipart/form-data 提交。

用戶選擇要上載的文件並提交頁面後,該文件作為請求的一部分上載。文件將被完整地緩存在伺服器內存中。

File控制項一次只能上傳一個文件,並且其文件屬性值都是只讀的。採用File控制項同時上傳多個文件,實際上是動態生成多個File控制項,每選擇上傳一個文件,隱藏該控制項,生成另一個File控制項。這里只需要簡單的JavaScript技巧既可以實現,所以不做贅述。

以ASP.NET為例,介紹在伺服器端所需要進行的處理。

//獲取上傳文件列表

HttpFileCollection fileCollection = HttpContext.Current.Request.Files;

//逐個上傳每個文件
for (int index = 0; index < HttpContext.Current.Request.Files.Count; index++)
{
HttpPostedFile postedFile = HttpContext.Current.Request.Files[index];
filename = postedFile.FileName;
if (postedFile.FileName != "")
{
postedFile.SaveAs(uploadPath);
}
}

E. form表單中的enctype="multipart/form-data"什麼意思怎麼這個屬性老難記了!

enctype就是encodetype翻譯成中文就是編碼類型的意思!multipart/form-data是指表單數據有多部分構成:既有文本數據,又有文件等二進制數據的意思。
另外需要注意的是:默認情況下,enctype的值是application/x-www-form-urlencoded,不能用於文件上傳;只有使用了multipart/form-data,才能完整的傳遞文件數據。
對於文件上傳工作,其實是在前端完成的,即,在php,java等語言處理之前,文件其實就已經被上傳到伺服器了,伺服器腳本語言的作用不過是將這些臨時文件持久化而已!

F. input type file上傳文件問題

這個直接是沒法做到的。你可以換個思路試試,用一個變數先將type=file的這個的value值保存起來。然後上傳文件完成後再將這個變數的值賦值給這個的value 就可以了。可以試試。
希望可以幫到你。

G. 如何使用VisualC#WinForm 實現文件上傳功能

在Web編程中,我們常需要把一些本地文件上傳到Web伺服器上,上傳後,用戶可以通過瀏覽器方便地瀏覽這些文件,應用十分廣泛。
首先,在你的VisualC#webproject中增加一個上傳用的WebForm,為了要上傳文件,需要在ToolBox中選擇HTML類的FileField控制項,將此控制項加入到WebForm中,然而此時該控制項還不是服務端控制項,我們需要為它加上如下一段代碼:<inputid=uploadfile1type=filesize=49runat=server>,這樣它就成為服務端控制項了,如果需要同時上傳數個文件時,我們可以相應增加此控制項。
需要注意的是代碼中一定要把<form>的屬性設置成為:

H. ng2 file upload 跨域上傳文件怎麼弄

先講講如何跨域,跨域方法很多,訪問方式其實與本域名訪問沒有很大不同。簡單列舉幾個:

  • 使用window.postMessage實現跨域通信。

  • 使用ajax非同步載入其他網站資源,如載入QQ登陸成功的資料。

  • 頭部的css、js,img標簽中的src等,都可以填寫外部的鏈接,都算跨域。

  • 然後再講講非同步文件上傳,非同步上傳和非同步上傳文件其實很類似,下面是使用jq的ajaxupload插件進行上傳的示例

  • $.ajaxFileUpload({url:'upload.action',//用於文件上傳的伺服器端請求地址secureuri:false,//一般設置為falsefileElementId:'upload',//文件上傳控制項的id屬性<inputtype="file"id="upload"name="upload"/>dataType:'json',//返回值類型一般設置為jsonsuccess:function(data,status){//伺服器成功響應處理函數alert(data.message);//從伺服器返回的json中取出message中的數據,其中message為在struts2中action中定義的成員變數$("#img").attr("src",data.imagePath);if(typeof(data.error)!='undefined'){if(data.error!=''){alert(data.error);}else{alert(data.message);}}},error:function(data,status,e){//伺服器響應失敗處理函數alert(e);}});

I. 新版UpLoad 控制項,中的AcceptFileTypes屬性應該怎麼設置

AcceptFileTypes=".jpg,.jpeg,.gif,.png,.bmp,.xls"
顯示為自定義文件
protected readonly static List<string> VALID_FILE_TYPES = new List<string> { "jpg", "bmp", "gif", "jpeg", "png" };

J. JS實現文件上傳時候,火狐可以正常上傳,IE卻上傳不了,可以獲取上傳的路徑,使用的是type=「file」控制項

尊敬的用戶,您好!很高興為您答疑
你遇到的是js控制項屬性兼容的問題。
function getPath(obj) {
if (obj) {
if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
obj.select()();
return document.select() ion.createRange().text;
} else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
if (obj.files) {
return obj.files.item(0).getAsDataURL();
}
return obj.value;
}
return obj.value;
}
}
請您嘗試以上代碼。
如果仍然有兼容問題,請考慮使用jquery。
希望我的回答對您有所幫助,如有疑問,歡迎繼續咨詢我們。