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

表單圖片上傳

發布時間: 2022-02-05 19:19:27

⑴ 我該怎樣將form 內的<input type="file" name="myimg">上傳標簽,將圖片上傳到我的html頁面,用html代碼寫

HTML沒有處理這種文件的功能,所以你只使用HTML是不能實現的。如果你不使用伺服器端語言,只是想要這個效果,可以嘗試使用JS來做,就是用JS獲取你的input中的值,然後去查找這個文件,添加一個鏈接,鏈接的指向是你所要上傳的文件,或者通過JS把文件移動到你想指定的地方,這都可以。
但這個時候其實不需要提交的,只需要一個動作觸發JS就可以了,當然你也可以提交,在提交的時候來觸發這個操作,但記得,JS操作一定要在提交前完成,要不然你就沒辦法獲取這個值了。
我只提供一個思路,自己沒有試過,你可以再想想。如果有服務端的腳本語言,你這個問題就很好解決了。

⑵ 用javaScript編寫 上傳圖片 並在表單指定位置顯示所上傳圖片代碼

需要網站提供上傳介面才可以,javascript是能完成前端交互。後端的事它做不了。

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

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

1.表單上傳

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

ajax無刷新上傳

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

3.各類插件上傳

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

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

⑷ 上傳圖片表單賦值問題

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

例:

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

折磨我半天 媽的....

⑸ 怎樣將上傳的圖片文件和表單其它數據一起提交解決辦法

比如要獲取一個人的姓名,年齡…… 加上選擇的上傳圖片
我用的是SmartUpload組件,在表單中非得加上 ENCTYPE="multipart/form-data" 屬性
不加圖片上傳不了,加了,其它數據有獲取不到,所以,有大蝦能幫忙解決一下
------解決方案--------------------------------------------------------可以引用commons-fileupload包
在Servlet中這樣使用:
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload diskFileUpload = new ServletFileUpload(factory);
// 定義一個HashMap,存放請求參數
Map<String, String> parameters = new HashMap<String, String>();
// 得到所有的文件,以及其它請求參數:
List<?> fileItems = diskFileUpload.parseRequest(request);
Iterator<?> i = fileItems.iterator();
// 依次處理每一個文件,以及請求參數:
while (i.hasNext()) {
FileItem fi = (FileItem) i.next();
// 如果是文件,進行上傳操作
if (!fi.isFormField()) {
}else{// 如果是請求參數
String name = fi.getFieldName();
String value = fi.getString();
......}}------解決方案--------------------------------------------------------可以提交表單的啊~這個不影響~你得不到表單信息仔細看看是不是哪裡錯了

⑹ jquery多圖片上傳(form表單序列化提交)為啥後台只獲取一個圖片文件

首先,文本類的可以放在request中通過request.getAttribute(name)獲取。圖片你在前端放地址,後端也是像前面通過request.getAttribute(name)獲取後存入資料庫。這是jsp+servlet的做法。jsp有九大內置對象用於傳遞數據。而你如果用spring+springmvc的話是通過參數綁定來傳遞數據的。詳細的你可以了解框架文檔。建議你選擇一種框架可以便捷開發。jsp+servlet是比較原始的處理方式。

⑺ HTML表單的POST上傳方式

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

⑻ 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>

⑼ 用表單上傳圖片應怎麼做啊用PHP

<?php
set_time_limit(0);
define('ROOT',dirname(__FILE__).'/');
if($_POST['submit']){
foreach ($_FILES['upfile']['tmp_name'] as $k=>$v){
!$v || (!file_exists(ROOT.'/upload/'.$_FILES['upfile']['name'][$k]) && @getimagesize($v) && @move_uploaded_file($v,ROOT.'/upload/'.$_FILES['upfile']['name'][$k]) && print ('上傳'.$_FILES['upfile']['name'][$k].'成功<br /><img src="'.$site['url'].'upload/upload/'.$_FILES['upfile']['name'][$k].'" />') )|| print ('上傳'.$_FILES['upfile']['name'][$k].'失敗<br />');
}
}
?>
<html>
<head>
<title>上傳</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">body,td{font-family:tahoma,verdana,arial;font-size:11px;line-height:15px;background-color:white;color:#666666;margin-left:20px;}
strong{font-size:12px;}
a:link{color:#0066CC;}
a:hover{color:#FF6600;}
a:visited{color:#003366;}
a:active{color:#9DCC00;}
table.itable{}
td.irows{height:20px;background:url("index.php?i=dots") repeat-x bottom}</style>
<script language="JavaScript">
function adpload() {
document.all.upload.innerHTML = '<input name="upfile[]" type="file" style="width:200;border:1 solid #9a9999; font-size:9pt; background-color:#ffffff" size="25"><br /><input name="upfile[]" type="file" style="width:200;border:1 solid #9a9999; font-size:9pt; background-color:#ffffff" size="25"><br />'+document.all.upload.innerHTML;
}
</script>
</head>
<body>
<center><form enctype="multipart/form-data" method="post" name="upform">
上傳圖片:按上傳按紐,上傳成功後可以直接粘貼圖片於編輯器中 <br><br>
<a href='#' onClick="adpload()">增加上傳文件</a><br><br>
<input name="upfile[]" type="file" style="width:200;border:1 solid #9a9999; font-size:9pt; background-color:#ffffff" size="25"><br>
<input name="upfile[]" type="file" style="width:200;border:1 solid #9a9999; font-size:9pt; background-color:#ffffff" size="25"><br>
<div id="upload"></div>
<input type="submit" name="submit" value="上傳" style="width:30;border:1 solid #9a9999; font-size:9pt; background-color:#ffffff" size="25"><br><br><br>
<br><br>
<a href="index.php">返回</a><br />
</form>
</center>
</body>
</html>

⑽ form 表單上傳圖片,怎樣獲取圖片的全路徑

上傳一成功的一瞬間是放到系統臨時目錄下的,你要通過move_uploaded_file來移動到有效目錄內,如果要操作臨時上傳目錄 ,上傳時通過var_mp($_FILE)能看到的。不過意義不大哈。