html5圖片上傳控制項
① html5如何上傳圖片到伺服器
直接用ftp工具,將你.html或者.htm結尾的文件放到伺服器的運行目錄
然後通過你的網站/html名字.html。
② html5文件上傳控制項的button樣式怎麼修改
直接寫
CSS樣式
是不行的
<input
type="text"
size="20"
name="upfile"
id="upfile"
style="border:1px
dotted
#ccc">
<input
type="button"
value="瀏覽"
onclick="path.click()"
style="border:1px
solid
#ccc;background:#fff">
<input
type="file"
id="path"
style="display:none"
onchange="upfile.value=this.value">
寫成這樣,用一個text和一個button替代file,然後讓file隱藏
③ html5uploader.js 怎麼兼容ie8
html5uploader.js 兼容ie8方法如下:
擁有兩個插件,一個是flash版本的uploadify,免費的。另一個是自己寫的html5版本的,名叫html5uploader(好俗的名字。。),再加一個適配器uploadadapter,用來決定在什麼時候調用哪個插件。頁面中只調用uploadadapter。關鍵的難題就在於,頁面中的代碼是只寫一次的,不管是flash的還是html5的都得能識別出頁面上的參數,這也就是我的山寨版本的插件做的事情,原flash版本的配置參數通通得識別並有效。幸好,已經實現了。
上demo
很多東西,一上demo就都清楚了。。。
[html] view plain
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.uploadadapter.js"></script>
<script type="text/javascript" src="jquery.loadscript.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function(){
$('#upload').uploadadapter({
fileTypeExts:'*.jpg;*.png',
auto:false,
showUploaded:true,
baseurl:'.',//當前目錄
multi:true,
removeTimeout:9999999,
uploarl:'upload.php'
});
});
</script>
</head>
<body>
<input type="file" name="file" id="upload" />
</body>
</html>
ie8下調用flash
firefox、chrome下調用html5
略有差異,ie8下圓角沒了。。。如果不喜歡這個樣式呢,就請打開css文件自己修改吧。
很簡單的調用,可以看到在頁面中使用的是uploadadapter,由它來決定調用哪個插件。倆個插件所需要的js文件和css文件都是非同步引入的,此處用到一個小插件loadScript。參數沒有寫全,可以自己看源代碼的注釋~
uploadadapter中的調用情況是我需要的配置,你也可以隨意修改。
四、相關文件注釋
在此把文件夾中的文件做一個簡要介紹:
/html5uploader html5上傳插件,你也可以拿來單獨使用
/uploadify3.2 flash上傳插件,也可以拿來單獨使用
/uploads 存放上傳的文件
/jquery.loadScript.js 用於非同步引入腳本的小插件
/jquery.uploadadapter.js 適配器,用來判斷客戶端類型,動態調用上傳插件
/upload.php 後台處理程序,最基本的
五、上源碼,注釋很全哦
http://download.csdn.net/detail/never_say_goodbye/5090639
六、一個bug!!
很重的哦,我之前給疏漏了,在這里說一下,文件就不重新上傳了
在jquery.html5uploader.js的158和164行,將$('.uploadify-progress')改為$('#'+file.index).fnd('.uploadify-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>
⑤ 如何使用第三方上傳插件web uploader的demo
要解決302問題也很簡單,就是html5的文件上傳,正好最近在ueditor里看到網路的webuploader,會自動選擇flash html5,就是一個成熟的解決方案了。
先看前端,我們將最常用的操作封裝為插件,asp.net中和MVC中最好使用相對於應用程序的絕對路徑,自行定義全局 applicationPath :var applicationPath = "@(Href("~")=="/"?"":Href("~"))";
前端插件代碼:
⑥ html5文件上傳控制項的button樣式怎麼修改
你直接將它隱藏,然後自己寫一個button。
給這個button加點擊事件。
點擊事件中在通過JS去觸發上傳文件控制項的點擊事件就可以了。
⑦ 把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容器是否支持該功能,如果沒有,則需要找到相應的客戶端開發同學評估一下工時,以免造成影響項目進度的風險
⑧ html5+上傳圖片時有沒有截圖的插件(手機端的)
按住電源鍵(關機鍵)的同時按主屏幕(HOME)鍵,聽見"咔嚓"一聲,就代表截圖成功了。
另外還有用截圖軟體截圖的,你可以下載一款在你手機上最好用的截圖軟體,安裝後就可以使用截圖功能了。答題不易,互相幫助,手機提問的朋友在客戶端右上角評價點滿意即可.
如果你認可我的回答,請點擊採納為滿意回答按鈕!
⑨ html圖片上傳控制項
提交錯誤是什麼,你確定錯誤不是被提交頁面的?