在文本框中插入文件名

Question

如何在現有文本輸入中使用此插入文件的上傳文件名 - > http://www.fengcool.com/2009/06/ajax-form-upload-local-image-file-without-refresh/或valums.com/ajax-upload/？
（我使用php）

Textbox ex。
<input name="image" type="text" value="file_name" />

Answer 1

你必須有實際的上傳處理PHP頁面響應上傳文件的文件名。

在fengcool的AJAX，它startUpload提供（）函數：

var response = $(myFrame.contentWindow.document.body).text(); 

您使用的「響應」變量，無論你需要把文件名。

它是作爲變量「圖像」實際上傳遞給addUpload（）函數，你可以通過修改也填充您的文本框中，大約是這樣的：

的document.getElementById（「圖像」）值=圖片

但是，您應該以不太通用的方式命名您的<input>以避免混淆。

UPDATE，做什麼：

1）命名的文本框在一個更獨特的方式，例如：

<input id="uploaded_image_name" type="text" value="" /> 

//另請注意，我用「身份證」，而不是「名稱」爲了能夠使用JavaScript功能的getElementById（）

2）使用fengcool的Ajax，並更改功能addUpload（）這樣的：

function addUpload(id,img){ 
    var div = $(document.createElement('div')).attr('id',id); 

    //add uploaded image 
    div.html("<img src='"+img+"'><br />"); 
    document.getElementById("uploaded_image_name").value=img 

    //add text box 
    var fileName = img.substring(img.lastIndexOf("/")+1); 
    var txtbx = $(document.createElement('input')).attr('name','img[]').attr('type','text').val(fileName); 
    /* you may want to change textbox to a hidden field in production */ 
    //var txtbx = $(document.createElement('input')).attr('name','img[]').attr('type','hidden').val(fileName); 
    txtbx.appendTo(div); 


    //add remove thumbnail link 
    var rem = $(document.createElement('a')) 
           .attr('alt',id) 
           .attr('href','javascript:;') 
           .text("Remove").click(removeUpload);  
    rem.appendTo(div); 

    //add to the page 
    div.appendTo("#uploaded_thumb"); 
} 

請注意，唯一的變化是在函數中添加了第4個命令。