Question

我使用了jquery.form插件，它的工作和良好但是当改变输入值时......它提交的很好！但重定向到我的uploader.php文件，我不想重定向我，我需要得到div.result的结果，

了解我，请查看我的代码：

HTML

2
6
7
9
5
6
3
2
2
3
.. and so on

uploader.php文件：

<form id="uploader" action="uploader.php" method="post" enctype="multipart/form-data">
    <input id="file" type="file" name="uploader" value="" draggable="true">
    <input name="submit" type="submit" class="submit" value="Upload">
    <div class="result"></div>
</form>

jQuery代码：

<?php
    if( isset($_POST['submit']) and $_SERVER['REQUEST_METHOD'] == "POST" ){
        echo 'done!';
    }
?>

我需要回应＆＃39;做完＆＃39;在.result div中，我不想将我重定向到uploader.php页面。

Answer 1

更改输入值时，它实际上在做什么吗？我的意思是它提交表格吗？或者只有在您单击提交按钮时才会发生这种情况？

在我看来，你的脚本并没有真正做任何事情。它会在表单元素上侦听onchange事件，但根据我的经验，该事件永远不会在<form>上触发。所以你只需要提交一个没有脚本帮助的HTML表单。

除此之外，出于安全原因，我不确定您是否可以使用脚本提交multipart / form-data表单。也许我错了，但无论如何，如何使用iframe呢？

<form id="uploader" action="uploader.php" method="post" enctype="multipart/form-data" target="resultframe">
    <input id="file" type="file" name="uploader" value="" draggable="true">
    <input name="submit" type="submit" class="submit" value="Upload">
    <div class="result"><iframe name="resultframe" onload="$('.result').hide().slideDown('fast');"></iframe></div>
</form>

老实说，我不知道这些天上ifload是否适用于iframe，我多年来都没有尝试过。如果做不到这一点，请删除<div class="result">和相应的</div>，并将它们与动画脚本一起放入uploader.php的输出中。

Answer 2

下面的代码应该解决你遇到的很多问题，我的代码中的一些部分可能需要一点点tweeking来解决你的具体问题并且坐在其他代码中但是它的所有注释都应该没问题

HTML

<form id="uploader" action="uploader.php" method="post" enctype="multipart/form-data">
<input id="file" type="file" name="uploader" value="" draggable="true">
<input name="submit" type="submit" class="submit" value="Upload">
<div class="result"></div>

JAVASCRIPT

$(function() {
// on form submit
$("#uploader").submit(function () {
var formdata = new FormData();
formdata.append("submit", true);
formdata.append("uploader", $("#file").prop('files'));
// prevent the form from uploading ***problem 1***
event.preventDefault();
    // send ajax request
    $.ajax({
      type: 'POST',
      url: 'uploader.php',
      data: formdata,
      dataType: 'json',
      beforeSend:function(){
        //This happens before your request is sent to uploader.php
        $('.result').html('Wait...');
      },
      success:function(data){
        // when the page responds
        // the page responds with a json object so its easy
        // ***problem 2***
        if (data.status) {
            // if the upload worked
            $('.result').html('success!');
        } else {
            // if the upload didn't work
            $('.result').html('failure!');
        }
      },
      error:function(){
        // you can remove the entire error if you want but i'd leave it in just incase
        // incase any javascript implodes
        $('.result').html('Oops something went wrong :/');
      }
    });
});

}）;

PHP

$json = array();
// query the upload
if (isset($_POST['submit'])) {
    // user uploaded do whatever with the data sent
    $json['status'] = true;
} else {
    // user didn't upload do whatever here too
    $json['status'] = false;
}
// echo our json and output as plain txt for the ajax datatype
echo json_encode($json);
// header plain text just incase jquery isn't smart enough to read between the html
header("Content-Type: text/plain");

任何问题，问题或调整只需评论

Answer 3

使用.ajaxSubmit（{}）

jQuery(document).ready(function() {

    $('#file').change(function() {

        $(".result").html('');
        $(".result").html('wait..');

        $("#uploader").ajaxSubmit({
            target: '.result',
            success: function() 
            {
                $('.result').hide().slideDown('fast');
                $('#uploader')[0].reset();
            },
        });

    });

});

谢谢大家。

Answer 4

由于您的表单操作是uploader.php所以，提交后页面将被重定向到uploader.php。所以你需要改变动作并使用ajax来更新div.result。检查这些链接一次。 http://www.formget.com/form-submission-using-ajax-php-and-javascript/ http://blog.teamtreehouse.com/uploading-files-ajax

jQuery如果更改输入值，则提交表单

4 个答案: