Question

如何使用此插入上传文件的文件名 - ＆gt; 现有文本输入中的http://www.fengcool.com/2009/06/ajax-form-upload-local-image-file-without-refresh/或valums.com/ajax-upload/？（我正在使用php）

文本框例如 <input name="image" type="text" value="file_name" />

Answer 1

您必须让实际的上传处理PHP页面以上传文件的文件名进行响应。

在fengcool的ajax中，它在startUpload（）函数中提供：

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

您可以在需要放置文件名的地方使用该“响应”变量。

它实际上作为变量“image”传递给addUpload（）函数，您可以修改该函数以填充文本框，大致如下所示：

的document.getElementById（ “图像”）。值=图像

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

更新，该怎么做：

1）以更独特的方式命名文本框，例如：

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

//还要注意我使用了“id”而不是“name”，以便能够使用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个命令。

在文本框中插入文件名

1 个答案: