Question

我可以使用curl发送POST：
curl -X POST -F 'secret=supersecretkey' --form file=@galleta.jpg http://127.0.0.1:5000/

但我不知道如何使用AJAX和jQuery来完成同样的工作。

Answer 1

第1步：HTML和样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>HTML5 File API</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div id="main">
    <h1>Upload Your Images</h1>
    <form method="post" enctype="multipart/form-data"  action="upload.php">
      <input type="file" name="images" id="images" multiple />
      <button type="submit" id="btn">Upload Files!</button>
    </form>

    <div id="response"></div>
    <ul id="image-list">

    </ul>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script src="upload.js"></script>
</body>
</html>

CSS文件

body {
  font: 14px/1.5 helvetica-neue, helvetica, arial, san-serif;
  padding:10px;
}

h1 {
  margin-top:0;
}

#main {
  width: 300px;
  margin:auto;
  background: #ececec;
  padding: 20px;
  border: 1px solid #ccc;
}

#image-list {
  list-style:none;
  margin:0;
  padding:0;
}
#image-list li {
  background: #fff;
  border: 1px solid #ccc;
  text-align:center;
  padding:20px;
  margin-bottom:19px;
}
#image-list li img {
  width: 258px;
  vertical-align: middle;
  border:1px solid #474747;
}

第2步：PHP - upload.php

<?php

foreach ($_FILES["images"]["error"] as $key => $error) {
  if ($error == UPLOAD_ERR_OK) {
    $name = $_FILES["images"]["name"][$key];
    move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]);
  }
}

echo "<h2>Successfully Uploaded Images</h2>";

第3步：Javascript

(function () {
  var input = document.getElementById("images"),
      formdata = false;

  if (window.FormData) {
    formdata = new FormData();
    document.getElementById("btn").style.display = "none";
  }


}();


function showUploadedItem (source) {
  var list = document.getElementById("image-list"),
      li   = document.createElement("li"),
      img  = document.createElement("img");
    img.src = source;
    li.appendChild(img);
  list.appendChild(li);
}


if (input.addEventListener) {
  input.addEventListener("change", function (evt) {
    var i = 0, len = this.files.length, img, reader, file;

    document.getElementById("response").innerHTML = "Uploading . . ."

    for ( ; i < len; i++ ) {
      file = this.files[i];

      if (!!file.type.match(/image.*/)) {

      } 
    }

  }, false);
}


if ( window.FileReader ) {
  reader = new FileReader();
  reader.onloadend = function (e) { 
    showUploadedItem(e.target.result);
  };
  reader.readAsDataURL(file);
}
if (formdata) {
  formdata.append("images[]", file);
}

if (formdata) {
  $.ajax({
    url: "upload.php",
    type: "POST",
    data: formdata,
    processData: false,
    contentType: false,
    success: function (res) {
      document.getElementById("response").innerHTML = res; 
    }
  });
}

按照this tutorial说明如何实现这一目标。

如何使用AJAX发送图像？

1 个答案: