表單如何上傳圖片_web前端上傳圖片的幾種方法

Ⅰ html 表單上傳圖片

使用表單中的文件域（<input type="file".../>）控制項可以上傳文件。
打開DreamWeaver，這里使用的版本是CS6，新建一個php文件。
保存到網站目錄下，命名為upload.php。
在代碼中插入一個表單
對話框中，操作留空，方法選擇「post」，編碼類型輸入「multipart/form-data」，名稱命名為「upload_form」，其中編碼類型必須為「multipart/form-data」。點擊確定，產生的代碼如下：
<body>
<form action="" method="post" enctype="multipart/form-data" name="upload_form"></form>
</body>
接下來在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>
不同的瀏覽器，對於文件域控制項的顯示不同，IE9瀏覽器和FireFox中的預覽效果都要看一下
代碼中，重要的是名為imgfile的文件域控制項，type屬性為「file」，表示這是一個文件域控制項。
accept屬性表示點擊「瀏覽...」按鈕時，彈出的打開對話框中的文件類型。accept="image/gif, image/jpeg"表示我們只想在文件打開對話框中顯示後綴名為「gif」和「jpg」、「jpeg」的文件。對於此屬性，有些瀏覽器並不支持。比如在IE9中，此屬性不起任何作用。在chrome中，此屬性起作用。
如果想支持所有的圖像文件，accept值可以設置為「image/*」，在chrome中，文件類型顯示
好了，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;
}
}
}
?>
代碼分析：
$_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，表示上傳失敗，顯示失敗信息。
完成的代碼如下：
<!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>

Ⅱ 金山表單怎麼上傳圖片

先把照片「復制」，然後在WPS表格中點擊下拉菜單的「開始」、「粘貼」，照片就會出現在表格中。金山表單是哦金山文檔旗下專業的信息收集工具-金山表單,原wps表單,免費創建問卷調查、信息統計、考試測評、投票、接龍等應用,覆蓋多種題型、支持定位、文件收集、圖片收集等功能。

Ⅲ drupal表單如何上傳圖片

圖片本身是不能實現其他功能的,其他功能只能在網頁中加以實現.你要換一個思路.如果你是發帖,可以在圖片標記外圍加鏈接標簽.但是你無法對圖片本身作任何事情

Ⅳ drupal9表單如何添加圖片

怎樣在電腦表格上添加照片？用Excel做一個表格，可以使用插入圖片將照片添加到表格中。方法步驟如下：1、打開需要操作的EXCEL表格，在插入工具欄中找到並點擊「圖片」。2、在彈出的圖片選擇界面，找到並點擊需要添加到表格中的照片，然後點擊「插入」即可。3、返回EXCEL表格，可發現已成功將照片放到EXCEL表格上。

Ⅳ 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

Ⅵ 蘋果13p金山表單怎麼上傳圖片

1、點擊「插入」選項，選擇圖片。
2、點擊想要上傳圖片的位置，再在文件中選擇想要插入的圖片，確認即可。

Ⅶ html表單怎麼上傳圖片

html表單這樣上傳圖片：

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

<head>

</head>

Ⅷ PHP在表單中上傳圖片

上傳圖片不用jq 單純用表單不就能實現么，表單提交到處理頁面先執行上傳操作上傳結束後，直接調用處理表單的方法

Ⅸ web前端上傳圖片的幾種方法

下面給你介紹3種web前端上傳圖片的方法：

1.表單上傳

最傳統的圖片上傳方式是form表單上傳，使用form表單的input[type=」file」]控制項，打開系統的文件選擇對話框，從而達到選擇文件並上傳的目的。

ajax無刷新上傳

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

3.各類插件上傳

當上傳的需求要求可預覽、顯示上傳進度、中斷上傳過程、大文件分片上傳等等，這時傳統的表單上傳很難實現這些功能，我們可以藉助現有插件完成。

如網路上傳插件Web Uploader、jQuery圖片預覽插件imgPreview 、拖拽上傳與圖像預覽插件Dropzone.js等等，大家可根據項目實際需求選擇適合的插件。

Ⅹ php表單如何多圖片上傳

多圖片上傳，就是文件域使用同一個名子，提交後是個數組。
在伺服器列印一下提交結果數組就知了，列印$__FILES

導航:首頁 > 圖片大全 > 表單如何上傳圖片

表單如何上傳圖片

與表單如何上傳圖片相關的資料