HTML 文件上传 - 为啥使用 IFrame

Posted 2023-03-05

【中文标题】HTML 文件上传 - 为啥使用 IFrame

【英文标题】：HTML File Upload - why use IFrameHTML 文件上传 - 为什么使用 IFrame

【发布时间】：2016-02-17 09:22:28

【问题描述】：

我一直在尝试让文件上传在 IE8 中工作。我见过的唯一解决方案是发布到 IFrame。为什么这样做？是不是不可能有一个简单的表格，例如

<form action="test.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
</form>

直接提交给PHP

if(isset($_POST["submit"])) 
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) 
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
     else 
        echo "File is not an image.";
        $uploadOk = 0;
    

为什么需要 IFrame？

谢谢

【参考方案1】：

您不需要 iframe 来上传文件。

您需要一个 iframe 来上传文件不离开当前页面（即对于 Ajax）。现代浏览器支持FormData，它允许您使用XMLHttpRequest 上传文件。

【参考方案2】：

iframe 方法真的很简单。 基本上，您使用 iframe 来上传文件，而不是使用主窗口来上传文件，但您不需要使用 iframe。

方法一

这是一个很好的教程：http://hungred.com/how-to/tutorial-easiest-asynchronous-upload-file-ajax-upload/

html：

<form id="my_form" name="form" action="upload.php" method="POST" 
enctype="multipart/form-data" >

<div id="main">
<input name="my_files" id="my_file" size="27" type="file" />
<input type="button" name="action" value="Upload" onclick="redirect()"/>
<iframe id='my_iframe' name='my_iframe' src="">
</iframe>
</div>    
</form>

JS：

function redirect()

//'my_iframe' is the name of the iframe
document.getElementById('my_form').target = 'my_iframe';
document.getElementById('my_form').submit();

PHP：

$uploaddir = '/images/';
$uploadfile = $uploaddir . basename($_FILES['my_files']['name']);

if (move_uploaded_file($_FILES['my_files']['my_name'], $uploadfile)) 
echo "success";
 else 
echo "error";

2。 AJAX 方法

JS：

function submitForm() 
        var formData = new FormData($('#imageForum')[0]);

            $.ajax(
                url: '/FileUpload',
                type: 'POST',
                data: formData,
                async: false,
                success: function (data) 
                    alert('posted')
                ,
                cache: false,
                contentType: false,
                processData: false
            );

            return false;
    

HTML：

<form id="imageForum" action="javascript:submitForm();" method="post" enctype = "multipart/form-data">
    <div>
        <label for="fileUpload">File upload</label>
        <input type="file" id="fileUpload" name="fileUpload" />
    </div>
</form>