Ajax文件上传(使用Iframe)返回并使用文件名进行其他操作

Question

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

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

<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中使用带有ID的echo(其中$title是给定文件的"清理"版本)。

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

所以在我上传之后，我的iframe看起来像:

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

因此，我可以通过以下提交功能获得file_path:

$('#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，这是相当明显的文件提交()和上传不是即时的。现在我想添加一个小延迟，但我也不能让它工作。

所以，我希望有一些.submit(function(){ });回调函数(这不是这个版本的submit(function(){})的情况，但也许有一些函数或功能。submit()我不知道)。

那么我怎么能得到#file_path path attribute(即上传的文件路径)从iFrame，文件上传后。

Answer 1

use: var path = $('#upload_form').find('iframe').contents().find('#file_path').val();

表示输入" multiple "，像这样:

var $fileInput = $('#upload_form').find('iframe').contents().find('#file_path');
var fileInput = $fileInput[0];
if ( $this.prop('multiple') ) {        
    for ( var i=0; i<fileInput.files.length; i++) { 
        var path = fileInput.files[i].fileName;
        // do something
    }
}
else {        
    var path = fileInput.value;
    // do something
}

请注意，您应该在输入(<input id='file_path' type='file' name='file'>)中使用id 'file_path '，或者将选择器更改为$('#upload_form').find('iframe').contents().find('input:file');

EDIT:我想我更明白你想做什么:

$('#submit').live('click', function() {
  $form = $(this).closest('form')
  $.post($form.attr('target'), $.serialize($form), function(data) {
        var path = upload_form.find('iframe').contents().find('#file_path').attr('path');
        // do something (data is the response from 'upload_form' file
  });
  return false; // So it can be used with multiple forms on the screen
});

$。Post函数取代标准的submit函数。(实际上你可以不用表单来使用它)。我可以替换0

Answer 2

使用setTimeout调用额外的函数并检查是否可以获得图像，否则再次使用setTimeout。然后将图像上传，并可用于其他操作:

$('#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中，你可以尝试请求图像，如果它工作，执行其他操作

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

如果文件总是很小，那么延迟时间可能会大大降低