最简单的图像上传功能，无需刷新页面

Question

这是一个挑战：

我不关心使用哪种语言，Javascript，PHP，等等。 我需要最简单的方法让我的用户上传图片。 我稍后会为用户提供一种方法将它放在画布上（显示在div中，并且jquery可拖动）

我不能刷新页面，因为在其他字段等中有有用的变量。

（我没有任何安全偏好，因为这将是Intranet的本地网站）

我试过了：

<form action="upload_file.php" method="post" enctype="multipart/form-data">
            <label for="file">Filename:</label>
            </br>
            <input type="file" name="file" id="file" size="70%"><br>
            </br>
            <input type="submit" name="submit" value="Submit">
            </form>

但后来意识到那里有很多选项，比如uploadify，我很容易迷失在线..

Answer 1

您可以通过两种方式进行文件上传，无需刷新页面：

• 使用HTML5表单上传
• 将表单发布到隐藏的iframe

后者提供了最佳的浏览器兼容性，我建议你使用它。要发布到隐藏的iframe，只需将表单的target设置为iframe：

<script>
// Global callback function from the file
function uploadCallback(){
    console.log("File is uploaded!");
}
</script>

<iframe name="hiddentarget" style="display:none;"></iframe>
<form action="upload_file.php" method="post" enctype="multipart/form-data" target="hiddentarget">
    ...

要从iframe回复该网站，您必须完成window.top框架：

<强> upload_file.php：

<?php
// Uploading stuff
// ...

// "Talk" back to the site
// Of course you can (should) pass some parameter to this JS-function, like the filename of the recently uploaded image.
echo "<script>window.top.uploadCallback();</script>";
?>

修改 正如其他用户所建议的;最佳解决方案是使用受支持的File API，然后回退到不支持它的浏览器上隐藏的iframe。这为您提供了很好的功能，例如文件uploda进度。

Answer 2

我建议的方式是使用AJAX并使你的上传框成为div，当上传成功时可以替换它。而不是传统的帖子，然后你为onSubmit创建一个Javascript函数。然后，您的操作可以更改为＃。

如果你查找AJAX有一些很棒的教程，你将能够做更多令人惊奇的事情。

或者看看jQuery肯定会有一些东西可以帮助你

Answer 3

我将向您展示如何使用jQuery Form Plugin将文件上传到服务器的示例，而无需刷新页面。

首先，下载并安装 jQuery Form Plugin 。执行此操作后，将其包含在您要使用它的文件中。像这样在表单标记中添加ID属性：

id="unique_id"

确定上传表单后，将此代码放入jQuery：

$(function() {
    $('#unique_id').ajaxForm({
        target: '.myTarget' // Display here whatever the server side script returns
        success: function(response) {
            // An usual success callback
        }
    })
})

假设您的服务器端语言是 PHP ，这就是简单上传脚本的样子（upload_file.php）：

<?php
$uploaddir = 'your_upload_dir/something';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']); // Filename

if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
    echo $uploadfile;
} else {
    echo "Error";
}
?>

userfile是文件输入的name属性（<input type="file" />）。

以上代码组合返回图像的相对路径，您可以使用该路径在img标记内显示图像。你必须使用Javascript（或jQuery）。