Question

我有这个HTML表单，目前有效。它允许您选择一个图像并将其上传到我的服务器（将其更改为最大高度或宽度为200），然后将图像显示在表单上以显示用户...

 <div id="preview"><img id="image" src="no-image.jpg" /></div>
 <form id="form" action="" method="post" enctype="multipart/form-data">
  <input id="uploadImage" type="file" accept="image/*" name="image" />
  <input id="button" type="submit" value="Upload">
 </form>
    <div id="err"></div>

这是Jquery ......

$(document).ready(function (e) {
 $("#form").on('submit',(function(e) {
  e.preventDefault();
  $.ajax({
         url: "upload-image-ajax.php",
   type: "POST",
   data:  new FormData(this),
   contentType: false,
         cache: false,
   processData:false,
   beforeSend : function()
   {
    //$("#preview").fadeOut();
    $("#err").fadeOut();
   },
   success: function(data) {
    if(data=='invalid file') {
     // invalid file format.
     $("#err").html("Invalid File !").fadeIn();
    } else {
     // view uploaded file.
     $("#image").attr('src', data);
    /* $("#preview").html(data).fadeIn();*/
     $("#form")[0].reset(); 
    }
      },
     error: function(e) 
      {
    $("#err").html(e).fadeIn();
      }          
    });
 }));
});

这是Jquery调用的PHP ......

<?php
require_once("includes/session.php");
$poolid=strtolower($_SESSION['poolid']); //lowercase it first so we get exact matches
$valid_extensions = array('jpeg', 'jpg', 'png', 'gif'); // valid extensions
$path = 'uploads/'; // upload directory

if(isset($_FILES['image']))
{
 $img = $_FILES['image']['name'];
 $tmp = $_FILES['image']['tmp_name'];

 // get uploaded file's extension
 $ext = strtolower(pathinfo($img, PATHINFO_EXTENSION));


//checking if image exists
    if(file_exists("uploads/".$poolid.".png")) {
         unlink("uploads/".$poolid.".png");
    }


 // check's valid format
 if(in_array($ext, $valid_extensions))  { 
        //re-size the image and make it a PNG before sending to server
        $final_image = $poolid. ".png";
        $path = $path.strtolower($final_image); 
        $size = getimagesize($tmp);
        $ratio = $size[0]/$size[1]; // width/height
        if( $ratio > 1) {
            $width = 200;
            $height = 200/$ratio;
        }
        else {
            $width = 200*$ratio;
            $height = 200;
        }
        $src = imagecreatefromstring(file_get_contents($tmp));
        $dst = imagecreatetruecolor($width,$height);
        imagecopyresampled($dst,$src,0,0,0,0,$width,$height,$size[0],$size[1]);
        imagedestroy($src);
        imagepng($dst, $path); // adjust format as needed
        imagedestroy($dst);

        echo $path ."?".rand(1,32000);


 } else {
      echo 'invalid file';
 }
}

?>

当这个表单本身在页面上时，这一切都可以正常工作。但是，我现在希望此图像上载区域成为更大形式的一部分。我尝试在另一个更大的表单中添加确切的HTML，正如您可能已经猜到的那样，当我点击＆＃34;上传＆＃34;要上传图片，它会尝试提交更大的表单。

我希望只是上传/调整图片大小而不提交更大的表单，将图像显示给用户并让他们继续填写其他表单输入。

我尝试删除表单元素（因此没有更多的表单标记嵌套），因此HTML被简化为此（注意我更改了输入类型＆＃34;提交＆＃34;现在为＆＃34 ;按钮＆＃34;）...

<div id="preview"><img id="image" src="no-image.jpg" /></div>

  <input id="uploadImage" type="file" accept="image/*" name="image" />
  <input id="button" type="submit" value="Upload">

    <div id="err"></div>

然后在Jquery中，我删除了.on提交的内容并将其替换为.click，因为我只想在点击时发生这种图像，而不是任何类型的提交。

$(document).ready(function () {
 $("#button").click(function(){
    var imageData = new FormData();
    imageData.append('image', $('#uploadImage')[0].files[0]);

    //Make ajax call here:
    $.ajax({
          url: 'upload-image-ajax.php',
          type: 'POST',
          processData: false, // important
          contentType: false, // important
          dataType : 'json',
          data: imageData,
          beforeSend : function()  {
            $("#err").fadeOut();
            alert('hi');
           },
       success: function(result) {
           alert('succ');
            if(result=='invalid file') {
             // invalid file format.
             $("#err").html("Invalid File !").fadeIn();
            } else {
             // view uploaded file.
             $("#image").attr('src', result);
            /* $("#preview").html(data).fadeIn();*/
             $("#form")[0].reset(); 
            }
          },
         error: function(result)  {
             alert(result.responseText);
              $("#err").html(result).fadeIn();
          }      
     });
   });

  });

同样，我正在阅读http://api.jquery.com/jquery.ajax/处的数据和数据类型设置，但我无法理解它的生命（没有JSON经验可能不会帮助我）。

有人可以对我的新Jquery的var imageData和.append部分说话，因为我认为必须在事情发生的地方。通常情况下，这似乎应该是非常容易实现的，因为我自己工作得很好，但它让我疯了。

按钮点击通过Ajax上传/调整图像大小，不提交

0 个答案: