關於form中上傳檔案的相關功能會用到的一些語法
因為網路上這些功能都能查到code寫法, 且有做相容性處理, 所以這篇就不再寫出完整的code了, 而是把一些會用到的語法整理一下, 畢竟網路上較少這樣的文章:
HTML <form> enctype Attribute:
http://www.w3schools.com/tags/att_form_enctype.asp
擷取重點如下:
--> The enctype attribute specifies how the form-data should be encoded when submitting it to the server.
--> The enctype attribute can be used only if method="post".
form加上enctype=multipart/form-data作用:
http://superlevin.ifengyuan.tw/form%E5%8A%A0%E4%B8%8Aenctypemultipartform-data%E4%BD%9C%E7%94%A8/
擷取重點如下:
--> 預設的狀況下都是以application/x-www-form-urlencoded為主，會將資料做編碼傳送(空白以+代替，而特殊字元則傳成ASCII HEX。
--> 而multipart/form-data則是不做任何編碼，如果需要上傳文件時，就要使用它；
--> text/plan則是僅將空白以+代替，常見於電子郵件表單。
document.all vs. document.getElementById:
http://stackoverflow.com/questions/2408424/document-all-vs-document-getelementbyid
擷取重點如下:
--> document.all is a proprietary Microsoft extension to the W3C standard.
--> document.getElementById() is standard - use that.
[轉貼]javascript裡的document.all用法收集:
http://www.coolsun.idv.tw/modules/xhnewbb/viewtopic.php?topic_id=1233
裡面有很多例子有空時也可以看看,
擷取重點如下:
--> 從IE4開始IE的object model才增加了document.all[],
--> 來看看document.all[]的Description:
1) Array of all HTML tags in the document.Collection of all elements contained by the object. (翻譯: 也就是說document.all[]是文檔中所有標籤組成的一個數組變量，包括了文檔對象中所有元素)
2) IE’s document.all collection exposes all document elements.This array provides access to every element in the document. (翻譯: document.all[]這個數組可以訪問文檔中所有元素。)
HTML DOM Input FileUpload Object:
http://www.w3schools.com/jsref/dom_obj_fileupload.asp
擷取重點如下:
--> The Input FileUpload object represents an HTML <input> element with type="file".
--> Input FileUpload Object Properties:
--> files -- Returns a FileList object that represents the file or files selected with the file upload button
--> type -- Returns which type of form element the file upload button is
--> value -- Returns the path or the name of the selected file
Input FileUpload files Property:
http://www.w3schools.com/jsref/prop_fileupload_files.asp
擷取重點如下:
--> The files property returns a FileList object, representing the file or files selected with the file upload button.
--> Through the FileList object, you can get the the name, size and the contents of the files
--> This property is read-only.
Input FileUpload value Property:
http://www.w3schools.com/jsref/prop_fileupload_value.asp
擷取重點如下:
--> The value property returns the path or the name of the file selected with the <input type="file"> element.
--> This property returns the name of the selected file with a fake path in IE, Google Chrome, and Opera, and the name of the selected file in Firefox and Safari.
--> This property is read-only, because of security reasons.
ActiveXObject 物件 (JavaScript):
https://msdn.microsoft.com/zh-tw/library/7sw4ddf8(v=vs.94).aspx
擷取重點如下:
--> Enables and returns a reference to an Automation object.
--> This object is used only to instantiate Automation objects, and has no members.
--> 語法:
newObj = new ActiveXObject(servername.typename[, location])
--> servername.typename:
e.g.1 -- Excel.Application
e.g.2 -- Excel.Chart
e.g.3 -- Scripting.FileSystemObject
e.g.4 -- WScript.Shell
e.g.5 -- Word.Document
FileSystemObject Object:
https://msdn.microsoft.com/en-us/library/z9ty6h50(v=vs.84).aspx
擷取重點如下:
Provides access to a computer's file system.
FileSystemObject.FileExists() : FileSystemObject « MS JScript « JavaScript Tutorial:
http://www.java2s.com/Tutorial/JavaScript/0600__MS-JScript/FileSystemObjectFileExists.htm
擷取重點如下:
--> Syntax:
filesystemobject.FileExists(filename)
--> The FileExists() method determines whether a file exists.
--> This method takes filename as its only parameter.
FileSystemObject.GetFile() : FileSystemObject « MS JScript « JavaScript Tutorial:
http://www.java2s.com/Tutorial/JavaScript/0600__MS-JScript/FileSystemObjectGetFile.htm
擷取重點如下:
--> Syntax:
filesystemobject.GetFile(/file name/)
--> The GetFile() method is used to get a specified file object.
--> e.g.
<html>
<body>
<script language="JScript">
<!--
function getsize()
{
var myObject, afile, size;
myObject = new ActiveXObject("Scripting.FileSystemObject");
afile = myObject.GetFile("c:\\test.txt")
size = afile.Size; // 畫底色處為通常會一起使用的語法組合
alert("The size of the test.txt file is:" + size);
}
-->
</script>
Get the size for the file "test.txt"
<form name="myForm">
<input type="Button" value="Get Size" onClick='getsize()'>
</form>
</body>
</html>
Element.outerHTML:
https://developer.mozilla.org/zh-TW/docs/Web/API/Element/outerHTML
擷取重點如下:
--> The outerHTML attribute of the element DOM interface gets the serialized HTML fragment describing the element including its descendants. It can be set to replace the element with nodes parsed from the given string.
--> Syntax:
1) On return, content contains the serialized HTML fragment describing the element and its descendants:
var content = element.outerHTML;
2) Replaces the element with the nodes generated by parsing the string content with the parent of element as the context node for the fragment parsing algorithm:
element.outerHTML = content;
innerHTML、innerText、outerHTML、outerText差別:
http://syunguo.blogspot.tw/2013/07/innerhtmlinnertextouterhtmloutertext.html
其實這篇篇幅很短, 可以全部都看看,
擷取重點如下:
--> innerText和outerText輸出的結果是一樣的
--> innerHTML會把div內的HTML標籤給輸出
--> 而outerHTML是會把整個div區塊給輸出連自己本身也是一樣
HTML <form> enctype Attribute:
http://www.w3schools.com/tags/att_form_enctype.asp
擷取重點如下:
--> The enctype attribute specifies how the form-data should be encoded when submitting it to the server.
--> The enctype attribute can be used only if method="post".
form加上enctype=multipart/form-data作用:
http://superlevin.ifengyuan.tw/form%E5%8A%A0%E4%B8%8Aenctypemultipartform-data%E4%BD%9C%E7%94%A8/
擷取重點如下:
--> 預設的狀況下都是以application/x-www-form-urlencoded為主，會將資料做編碼傳送(空白以+代替，而特殊字元則傳成ASCII HEX。
--> 而multipart/form-data則是不做任何編碼，如果需要上傳文件時，就要使用它；
--> text/plan則是僅將空白以+代替，常見於電子郵件表單。
document.all vs. document.getElementById:
http://stackoverflow.com/questions/2408424/document-all-vs-document-getelementbyid
擷取重點如下:
--> document.all is a proprietary Microsoft extension to the W3C standard.
--> document.getElementById() is standard - use that.
[轉貼]javascript裡的document.all用法收集:
http://www.coolsun.idv.tw/modules/xhnewbb/viewtopic.php?topic_id=1233
裡面有很多例子有空時也可以看看,
擷取重點如下:
--> 從IE4開始IE的object model才增加了document.all[],
--> 來看看document.all[]的Description:
1) Array of all HTML tags in the document.Collection of all elements contained by the object. (翻譯: 也就是說document.all[]是文檔中所有標籤組成的一個數組變量，包括了文檔對象中所有元素)
2) IE’s document.all collection exposes all document elements.This array provides access to every element in the document. (翻譯: document.all[]這個數組可以訪問文檔中所有元素。)
HTML DOM Input FileUpload Object:
http://www.w3schools.com/jsref/dom_obj_fileupload.asp
擷取重點如下:
--> The Input FileUpload object represents an HTML <input> element with type="file".
--> Input FileUpload Object Properties:
--> files -- Returns a FileList object that represents the file or files selected with the file upload button
--> type -- Returns which type of form element the file upload button is
--> value -- Returns the path or the name of the selected file
Input FileUpload files Property:
http://www.w3schools.com/jsref/prop_fileupload_files.asp
擷取重點如下:
--> The files property returns a FileList object, representing the file or files selected with the file upload button.
--> Through the FileList object, you can get the the name, size and the contents of the files
--> This property is read-only.
Input FileUpload value Property:
http://www.w3schools.com/jsref/prop_fileupload_value.asp
擷取重點如下:
--> The value property returns the path or the name of the file selected with the <input type="file"> element.
--> This property returns the name of the selected file with a fake path in IE, Google Chrome, and Opera, and the name of the selected file in Firefox and Safari.
--> This property is read-only, because of security reasons.
ActiveXObject 物件 (JavaScript):
https://msdn.microsoft.com/zh-tw/library/7sw4ddf8(v=vs.94).aspx
擷取重點如下:
--> Enables and returns a reference to an Automation object.
--> This object is used only to instantiate Automation objects, and has no members.
--> 語法:
newObj = new ActiveXObject(servername.typename[, location])
--> servername.typename:
e.g.1 -- Excel.Application
e.g.2 -- Excel.Chart
e.g.3 -- Scripting.FileSystemObject
e.g.4 -- WScript.Shell
e.g.5 -- Word.Document
FileSystemObject Object:
https://msdn.microsoft.com/en-us/library/z9ty6h50(v=vs.84).aspx
擷取重點如下:
Provides access to a computer's file system.
FileSystemObject.FileExists() : FileSystemObject « MS JScript « JavaScript Tutorial:
http://www.java2s.com/Tutorial/JavaScript/0600__MS-JScript/FileSystemObjectFileExists.htm
擷取重點如下:
--> Syntax:
filesystemobject.FileExists(filename)
--> The FileExists() method determines whether a file exists.
--> This method takes filename as its only parameter.
FileSystemObject.GetFile() : FileSystemObject « MS JScript « JavaScript Tutorial:
http://www.java2s.com/Tutorial/JavaScript/0600__MS-JScript/FileSystemObjectGetFile.htm
擷取重點如下:
--> Syntax:
filesystemobject.GetFile(/file name/)
--> The GetFile() method is used to get a specified file object.
--> e.g.
<html>
<body>
<script language="JScript">
<!--
function getsize()
{
var myObject, afile, size;
myObject = new ActiveXObject("Scripting.FileSystemObject");
afile = myObject.GetFile("c:\\test.txt")
size = afile.Size; // 畫底色處為通常會一起使用的語法組合
alert("The size of the test.txt file is:" + size);
}
-->
</script>
Get the size for the file "test.txt"
<form name="myForm">
<input type="Button" value="Get Size" onClick='getsize()'>
</form>
</body>
</html>
Element.outerHTML:
https://developer.mozilla.org/zh-TW/docs/Web/API/Element/outerHTML
擷取重點如下:
--> The outerHTML attribute of the element DOM interface gets the serialized HTML fragment describing the element including its descendants. It can be set to replace the element with nodes parsed from the given string.
--> Syntax:
1) On return, content contains the serialized HTML fragment describing the element and its descendants:
var content = element.outerHTML;
2) Replaces the element with the nodes generated by parsing the string content with the parent of element as the context node for the fragment parsing algorithm:
element.outerHTML = content;
innerHTML、innerText、outerHTML、outerText差別:
http://syunguo.blogspot.tw/2013/07/innerhtmlinnertextouterhtmloutertext.html
其實這篇篇幅很短, 可以全部都看看,
擷取重點如下:
--> innerText和outerText輸出的結果是一樣的
--> innerHTML會把div內的HTML標籤給輸出
--> 而outerHTML是會把整個div區塊給輸出連自己本身也是一樣
留言
張貼留言