整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
、表單在網(wǎng)頁中的應(yīng)用：登錄、注冊(cè)常用到表單
2、表單的語法：
<form method="post" action="result.html">
<p> 名字：<input name="name" type="text" > </p>
<p> 密碼：<input name="pass" type="password" > </p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填“/>
</p>
</form>
3、表單元素說明：
type:指定元素的類型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默認(rèn)為 text.
name:指定表單元素的名稱.
value:元素的初始值。type 為 radio時(shí)必須指定一個(gè)值.
size:指定表單元素的初始寬度。當(dāng) type 為 text 或 password時(shí)，表單元素的大小以字符為單位。對(duì)于其他類型，寬度以像素為單位.
maxlength:type為text 或 password 時(shí)，輸入的最大字符數(shù).
checked:type為radio或checkbox時(shí)，指定按鈕是否是被選中.
4、示例：
<html >
<head>
<title>表單元素</title>
</head>
<body>
<!-- 表單 -->
<form method="POST" action="#">
<!-- 標(biāo)簽 -->
<label for="username">姓名：</label>
<!-- 文本框 value屬性是設(shè)置默認(rèn)顯示的值-->
<input id="username" value="songzetong" />
<!-- 密碼框 -->
<br/><label for="pwd">密碼：</label>
<input type="password" id="pwd">
<br/>
<!-- 單選框 -->
<label for="sex">性別：</label>
<input type ="radio" name ="sex" checked/>男
<input type ="radio" name ="sex"/>女
<!-- 復(fù)選框 -->
<br/>
<label for="hobby">愛好：</label>
<input type="checkbox" name ="hobby" id="hobby"/>聽音樂
<input type="checkbox" name ="hobby"/>旅游
<input type="checkbox" name ="hobby"/>游泳
<br/>
<!-- 下拉列表 -->
<label for="month">月份：</label>
<select id="month"/>
<option>1月</option>
<option>2月</option>
<option>3月</option>
</select>
<br/>
<!-- 按鈕 -->
<input type="reset" value="重置按鈕"/>
<input type="submit" value="提交按鈕"/>
<input type="button" value="普通按鈕"/>
<br/>
<!-- 圖片按鈕 -->
<input type="image" src="one.jpg" width="200px" heigth="200px"/>
<br/>
<button type="submit">提交</button>
<button type="reset">重置</button>
<br/>
<label for="profile">
個(gè)人簡(jiǎn)介：
</label>
<!-- 多行文本域 -->
<textarea >本人已同意什么條款</textarea>
<br/>
<br/>
<br/>
<!-- 文件域 -->
<label for="upload">上傳頭像:</label>
<input type="file"/>
<!-- 郵箱 -->
<br/>
<label for="QQ郵箱">郵箱：</label>
<input type="email"/>
<br/>
<!-- 網(wǎng)址 -->
<label for="ur">網(wǎng)址：</label>
<input type="url"/>
<!-- 數(shù)字 -->
<br/>
<label for="shuzi">數(shù)字：</label>
<input type="number" name="shuzi" min="0" max="100" step="10"/>
<br/>
<label for="huakuai">滑塊：</label>
<input type="range" />
<!-- 搜索框 -->
<br/>
<label for="sousuo">搜索</label>
<input type="search"/>
<!-- 隱藏域 -->
<br/>
<input type="hidden"value="1">
<!-- 只讀：只能看不能修改，禁用：不能用 -->
<input value="我是只讀的" readonly/>
<input type="button" value="我是禁用的" disabled/>
<!-- palceholder默認(rèn)提示 -->
<br/>
<input placeholder="默認(rèn)提示框"/>
<br/>
<!-- 文本框內(nèi)容提示不能為空，否則不允許用戶提交表單（網(wǎng)頁上的必填項(xiàng)） -->
<input required="必填項(xiàng)"/>
<button type="submit">提交</button>
<br/>
<!-- 用戶輸入的內(nèi)容必須符合正則表達(dá)式所指的規(guī)則，否則就不能提交表單-->
<input required pattern="^1[3578]\d{9}"/>
<button type="submit">提交</button>
</form>
</body>
</html>
效果圖鏈接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlThree/form.html
件拖拽上傳
使用HTML5的文件API, 可以將操作系統(tǒng)中的文件拖放到瀏覽器的指定區(qū)域, 實(shí)現(xiàn)文件上傳到服務(wù)器。本文將結(jié)合實(shí)例講解HTML5+jQuery+PHP實(shí)現(xiàn)拖拽上傳圖片的過程, 來看下HTML5的魅力吧。
HTML
我們?cè)陧撁嬷蟹胖靡粋€(gè)拖拽區(qū)域#drop_area, 即接收拖拽的區(qū)域, #preview用來預(yù)覽拖拽上傳的圖片信息。
<div id="drop_area">將圖片拖拽到此區(qū)域</div>
<div id="preview"></div>Javascript
要想實(shí)現(xiàn)拖拽, 頁面需要阻止瀏覽器默認(rèn)行為, 即四個(gè)事件(拖離、拖后放、拖進(jìn)、拖來拖去), 因?yàn)槲覀円柚篂g覽器默認(rèn)將圖片打開的行為, 這里我們使用jQuery來完成。
$(function(){
//阻止瀏覽器默認(rèn)行。
$(document).on({
dragleave:function(e){ //拖離
e.preventDefault();
},
drop:function(e){ //拖后放
e.preventDefault();
},
dragenter:function(e){ //拖進(jìn)
e.preventDefault();
},
dragover:function(e){ //拖來拖去
e.preventDefault();
}
});
...
});接下來我們來了解下文件API。HTML5的文件API有一個(gè)FileList接口, 它可以通過e.dataTransfer.files拖拽事件傳遞的文件信息, 獲取本地文件列表信息
var fileList = e.dataTransfer.files;在本例中, 我們用javascript來偵聽drop事件, 首先要判斷拖入的文件是否符合要求, 包括圖片類型、大小等, 然后獲取本地圖片信息, 實(shí)現(xiàn)預(yù)覽, 最后上傳。
$(function(){
/// ...接上部分
var box = document.getElementById('drop_area'); //拖拽區(qū)域
box.addEventListener("drop",function(e){
e.preventDefault(); //取消默認(rèn)瀏覽器拖拽效果
var fileList = e.dataTransfer.files; //獲取文件對(duì)象
//檢測(cè)是否是拖拽文件到頁面的操作
if(fileList.length == 0){
return false;
}
//檢測(cè)文件是不是圖片
if(fileList[0].type.indexOf('image') === -1){
alert("您拖的不是圖片！");
return false;
}
//拖拉圖片到瀏覽器，可以實(shí)現(xiàn)預(yù)覽功能
var img = window.URL.createObjectURL(fileList[0]);
var filename = fileList[0].name; //圖片名稱
var filesize = Math.floor((fileList[0].size)/1024);
if(filesize>500){
alert("上傳大小不能超過500K.");
return false;
}
var str = "<img src='"+img+"'><p>圖片名稱："+filename+"</p><p>大小："+filesize+"KB</p>";
$("#preview").html(str);
//上傳
xhr = new XMLHttpRequest();
xhr.open("post", "upload.php", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
var fd = new FormData();
fd.append('mypic', fileList[0]);
xhr.send(fd);
},false);
});我們用FormData模擬表單數(shù)據(jù), 直接將數(shù)據(jù)append到formdata對(duì)象中, 實(shí)現(xiàn)了ajax上傳。
PHP
upload.php用于接收上傳的文件信息, 完成上傳, 實(shí)現(xiàn)代碼如下：
<?php
$mypic = $_FILES["mypic"];
if(!empty($mypic)){
$picname = $_FILES['mypic']['name'];
$picsize = $_FILES['mypic']['size'];
if ($picsize > 512000) {
echo '圖片大小不能超過500k';
exit;
}
$type = strstr($picname, '.');
if ($type != ".gif" && $type != ".jpg") {
echo '圖片格式不對(duì)！';
exit;
}
$pics = 'helloweba' . $type;
//上傳路徑
$pic_path = "pics/". $pics;
move_uploaded_file($mypic["tmp_name"],$pic_path);
}
?>下邊這幾句可以沒有
<meta charset="utf-8">
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="mypic">
<input type="submit" value="上傳">
</form>最后總結(jié)下HTML5實(shí)現(xiàn)拖拽上傳的技術(shù)要點(diǎn)：
1、監(jiān)聽拖拽：監(jiān)聽頁面元素的拖拽事件, 包括：dragenter、dragover、dragleave和drop, 一定要將dragover的默認(rèn)事件取消掉, 不然無法觸發(fā)drop事件。如需拖拽頁面里的元素, 需要給其添加屬性draggable=”true”；
2、獲取拖拽文件：在drop事件觸發(fā)后通過e.dataTransfer.files獲取拖拽文件列表, .length屬性獲取文件數(shù)量, .type屬性獲取文件類型。
3、讀取圖片數(shù)據(jù)并添加預(yù)覽圖。
4、發(fā)送圖片數(shù)據(jù)：使用FormData模擬表單數(shù)據(jù)AJAX提交文件流。
紹http請(qǐng)求的兩種方式，get和post方式。并用C#語言實(shí)現(xiàn)，如何請(qǐng)求url并獲取返回的數(shù)據(jù)
兩者的區(qū)別：
請(qǐng)求類
///
/// Get請(qǐng)求
///
///
/// 字符串
public static string GetHttpResponse(string url, int Timeout)
{
HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url);
request.Method = "GET";
request.ContentType = "text/html;charset=UTF-8";
request.UserAgent = null;
request.Timeout = Timeout;
HttpWebResponse response = (HttpWebResponse)request.GetResponse();
Stream myResponseStream = response.GetResponseStream();
StreamReader myStreamReader = new StreamReader(myResponseStream, Encoding.GetEncoding("utf-8"));
string retString = myStreamReader.ReadToEnd();
myStreamReader.Close();
myResponseStream.Close();
return retString;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
調(diào)用方法
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
