gouf
5/7/2015 - 2:29 AM

フォームでのファイルの選択と同時にアップロード開始(jQuery form plugin)

フォームでのファイルの選択と同時にアップロード開始(jQuery form plugin)

script.js
content_copyfile_download
$(document).ready(function () {
  $('#file').on('change', function () {
    $('#form').submit();
  });
  $('#form').on('submit', function (e) {
    e.preventDefault();
    $(this).ajaxSubmit();
  });
});
index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="http://malsup.github.com/jquery.form.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <form action="upload.php" method="POST" id="form" enctype="multipart/form-data">
    <input id="file" type="file" name="myfile" accept="image/png">
  </form>
</body>
</html>