在文本框中插入文件名

发布于 2024-10-11 01:38:28 字数 349 浏览 2 评论 0原文

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

文本框 ex.
<输入名称=“图像”类型=“文本”值=“文件名”/>

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

ㄖ落Θ余辉 2024-10-18 01:38:28

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

在 fengcool 的 ajax 中，它在 startUpload() 函数中提供：

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

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

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

document.getElementById("image").value=image

不过，您可能应该命名您的 < code> 以不太通用的方式避免混淆。

更新，该怎么做：

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");
}

请注意，唯一的更改是在函数中添加了第四个命令。

You have to have the actual upload processing PHP page respond with the filename of the uploaded file.

In fengcool's ajax, it is provided in startUpload() function with:

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

You use that "response" variable wherever you need to put the filename.

It is actually passed as variable "image" to the addUpload() function, which you can modify to also populate your text box, approximately like this:

document.getElementById("image").value=image

You should probably however name your <input> in a less generic fashion to avoid confusion.

UPDATE, what to do:

1) name your textbox in a more unique way, for example:

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

// Note also that I have used "id" rather than "name", in order to be able to use Javascript function getElementById()

2) use fengcool's ajax, and change the function addUpload() like this:

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");
}

Note that the only change was the addition of the 4th command in the function.

回复收藏 0 原文

~没有更多了~