Question

我有一个简单的上传图片表格......

 <form id="form" action="upload-image-ajax.php" method="post" enctype="multipart/form-data">
  <input id="uploadImage" type="file" accept="image/*" name="image" />
  <input id="button" type="submit" value="Upload">
 </form>

还有一些JS ......

$(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.
     $("#preview").html(data).fadeIn();
     $("#form")[0].reset(); 
    }
      },
     error: function(e) 
      {
    $("#err").html(e).fadeIn();
      }          
    });
 }));
});

PHP（upload-image-ajax.php）......

<?php
$valid_extensions = array('jpeg', 'jpg', 'png', 'gif', 'bmp'); // 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));

 // can upload same image using rand function
 $final_image = $_SESSION['poolid']. "." .$ext;

 // check's valid format
 if(in_array($ext, $valid_extensions))  {     
  $path = $path.strtolower($final_image); 
    //checking if file exsists, so we can overwrite it
    if(file_exists("uploads/$final_image")) unlink("uploads/$final_image");
      if(move_uploaded_file($tmp,$path)) {
       echo "<img src='$path' />";
      }
 } else {
      echo 'invalid file';
 }
}

?>

问题在于我喜欢这张图片上传＆＃34;表格＆＃34;包含在更大的形式中。但是当你点击＆＃34;上传＆＃34;它试图提交更大的整体表格。有没有办法编辑它可能只是一个按钮HTML元素（不是一个真正的提交按钮），当它被点击时，它执行相同的AJAX调用？

或者，由于真实的表单提交，AJAX是否需要发生？

仅供参考，当您上传图片时，它会发送到服务器并显示预览。所以我希望它成为更大形式的一部分与其他问题。这只是一个问题＆＃34;他们可以上传图像并在点击提交整体更大的表格之前查看预览。

Answer 1

按下按钮： <button id="button">Upload</button>

然后添加一个jquery事件监听器：

$("#button").click(function(){
    //Make ajax call here:
    $.ajax({
           url: upload-image-ajax.php,
           type: 'POST',
           contentType: '[Type of the content being returned]',
           data: [json object with data you're sending. i.e the photo file],
           success: function(){ callback function for when call completes}
     });
});

有更多选择可以做任何你想做的事情。查看http://api.jquery.com/jquery.ajax/了解更多信息。

Answer 2

要上传图片，请从button将按钮类型更改为submit并尝试以下操作：

$('#button').on('click', function() {
    var imageData = new FormData();
    imageData.append('name_of_picture_file', $('#uploadImage').prop('files')[0]);

    $.ajax({
      url: 'upload-image-ajax.php',
      type: 'POST',
      processData: false, // important
      contentType: false, // important
      dataType : 'json',
      data: imageData
    });
});

你的HTML应该是

<form id="largerForm" action="upload-larger-form.php" method="post">
  <input id="uploadImage" type="file" accept="image/*" name="image" />
  <input id="button" type="button" value="Upload">
</form>

Answer 3

我理解你的问题，我有两个主要要求。

您想要使用ajax从页面上传文件。
您想要向他们展示预览

对于第一个要求，您可以使用以下脚本。

 <html>
 <head>
     <script src="jquery-1.9.1.min.js"></script>

 </head>
 <body>
    <div id="main">
    <input type="file" id="file-select" multiple webkitdirectory/>

        <button id="btn-upload" ><span class="glyphicon glyphicon-upload">   </span> Upload</button>
    </div>

  <script>

    var fileSelect = document.getElementById('file-select');


    $(document).ready(function () {

        //Listen the upload button onclick
        $('#btn-upload').on("click",function(){

            event.preventDefault();

            //Check if contains files to upload

            if(fileSelect.files.length != 0){

                //Declare a FormData Object to pass the files
                var formData = new FormData();
                var fileCount = fileSelect.files.length;

                //Add the files from file-select into FormData                  
                for (var i = 0; i < fileCount; i++)
                {
                    var file = fileSelect.files[i];
                    formData.append("FileUpload", file);
                }

          //Make the ajax post request with FormData to your destination(eg:webservice or php page)

                $.ajax({
                    type: 'POST',
                    url: 'http://yourhost:port/something.php', 
                    data: formData,
                    contentType:false,
                    processData: false,
                    success: function (data) {
                        //Do the next process u want
                    },
                    error: function(err){
                        //Process the error
                    }

                });
            }

      });
    });
   </script>
 </body>
 </html>

当您单击上传按钮而不是表单提交时，上述文件上传功能将起作用。

对于第二个要求，请参阅此问题 Preview an image before it is uploaded

古德勒克。

你可以在简单的点击上运行AJAX，而不是真的＆＃34;提交＆＃34;？

3 个答案: