通过iframe上传文件在IE中不起作用

时间:2013-04-26 00:45:27

标签: php javascript forms iframe

我有两个文件iframe.phpiframe.htmliframe.php包含一个文件的上传表单,我希望在iframe.html中显示为iframe(仅适用于IE< 10,否则我可以使用ajax上传而不会出现任何问题)。

它在IE.10中工作正常,但在IE.9中我需要在提交按钮上单击两次才能上传,在IE.8中它根本不起作用且$output总是返回{ {1}}并且还需要点击两次,我不确定问题是什么!任何帮助都会很棒。

iframe.php

Error: invalid file

iframe.html

<div id="uploadImage">

<form method='POST' enctype='multipart/form-data' action='<?php echo $_SERVER['PHP_SELF'] ?>'>
    <input type="text" disabled placeholder="Choose an Image to upload" id="file_input" name="file_input" />
    <input type="button" id="file_btn" value="" onClick="document.getElementById('file').click()" />
    <input type="submit" id="upload" value="" />
    <div style="width: 0; height: 0; overflow: hidden;">
        <input type="file" id="file" name="file" />
    </div>
</form>

<div id="properties" class="texxt">
    <p>Name: <br/>
       Size: max 2 MB or 2000 KB<br/>
       Type: (jpg, jpeg, png, gif)
    </p>
</div>

<div id="results">
<?php
$status = "Close";
$source = "";
if( isset($_FILES['file']))
{
    $allowedExts = array("gif", "jpeg", "jpg", "png");
    $extension = end(explode(".", $_FILES["file"]["name"]));
    $size = (int) $_SERVER['CONTENT_LENGTH'];

    if ( (($_FILES["file"]["type"] == "image/gif")  ||
          ($_FILES["file"]["type"] == "image/jpeg") ||
          ($_FILES["file"]["type"] == "image/jpg")  ||
          ($_FILES["file"]["type"] == "image/png")) &&
          in_array($extension, $allowedExts)        &&
          ($size < (2 * 1024 * 1024)) )
    {
        if ($_FILES["file"]["error"] > 0)
        {
            $output = "Return Code: " . $_FILES["file"]["error"];
        }
        else
        {
            if (file_exists("upload/" . $_FILES["file"]["name"]))
            {
                $output = "Error: File already exists. Please rename your file or chose a different one";
            }
            else
            {
                move_uploaded_file($_FILES["file"]["tmp_name"],
                "upload/" . $_FILES["file"]["name"]);
                $status  = "Add Image";
                $output  = "Uploaded Successfully";
                $source  = sprintf(" !img! %s !*img! ", $_FILES["file"]["name"]);
            }
        }
    }
    else
    {
        if (!in_array($extension, $allowedExts))
        {
            $output = "Error: Please select an image.";
        }
        elseif ( ($size > (2 * 1024 * 1024)) && in_array($extension, $allowedExts) )
        {
            $output = "Error: File size(" . $size . ") exceeds the limit of 2 mb.";
        }
        else
        {
            $output = "Error: Invalid file";
        }
    }
    echo $output;
}

?>
</div>
<p align="center">
    <input type="hidden" name="source" id="source" class="source" value="<?php echo $source ?>" />
    <input type="button" id="close" class="close" value="<?php echo $status ?>" />
</p>
</div>

<script>
    document.getElementById('file').onchange = function(){
        var path = this.value.replace(/C:\\fakepath\\/, ''),
            props = document.getElementById('properties');
        props.innerHTML = props.innerHTML.replace('Name: ', 'Name: ' + path);
        document.getElementById('file_input').value = path;
        document.getElementById('results').innerHTML = "";
    };
</script>

1 个答案:

答案 0 :(得分:2)

由于安全原因,IE不允许从javascript操纵type="file"输入元素。设置文件名或调用click事件以显示浏览器对话框将导致表单提交“访问被拒绝”错误,用户必须手动单击文件输入。

对于IE.8中的invalid file错误,问题与$_FILES['file']['type']有关,我之前有过这个问题。使用var_dump($_FILES['file']['type'])时,您可以看到它显示的文件类型如下:

jpeg -> pjpeg
jpg  -> pjpeg
png  -> x-png
gif  -> gif

解决问题,将x-pngpjpeg添加到允许的文件类型中:

if ( (($_FILES["file"]["type"] == "image/gif")    ||
      ($_FILES["file"]["type"] == "image/jpeg")   ||
      ($_FILES["file"]["type"] == "image/jpg")    ||
      ($_FILES["file"]["type"] == "image/pjpeg")  ||
      ($_FILES["file"]["type"] == "image/png")    ||
      ($_FILES["file"]["type"] == "image/x-png")) &&
      in_array($extension, $allowedExts)          &&
      ($size < (2 * 1024 * 1024)) )
{