返回Ajax文件(带有Iframe)并使用文件名执行其他操作 [英] Ajax file upload (with Iframe) returning and using the filename for additional actions

问题描述

简而言之，我想从iFrame中获取刚刚上传的文件的文件名.

In short, I want to get the filename of the file I just uploaded from inside an iFrame.

让我首先告诉您，我确实有一个或多或少有效的ajax上传脚本(即现在适合我的需要).它非常简单，如下所示:

Let me start by telling you that I do have a more or less working ajax upload script (i.e suits my needs for now). It is very simple and goes as follows:

<form action='upload.php' method='post' enctype='multipart/form-data' target='upload_frame' id='create_file'>

  <iframe id='upload_frame' name='upload_frame' src='' scrolling="no"></iframe>

  <label>Title</label>
  <input type='text' name='title'>

  <label>File</label>
  <input type='file' name='file'>

  <button id='submit'>Upload</button>
</form>

我可以通过按下show-upload-form按钮来包括"此表单，以便可以将该表单动态添加到页面中.现在，当单击提交"按钮时，"upload.php"将处理上传并将文件名放在iFrame中.由于我是iFrame的所有者，因此我尝试在upload.php(其中$ title是给定文件的清理"版本)中使用带有ID的回显.

I can 'include' this form by pressing a show-upload-form button so this form can be added to a page dynamically. Now when the submit button is clicked 'upload.php' will handle the upload and put the filename in the iFrame. Since I am the owner of the iFrame I tried using an echo with an ID in the upload.php (where $title is the 'cleaned' version of a given file).

echo <span id="file_path" path="uploads/'.$title.'">' . $title . '</span>'

(因此，在我上传iframe后，它会像这样:

(So after I upload my iframe would look like:

<iframe 'stuffinigs'>
  <span id="file_path" path="uploads/somefile.png">somefile.png</span>
</iframe>

所以我可以获得具有以下提交功能的file_path:

So I could get the file_path with the following submit functionality:

$('#submit').live('click', function() {
  upload_form.find('form').attr('action', UPLOAD_SCRIPT_URL).submit();

  var path = upload_form.find('iframe').contents().find('#file_path').attr('path');

  /* I would like to do more actions with the path here */

  return false; // So it can be used with multiple forms on the screen
});

所以上传可以正常工作，但是path是undefined，这很明显，因为文件commit()和上传不是即时的.现在，我考虑增加一个小的延迟，但是我也无法使它正常工作.

So the upload works, but the path is undefined, which is pretty obvious as the file submit() and upload isn't instant. Now I thought about adding a small delay, but I couldn't get that to work either.

因此，我希望有一些.submit(function(){ });回调函数(对于此版本的submit(function(){})并非如此，但也许有些我不知道的.submit()函数).

So, I am hoping there is some .submit(function(){ }); callback function (this is not the case for this version of submit(function(){}), but maybe there is some function or functionality of .submit() I do not know of).

在文件上传后，如何从iFrame获取#file_path path attribute(即上传的文件路径).

So how can I get the #file_path path attribute (i.e the uploaded file path) from an iFrame, after a file has been uploaded.

推荐答案

使用setTimeout调用其他函数，并检查是否可以获取图像，否则请再次使用setTimeout.然后，该图片将被上传，并可用于其他操作:

Use setTimeout to call an additional function and check if you can get the image, else reuse setTimeout again. Then the image is uploaded and can be used for additional actions:

$('#upload_submit').live('click', function() 
{  
  upload_form.find('form').attr('action', UPLOAD_SCRIPT_URL).submit();
  setTimeout("include_image()", 2000); 

  $('#editor').focus();
  return false; // so you don't interrupt forms
});

现在在include_image中，您可以尝试请求该图像，如果可以，请执行其他操作

Now in include_image you can try to request the image and if it works do the other actions

function include_image()
{
  var file_path = upload_form.find('iframe').contents().find('#file_path').attr('path');

  if (typeof file_path !== 'undefined')
    document.execCommand('InsertImage', false, file_path);
  else
    setTimeout("include_image()", 1000);
}

也许文件总是很小，延迟时间可能会短很多

Maybe if files are allways quite small the delay time could be alot lower

这篇关于返回Ajax文件(带有Iframe)并使用文件名执行其他操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！