Question

我有这个jquery代码提交表单但是它没有提交表单。我正在尝试使用这个jquery上传图像我已经写了php来上传它我的代码有什么问题？

$("#loader").hide();
$("#display").hide();
$("#display1").hide();
$("#submit").click(function(){
   $(".form_cont").hide();
   $("#loader").show();          
   $.ajax({
      type: "POST",
      url: "upload.php",
      dataType:"json",
      success: function (response) {
         if(response.status === "success") {
            $("#display").show();
         } else {
            $("#display1").show();
         }
      }
   });
   return false;        
});

Answer 1

可以尝试一下它会起作用。Demo Link

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Ajax file upload</title>
</head>

<body>    
<form action="upload.php" method="post" enctype="multipart/form-data" target="workFrame" >
<input type="file" name="file" />
<input type="submit" />
</form>
<iframe id="workFrame" src="about:blank" style="display:none;"></iframe>
<div id="image_disp"></div>

</body>
</html>
<script src="http://code.jquery.com/jquery-1.8.1.min.js" type="text/javascript"></script>
<script>
    $('form').on('submit', function () {
    //check if the form submission is valid, if so just let it submit
    //otherwise you could call `return false;` to stop the submission
});

$('#workFrame').on('load', function () {
            $('#image_disp').html('');
    //get the response from the server
    var response = $(this).contents().find('body').html();
            $('#image_disp').html('<img src="images/'+response+'"/>');
    //you can now access the server response in the `response` variable
    //this is the same as the success callback for a jQuery AJAX request
});

upload.php的

<?php 
  if(isset($_FILES['file']) && $_FILES['file'] != '')
  {
    if(isset($_FILES['file']['name']) && $_FILES['file']['name'] != '')
    {
            $image_name                     = explode(".",$_FILES['file']['name']);
            $image_type                     = array_pop($image_name);
            move_uploaded_file($_FILES['file']['tmp_name'],'images/upload.'.$image_type);
            echo 'upload.'.$image_type;
    }
  }
 ?>

Answer 2

使用Ajax尝试插件http://www.uploadify.com/

时无法上传文件

ajax表单没有提交

2 个答案: