jQuery自定義文件輸入插件 - 文件沒有上傳

Question

**對於未來的讀者**

雖然我接受了答案，但是這個問題對我來說並沒有解決。用戶dbf顯然知道他的東西，也許他的答案會爲你工作。如果沒有，我很抱歉。水對我來說太深了，我沒有時間花費在這個上面，所以我重寫了我的代碼以刪除自定義文件輸入的細節。我會完成我的項目，然後，如果可能的話，返回到此代碼併發布我的解決方案。然而，在一天結束時，用戶dbf付出了很大的努力，值得信賴。

---

ajax調用返回一個表格結構，它放在表格標籤中。

ADD ROW按鈕克隆一個表格行，並帶有用於上傳文件的鏈接（定製文件輸入作爲定位標記）。

我用jquery-custom-file-input.js插件從here替換INPUT TYPE = FILE元素。這個jquery插件允許將任何元素轉換爲文件輸入元素，所以我使用一個錨定標記#change_pd作爲文件輸入元素。但是爲了實際上傳文件，最簡單的文檔說「將輸入元素附加到表單元素」。

This StackOverflow question正好解決了這個問題，但我一直無法使它在我的情況下工作。

一個標準的提交按鈕提交表單，除了上傳的文件以外都收到了一切。

---

HTML - 一個Ajax生成的表插入DIV #reportstable

<form action="" method="post" name="upd" enctype="multipart/form-data" id="AFrm"> 
    <div id="reportstable"> 
    </div> 
</form> 

---

AJAX內 - 返回的表看起來是這樣的。該表放置在上面的div #reportstable中。

<table id="DocTable"> 
<tr> 
    <td>New Document</td> 
    <td> 
     <span id="span_pd"></span> 
     <input type="hidden" id="proj_id" name="proj_id" value="'.$project_id.'"> 
     <input type="hidden" id="status_pd" name="status_pd"> 
    </td> 
    <td> 
     <a id="change_pd" href="#">change</a> 
     <input type="hidden" id="new_pd" name="new_pd"> 
    </td> 
</tr> 
</table> 

---

JQUERY - 這是插入一個文件的代碼。它確實將所選文件名作爲文本放入SPAN中，並放入$ POST數據中收到的隱藏輸入文件#new_pd中。

但是，文件本身沒有上傳。

我不知道在哪裏放.appendTo（），或如何寫jQuery。這是我試過的。除了.appendTo（）之外，所有東西都可以工作。

$(document).on('click','#change_pd',function() { 
    $(this).file().choose(function(e, input) { 
     $('#new_pd').val(input.val()); 
     $('#span_pd').html(input.val()); 
     $('#span_pd').css('color','grey'); 
     $('#status_pd').val('CHANGED'); 
    }); 
    $(this).css('text-transform','uppercase'); 
    $(input).appendTo('#AFrm'). 
     attr('name', 'a-name'). 
     attr('id', 'an-id'); 
    }); 

---

PS - 如果任何人都可以推薦一個更好的（？首選）定製文件輸入插件，我所有的耳朵。

Answer 1

如果你看一下從插件的代碼你給

var file = $('<div><form></form></div>').appendTo('body').css({ 
     'position': 'absolute', 
     'overflow': 'hidden', 
     '-moz-opacity': '0', 
     'filter': 'alpha(opacity: 0)', 
     'opacity': '0', 
     'z-index': '2'  
    }); 

    var form = file.find('form'); 
    var input = form.find('input'); 

    function reset() { 
     var input = $('<input type="file" multiple>').appendTo(form); 
     input.change(function(e) { 
      input.unbind(); 
      input.detach(); 
      btn.trigger('choose', [input]); 
      reset(); 
     }); 
    }; 
    reset(); 

，那麼你將看到<form>和<input type="file" multiple>附加到body。這意味着您的id="AFrm"表單不包含任何<input type="file">元素，這就是爲什麼您沒有上傳任何文件，而只接收文件的選定名稱。

你可以適應插件的輸入追加到參數通過對象像{ 'form':$('#AFrm') }