上传 img 而不使用提交按钮或在 PHP 和 AJAX 中重写

Question

这可能看起来像重复，但我还没有找到完全符合我需求的东西。 我想通过在文件浏览器中选择一个文件来将图像上传到一个文件夹，没有使用提交按钮（到目前为止很好，我可以做到这一点）。 但是我不希望用户被重定向到upload.php文件。 所以我需要在没有使用提交按钮的情况下提交一个文件，而不是将用户重定向到另一个页面。 刷新是可以的，但最好不要刷新。这就是我现在所拥有的，我的问题是这是否可以在PHP,AJAX & Javascript完成，或者我是否应该使用JQuery plugin ？

而且我会有几种表格，所以我不使用 ID-tag

到目前为止，我的代码不能 100% 工作，只有当我上传并重定向到upload.php ：

<form action="upload.php" method="post" enctype="multipart/form-data">
  <input type="file" name="fileToUpload" class="test">
</form>

    $(".test").change(function() { 
        $.ajax({
            url: "upload.php",
            type: "post",
            dataType: 'json',
            processData: false,
            contentType: false,
            data('file', $(this[0].files[0])),
            success: function(text) {
                    alert("successfully");
            }
        });   
    });

上传文件

<?php if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], "uploads/myfile.jpg")) {
    echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
 } else {
    echo "Sorry, there was an error uploading your file.";
     }
 }?>

Answer 1

我建议您使用jQuery-File-Upload，因为它会处理浏览器版本和操作系统兼容性问题。 如果您不需要任何高级内容，请阅读此文档

上面链接中的代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});
</script>
</body> 
</html>

根据 OP 评论编辑：

$(function () {
    $('.fileuploads').each(function(i, obj){
        $(obj).fileupload({
            dataType: 'json',
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    $('<p/>').text(file.name).appendTo(document.body);
                });
            }
        });
    });
});

Answer 2

您可以使用以下方法而无需单击按钮并刷新页面文件上传。

<form id="uploadform" target="upiframe" action="upload.php" method="post" enctype="multipart/form-data">
  <input type="file" name="fileToUpload" class="test" onchange="yourFunction()">
</form>

<iframe id="upiframe" name="upiframe" witdh="0px" height="0px" border="0" style="width:0; height:0; border:none;"></iframe>


function yourFunction() {
    var form = document.getElementById('uploadform');
    form.submit();
  });
}

上传 img 而不使用提交按钮或在 PHP 和 AJAX 中重写

问题描述

2 个解决方案

解决方案1
0 2015-06-15 09:09:11

解决方案2
0 2015-06-15 09:17:14

上传 img 而不使用提交按钮或在 PHP 和 AJAX 中重写

问题描述

2 个解决方案

解决方案1 0 2015-06-15 09:09:11

解决方案2 0 2015-06-15 09:17:14

解决方案1
0 2015-06-15 09:09:11

解决方案2
0 2015-06-15 09:17:14