發表者討論內容

冷日
(冷日) 發表時間：2010/11/14 6:09

Webmaster

註冊日: 2008/2/19
來自:
發表數: 15771

[轉貼]javascript構造可以上傳文件的form表單

javascript構造可以上傳文件的form表單（通過js修改enctype）

原創作品，允許轉載，轉載時請務必以超鏈接形式標明文章原始出處、作者信息和本聲明。否則將追究法律責任。http://kiddymeet.blog.51cto.com/20194/29166

在上傳文件時，我們都知道需要在form表單中加上enctype="multipart/form-data"。而在開發過程中，也有可能遇到需要用javascripts構造form表單的情況。一般javascript構造form，可以使用以下方法：

var form = document.createElement('form');
form.id="the_form";
form.action="/img.php";
form.method='post';
form.name="the_form_";

當javascript構造的form，遇到需要上傳文件的時候，本以為直接加一句form.enctype="multipart/form-data"就能解決問題，卻發現滿不是那麼回事。從網上搜了一些原因，最終找到解決原因，原來javascript的form的對象名並不應該是enctype，而應該是encding，改為form.encding="multipart/form-data"，問題解決。

將表單放到HTML標籤中可以使用以下代碼：

var parNode = document.getElementById("plus");
parNode.appendChild(form);//在plus中增加form表單，plus為html中的一個層

表單中也可以放入input、checkbox等表單，可以使用以下代碼，通過表單的對象可以改變表單的類型和值：

var input=document.createElement("input");
input.id="upfile_1";
input.name="upfile_1";
input.type="file";
input.className="file_upload";
input.onchange=function (){//點擊表單時調用upload_pic()函數
     upload_pic();
}
form.appendChild(input);//在form中追加input表單

本文出自「匣子」博客，請務必保留此出處http://kiddymeet.blog.51cto.com/20194/29166

冷日：原文中有一個疏漏，冷日在這裡訂正：
就是原文提到

form.enctype="multipart/form-data"

是不能使用低，這是正確低！
不過原文中也提到修正法：

form.encding="multipart/form-data"

這句卻是錯低！
正確的寫法如下：

form.encoding = "multipart/form-data";

順便補充一下，form的encoding有以下幾種可能：

form.encoding = "text/plain";
form.encoding = "multipart/form-data";
form.encoding = "application/x-www-form-urlencoded";

回覆

主題一覽的下方

討論串

前一個主題 | 下一個主題 | 頁首 |

| |

發表新主題

網頁設計 : [轉貼]javascript構造可以上傳文件的form表單