html上傳按鈕
❶ html點擊button彈出選擇文件，上傳，這個怎麼實現
<div class="button operating-button" id="fileUpdate-button">上傳文件</div>
<form action="" id ="fileUpdate-form">
<input type="file" name="filename" id="fileUpdate-input" style="display: none" />
</form>
<script type="text/javascript">
//上傳文件處理
var fileUpdate_button = document.getElementById("fileUpdate-button");
var fileUpdate_input = document.getElementById("fileUpdate-input");
var fileUpdate_form = document.getElementById("fileUpdate-form");
fileUpdate_button.onclick = function () {
fileUpdate_input.click();
}
fileUpdate_input.onchange = function () {
fileUpdate_form.submit();
}
</script>
❷ 如何用html實現按鈕上傳圖片，並且圖片縮略圖顯示在按鈕上方
+分採納
<html>
<head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
</style>
</head>
<body>
<div></div>
<input type="file" multiple="multiple" onchange="upload(event)">
</body>
</html>
<script type="text/javascript">
const [el,stage] = [
document.querySelector('input'),
document.querySelector('div'),
]
function upload({target}){
if(!target.files.length) return;
for(const file of target.files){
const img = new Image();
img.src = URL.createObjectURL(file);
stage.appendChild(img);
}
}
</script>
❸ HTML文件上傳
使用 input ，指定類型為 file ，來完成文件上傳功能。
多文件上傳需要在標簽上添加 mulyiple 屬性：
使用 accept 屬性來限制上傳文件的類型，當然這么做任然是不可靠的，還需要後端做進一步的判斷。
如果我們是用戶，當我們上傳了一張圖片，卻只顯示了幾個文字，是不是很不爽，那我們怎麼來實現預覽功能呢？
我們可以使用 FileReader 將圖像轉換為二進制字元串，然後添加 load 事件監聽，在文件上傳成功後獲取二進制字元串。
顯示文件上冊進度 來提高用戶體驗
FileReader 還有一個 progress 事件，表示當前上傳進度，配合HTML5的 progress 標簽，我們來模擬一下文件的上傳進度。
❹ 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>
❺ html點擊button彈出選擇文件，上傳，這個怎麼實現
<divclass="buttonoperating-button"id="fileUpdate-button">從Excel中批量導入</div>
<formaction=""id="fileUpdate-form">
<inputtype="file"name="filename"id="fileUpdate-input"style="display:none"/>
</form>
<scripttype="text/javascript">
//上傳文件處理
varfileUpdate_button=document.getElementById("fileUpdate-button");
varfileUpdate_input=document.getElementById("fileUpdate-input");
varfileUpdate_form=document.getElementById("fileUpdate-form");
fileUpdate_button.onclick=function(){
fileUpdate_input.click();
}
fileUpdate_input.onchange=function(){
fileUpdate_form.submit();
}
</script>
❻ html怎麼上傳不了文件到區域網伺服器
html上傳不了文件到區域網伺服器一般是網路線路問題,客戶端網路到服務端的網路不通,建議重啟路由器或更換上網環境後再試。如...
. 是登錄用戶中心,前提是你在這里買空間。
2. 進入用戶中心,在左側依次找到虛擬主機-主機管理,點擊右側產品欄的管理按鈕,進入虛擬主機控制中心。
❼ 把HTML5的手機網站嵌入安卓APP中，發現<input type='file' />的上傳按鈕功能失效，點擊沒有任何反應
安卓APP的WebView默認屏蔽了該控制項的使用，有些安卓APP之所以能支持文件選擇和上傳，主要可能是有可能採取了如下措施之一：
（1）可能在該APP中重寫了相關方法（http://stackoverflow.com/questions/5907369/file-upload-in-webview）
（2）提供了JS Bridge來供web頁面調用
所以，單從前端技術上是解決不了這個問題的。
這個問題之所以不太好排查，一方面跟手機端的圖片上傳功能我不太常用到有很大關系，另一方面也因為見到一些其它的APP容器能支持該功能，所以思維在習慣上已經形成定勢，誤以為這是WebView默認就支持的。
末了，順便提醒一句，下次進行類似功能的需求評審，別忘了先了解下相應的APP容器是否支持該功能，如果沒有，則需要找到相應的客戶端開發同學評估一下工時，以免造成影響項目進度的風險
❽ html 添加上傳附件按鈕,將上傳後的圖標和名稱顯示在文本框中
讀取到文本框是可以的：先上傳文件，後台讀取文件內容，再返回填充到文本框裡面