Question

我正在尝试上传文件以查看iFrame上的文件，但它无法正常工作。

这是我试过的

jQuery('.file_upload1').change(function(){ jQuery('iframe').attr('src', jQuery(this).val()); $('iframe').attr('src', $('iframe').attr('src')); });
<label><input class="file_upload1" name="file_cover" type="file"></label>
<div>
    <iframe src=""></iframe>
</div>

如果这不起作用，我可以将上传的文件移动到服务器目录，以使路径生效吗？我该怎么做？

Answer 1

除了此类解决方案的其他问题和限制，并特别回答＆＃34;为什么它不起作用？＆＃34;问题：

change事件需要嵌套在ready函数中：

jQuery("document").ready(function() {
    jQuery('.file_upload1').change(function() {
        jQuery('iframe').attr('src', jQuery(this).val());
    });
});

src的{{1}}属性必须为a valid non-empty URL potentially surrounded by spaces。选择iframe的文件时，在Windows中，该值将类似于input type file，因此在使用c:\fakepath\file name goes.here来源之前，您必须稍微重做一下。

关于

我尝试上传文件并将其显示在iframe上，强制重新加载

您不需要强制重新加载来实现此目的。＆＃34;上传＆＃34;意味着页面将被重新加载（好吧，除非使用AJAX处理上传，但我猜这不是这种情况）。要上传文件，必须提交表单并重新加载页面。重新加载后，您可以轻松构建文件的完整路径并在iframe中使用它，例如：

iframe

但是如果您想在上传到服务器之前预览<iframe src="<?php echo $file_full_url; ?>"></iframe> 中的文件 - 由于安全原因，它将无法实现。请参阅此问题以供参考：How to get full path of selected file on change of <input type=‘file’> using javascript, jquery-ajax?

jQuery查看上传的文件

1 个答案: