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");
            }
        });   
    });

upload.php的

<?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，因为它会处理浏览器版本和操作系统兼容性问题。如果您不需要任何高级内容，请阅读此documentation

以上链接中的代码

<!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和＆amp;中的提交按钮或rederict AJAX

2 个答案: