Question

我有一个表单，我试图弄清楚如何在用户上传图片后提交表单并确认它是图片。我正在尝试使用javascript来验证正在上传的图片。

Answer 1

试试这个：

<script>
    function submitFormAfterImageCheck()
    {
        if(/(\.jpeg|\.jpg|\.gif|\.png|\.tiff)$/.test(document.getElementById("myFile").value))
        {
            document.getElementById("myForm").submit();
        }
        else
        {
            alert("you can only upload an image");
        }
    }
</script>

HTML：

<input id="myFile" type="file" onchange="submitFormAfterImageCheck();" />

Answer 2

您可以使用iframe处理上传

<iframe src="upload.php" id="uploadHandler"></iframe>

和javascript来处理上传/接收状态

var form = document.getElementById("avatar_form");
var inpUpload = document.getElementById("upload_button");
var fileSelector = document.getElementById("file_browser");
var uploadHandler = document.getElementById('uploadHandler');

inpUpload.onclick = function() {

    form.target = uploadHandler;
    uploadHandler.onload = function() {
        alert(uploadHandler.document.body.innerHTML);
    }
}

并在php文件upload.php中：检查$ _FILES数组，如果上传的文件没问题，并回复一些响应，如：

$allowed_extensions = array("jpg", "png", "gif");
if (in_array(end(explode(".", $_FILES['file_browser']['filename'])), $allowed_extensions)) {
    echo "upload OK";
}
else {
    echo "invalid file";
}

尚未测试......但是：）

Answer 3

您可以在客户端检查文件扩展名，然后决定是否触发提交表单（jQuery样式）：

<script>
    $(function(){
        $('#fileDivId').change(function(){
            $this = $(this);
                if ($.inArray($this.val().split('.').pop().toLowerCase(), ['jpg', 'jpeg', 'png', 'gif']) != -1) {
                    $this.parent().trigger('submit');
                }
        });
    });
</script>
    <form action="post.php" method="POST">
        <input type="file" id="fileDivId">
    </form>

但这里有一些弱点：

1）您仍然必须在服务器端清理您的图像

2）当输入类型为“file”时，不太确定$（'inputId'）。val（）是如何工作的。例如，firefox 4返回文件名，但如果我没记错的话，IE将返回文件的完整路径（C：\ Docs \ Img \ etc），而且由于安全原因，它可能在某些浏览器中被禁用。

3）在我的代码中获取扩展部分并不完美 - 更加简洁：用户选择文件C：\ Doc.img \ file_no_ext，它返回“img \ file_no_ext”

如何在用户选择图片后立即提交表格？

3 个答案: