MozTW 討論區
https://forum.moztw.org/

動態增加 input type="file" 無法上傳
https://forum.moztw.org/viewtopic.php?f=13&t=20761
1 頁 (共 1 頁)

發表人:  alpe [ 2007-10-24, 21:32 ]
文章主題 :  動態增加 input type="file" 無法上傳

在寫一個可以增加上傳欄位數的表單
code 如下.
不過不知道為什麼.
在 firefox 下
用 innerHTML 上傳檔案會全掛, 沒一個上傳成功

用createElement 則只有第一個會上傳成功

btw 在 ie 下是都可以用

找了半天都沒找到資料... ... ...

代碼:
<script>
function addinp(){
   nu = $('addnu').value;
   if(isNaN(nu)) return false;
   ip_nu = $('ulinput').getElementsByTagName('input').length;
   for(i = 1 ; i <= nu ; i++) {
      if(ip_nu+i > 10)   break;
      
         elem = document.createElement('input');
         br = document.createElement('br');
         elem.setAttribute('type', 'file');
         elem.setAttribute('name', 'uf[]');
         $('ulinput').appendChild(br);
         $('ulinput').appendChild(elem);
      
      //$('ulinput').innerHTML += '<br/> <input type="file" name="uf[]" >';
   }
   return true;
}
</script>

<form name="addprocess" action="test.php" method="post" enctype="multipart/form-data">
   <div id="addfdiv" class="d_left">
      <select id="addnu" >
      <option >增加上傳檔案欄位</option>         <option value=1 >1</option>
      <option value=2 >2</option>   <option value=3 >3</option>
      <option value=4 >4</option>   <option value=5 >5</option>
      </select>
      <input type="button" value="增加" onclick="addinp();">
      <br/>
      <span class="conRed">最大上傳數10</span>
   </div>
   <div id="ulinput" class="d_right">
      <input type="file" name="uf[]" >
   </div>
   <div class="clear"></div>
   <div>
<input type="submit" >
</form>

發表人:  GlinX [ 2007-10-25, 08:41 ]
文章主題 : 

alpe 寫:
在寫一個可以增加上傳欄位數的表單
code 如下.
不過不知道為什麼.
在 firefox 下
用 innerHTML 上傳檔案會全掛, 沒一個上傳成功

用createElement 則只有第一個會上傳成功

btw 在 ie 下是都可以用

找了半天都沒找到資料... ... ...

代碼:
<script>
function addinp(){
   nu = $('addnu').value;
   if(isNaN(nu)) return false;
   ip_nu = $('ulinput').getElementsByTagName('input').length;
   for(i = 1 ; i <= nu ; i++) {
      if(ip_nu+i > 10)   break;
      
         elem = document.createElement('input');
         br = document.createElement('br');
         elem.setAttribute('type', 'file');
         elem.setAttribute('name', 'uf[]');
         $('ulinput').appendChild(br);
         $('ulinput').appendChild(elem);
      
      //$('ulinput').innerHTML += '<br/> <input type="file" name="uf[]" >';
   }
   return true;
}
</script>

<form name="addprocess" action="test.php" method="post" enctype="multipart/form-data">
   <div id="addfdiv" class="d_left">
      <select id="addnu" >
      <option >增加上傳檔案欄位</option>         <option value=1 >1</option>
      <option value=2 >2</option>   <option value=3 >3</option>
      <option value=4 >4</option>   <option value=5 >5</option>
      </select>
      <input type="button" value="增加" onclick="addinp();">
      <br/>
      <span class="conRed">最大上傳數10</span>
   </div>
   <div id="ulinput" class="d_right">
      <input type="file" name="uf[]" >
   </div>
   <div class="clear"></div>
   <div>
<input type="submit" >
</form>


要不要試著逆向操作?

就是常見的向下展開式選單 (我不是指 select 組件) 使用的做法

先創出來後將其 hidden

發表人:  kourge [ 2007-10-25, 12:38 ]
文章主題 : 

你似乎用的是 Prototype.js?

發表人:  alpe [ 2007-10-25, 13:00 ]
文章主題 : 

算是, 也算不是.
只有抓了這個func用.

代碼:
function $(){
   if (arguments.length > 1) {
      for (var i = 0, elements = [], length = arguments.length; i < length; i++)
         elements.push($(arguments[i]));
      return elements;
   }
   if (typeof arguments[0] == 'string')
      return document.getElementById(arguments[0]);
}


今天用了這個試了一下
http://the-stickman.com/files/mootools/multiupload/

結果. 在test code 沒問題.

但放到程式內就爆了... ...

發表人:  alpe [ 2007-10-25, 13:32 ]
文章主題 : 

GlinX 寫:
要不要試著逆向操作?
就是常見的向下展開式選單 (我不是指 select 組件) 使用的做法
先創出來後將其 hidden


現在感覺是新增的 node firefox 不認帳.
跟 form 的位置 有關!?

發表人:  kourge [ 2007-10-25, 16:23 ]
文章主題 : 

alpe 寫:
算是, 也算不是.
只有抓了這個func用.

代碼:
function $(){
   if (arguments.length > 1) {
      for (var i = 0, elements = [], length = arguments.length; i < length; i++)
         elements.push($(arguments[i]));
      return elements;
   }
   if (typeof arguments[0] == 'string')
      return document.getElementById(arguments[0]);
}


今天用了這個試了一下
http://the-stickman.com/files/mootools/multiupload/

結果. 在test code 沒問題.

但放到程式內就爆了... ...

mootools 也有自己的 $()。

發表人:  GlinX [ 2007-10-25, 20:42 ]
文章主題 : 

alpe 寫:
GlinX 寫:
要不要試著逆向操作?
就是常見的向下展開式選單 (我不是指 select 組件) 使用的做法
先創出來後將其 hidden


現在感覺是新增的 node firefox 不認帳.
跟 form 的位置 有關!?


不知道

因為我還沒寫過你要的功能 @@

而且也有可能 IE 反而是異常的特例 (異常的"成功")...

如果要堅持這種寫法的話可能要問其他人了...

1 頁 (共 1 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/