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

上傳表單

發布時間: 2022-01-27 20:39:19

『壹』 HTML表單的POST上傳方式

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

『貳』 文件上傳為什麼要指定表單屬性method="post" enctype="multipart/form-data

PHP中文件上傳 POST傳值問題 不確定是enctype="multipart/form-data"屬性問題...表單有部分是這樣的 挑了些 <form name="myform" method="post" action=".

『叄』 Java中上傳文件和表單數據提交如何質蕕

//1.form表單
//註:上傳文件的表單,需要將form標簽設置enctype="multipart/form-data"屬性,意思是將Content-Type設置成multipart/form-data
<form action="xxx" method="post" enctype="multipart/form-data">
<input type="text" name="name" id="id1" /> <br />
<input type="password" name="password" /> <br />
<input type="file" name="file" value="選擇文件"/> <input id="submit_form" type="submit" value="提交"/>
</form>
//2.servlet實現文件接收的功能
boolean isMultipart = ServletFileUpload.isMultipartContent(request);//判斷是否是表單文件類型

DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload sfu = new ServletFileUpload(factory);
List items = sfu.parseRequest(request);//從request得到所有上傳域的列表
for(Iterator iter = items.iterator();iter.hasNext();){
FileItem fileitem =(FileItem) iter.next(); if(!fileitem.isFormField()&&fileitem!=null){
//判讀不是普通表單域即是file
System.out.println("name:"+fileitem.getName());
}
}

3.擴展一下springboot
@RequestMapping("/xxx")
@ResponseBody
public String handleFileUpload(@RequestParam("file") MultipartFile file) {
if (!file.isEmpty()) {
try {
BufferedOutputStream out = new BufferedOutputStream(
new FileOutputStream(new File(
file.getOriginalFilename())));
System.out.println(file.getName());
out.write(file.getBytes());
out.flush();
out.close();
} catch (FileNotFoundException e) {
e.printStackTrace();
return "上傳失敗," + e.getMessage();
} catch (IOException e) {
e.printStackTrace();
return "上傳失敗," + e.getMessage();
}
return "上傳成功";
} else {
return "上傳失敗,因為文件是空的.";
}
}

『肆』 如何使用multipart/form-data格式上傳文件

在網路編程過程中需要向伺服器上傳文件。Multipart/form-data是上傳文件的一種方式。

Multipart/form-data其實就是瀏覽器用表單上傳文件的方式。最常見的情境是:在寫郵件時,向郵件後添加附件,附件通常使用表單添加,也就是用multipart/form-data格式上傳到伺服器。


表單形式上傳附件

具體的步驟是怎樣的呢?

首先,客戶端和伺服器建立連接(TCP協議)。

第二,客戶端可以向伺服器端發送數據。因為上傳文件實質上也是向伺服器端發送請求。

第三,客戶端按照符合「multipart/form-data」的格式向伺服器端發送數據。

既然Multipart/form-data格式就是瀏覽器用表單提交數據的格式,我們就來看看文件經過瀏覽器編碼後是什麼樣子。

這行指出這個請求是「multipart/form-data」格式的,且「boundary」是 「---------------------------7db15a14291cce」這個字元串。

不難想像,「boundary」是用來隔開表單中不同部分數據的。例子中的表單就有 2 部分數據,用「boundary」隔開。「boundary」一般由系統隨機產生,但也可以簡單的用「-------------」來代替。

實際上,每部分數據的開頭都是由"--" + boundary開始,而不是由 boundary 開始。仔細看才能發現下面的開頭這段字元串實際上要比 boundary 多了個 「--」

緊接著 boundary 的是該部分數據的描述。

接下來才是數據。


「GIF」gif格式圖片的文件頭,可見,unknow1.gif確實是gif格式圖片。

在請求的最後,則是 "--" + boundary + "--" 表明表單的結束。

需要注意的是,在html協議中,用 「 」 換行,而不是 「 」。

下面的代碼片斷演示如何構造multipart/form-data格式數據,並上傳圖片到伺服器。

//---------------------------------------

// this is the demo code of using multipart/form-data to upload text and photos.

// -use WinInet APIs.

//

//

// connection handlers.

//

HRESULT hr;

HINTERNET m_hOpen;

HINTERNET m_hConnect;

HINTERNET m_hRequest;

//

// make connection.

//

...

//

// form the content.

//

std::wstring strBoundary = std::wstring(L"------------------");

std::wstring wstrHeader(L"Content-Type: multipart/form-data, boundary=");

wstrHeader += strBoundary;

HttpAddRequestHeaders(m_hRequest, wstrHeader.c_str(), DWORD(wstrHeader.size()), HTTP_ADDREQ_FLAG_ADD);

//

// "std::wstring strPhotoPath" is the name of photo to upload.

//

//

// uploaded photo form-part begin.

//

std::wstring strMultipartFirst(L"--");

strMultipartFirst += strBoundary;

strMultipartFirst += L" Content-Disposition: form-data; name="pic"; filename=";

strMultipartFirst += L""" + strPhotoPath + L""";

strMultipartFirst += L" Content-Type: image/jpeg ";

//

// "std::wstring strTextContent" is the text to uploaded.

//

//

// uploaded text form-part begin.

//

std::wstring strMultipartInter(L" --");

strMultipartInter += strBoundary;

strMultipartInter += L" Content-Disposition: form-data; name="status" ";

std::wstring wstrPostDataUrlEncode(CEncodeTool::Encode_Url(strTextContent));

// add text content to send.

strMultipartInter += wstrPostDataUrlEncode;

std::wstring strMultipartEnd(L" --");

strMultipartEnd += strBoundary;

strMultipartEnd += L"-- ";

//

// open photo file.

//

// ws2s(std::wstring)

// -transform "strPhotopath" from unicode to ansi.

std::ifstream *pstdofsPicInput = new std::ifstream;

pstdofsPicInput->open((ws2s(strPhotoPath)).c_str(), std::ios::binary|std::ios::in);

pstdofsPicInput->seekg(0, std::ios::end);

int nFileSize = pstdofsPicInput->tellg();

if(nPicFileLen == 0)

{

return E_ACCESSDENIED;

}

char *pchPicFileBuf = NULL;

try

{

pchPicFileBuf = new char[nPicFileLen];

}

catch(std::bad_alloc)

{

hr = E_FAIL;

}

if(FAILED(hr))

{

return hr;

}

pstdofsPicInput->seekg(0, std::ios::beg);

pstdofsPicInput->read(pchPicFileBuf, nPicFileLen);

if(pstdofsPicInput->bad())

{

pstdofsPicInput->close();

hr = E_FAIL;

}

delete pstdofsPicInput;

if(FAILED(hr))

{

return hr;

}

// Calculate the length of data to send.

std::string straMultipartFirst = CEncodeTool::ws2s(strMultipartFirst);

std::string straMultipartInter = CEncodeTool::ws2s(strMultipartInter);

std::string straMultipartEnd = CEncodeTool::ws2s(strMultipartEnd);

int cSendBufLen = straMultipartFirst.size() + nPicFileLen + straMultipartInter.size() + straMultipartEnd.size();

// Allocate the buffer to temporary store the data to send.

PCHAR pchSendBuf = new CHAR[cSendBufLen];

memcpy(pchSendBuf, straMultipartFirst.c_str(), straMultipartFirst.size());

memcpy(pchSendBuf + straMultipartFirst.size(), (const char *)pchPicFileBuf, nPicFileLen);

memcpy(pchSendBuf + straMultipartFirst.size() + nPicFileLen, straMultipartInter.c_str(), straMultipartInter.size());

memcpy(pchSendBuf + straMultipartFirst.size() + nPicFileLen + straMultipartInter.size(), straMultipartEnd.c_str(), straMultipartEnd.size());

//

// send the request data.

//

HttpSendRequest(m_hRequest, NULL, 0, (LPVOID)pchSendBuf, cSendBufLen)

『伍』 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>

『陸』 怎麼在上傳文件的同時提交表單

可以用「風聲無組件」上傳,如果還想獲取除了上傳文件以外的其他提交信息,只要在上傳類後面讀取就可以了:
以下為檢驗頁面代碼:
<!--#include file="FSUpClass.asp"-->
'--上傳類函數開始--
dim upload
set upload=New UpLoadClass
upload.MaxSize = 1048000
upload.FileType = "jpg/gif/png/bmp"
'上傳文件存放目錄
upload.SavePath = "Upfile/"
upload.open()

if upload.Error>0 then
response.write"<SCRIPT language=JavaScript>alert('上傳圖片只允許gif/jpg/png/bmp格式,且不能超過1MB。');"
response.write"javascript:history.go(-1)</SCRIPT>"
end if
'--上傳類函數結束--

set rs=server.createobject("adodb.recordset")
sql="select * from Table where...."
rs.open sql,conn,1,3
rs.addnew
'Pic為你上傳的圖片的提交名
rs("Pic")=upload.form("Pic")
'text為你提交的文本信息
rs("text")=upload.form("text")
rs....
rs.update
rs.close

『柒』 上傳圖片表單賦值問題

form 裡面加 name="editForm"
或者將JS里的 editForm 改成 你 form name="myform" 之類

例:

<form name="editForm" method="post" action="ProctEdit.asp?Action=SaveEdit&Result=<%=Result%>&ID=<%=ID%>">

折磨我半天 媽的....

『捌』 支持文件上傳的html表單

/可以理解為關閉符號,關閉的是input name ="myfile"type="file"
input是可以不用關閉的
tmp是 temporal 暫時的
dir是 directory 目錄
都是變數名,不必糾結

『玖』 html上傳表單屬性

表單的文件上傳元素默認樣式確實是:


只是這樣並不美觀,於是常見做法是創建一個文本框和一個按鈕來配合文件上傳元素:

核心就是將上傳元素的透明度設置為0,即完全透明,然後絕對定位到按鈕上上面,這樣用戶點擊按鈕時,實際是點擊到上傳元素。然後添加js,將上傳元素的value值賦給文本框的value值,實現在文本框中顯示文件元素的value屬性值。

該上傳元素的onchange事件監聽函數為:onchange="document.getElementById('textfield').value=this.value"