Question

如果我不使用下面的JavaScript，那么在用户上传并点击提交后页面会发生变化。 JavaScript确保页面保持不变。

问题

使用HTML和JavaScript页面保留，这就是我想要的，我得到单选按钮值。但上传不再有效。

问题

由于上传不再有效，我做错了什么？

当这项工作正常时，如果成功更改，我希望<div id="status">Click upload</div>更改为<div id="status">Upload complete</div>。

HTML

<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="jquery-2.1.3.min.js"></script>
    <script src="stuff.js"></script>
</head><body>

<form enctype="multipart/form-data" action="/cgi-bin/test.py" method="post">
<input type="radio" name="subject" value="red" /> Red
<input type="radio" name="subject" value="green" /> Green
<p>File: <input type="file" name="filename" /></p>
<p><input type="submit" value="Upload" /></p>
</form>
<br/><br/>
<div id="status">Click upload</div>
</body>
</html>

JS

$(document).ready(function(){
   var $form = $('form');
   $form.submit(function(){
      $.post($(this).attr('action'), $(this).serialize(), function(response){
            // do something here on success
      },'json');
      return false;
   });
});

Answer 1

您无法使用$.post上传ajax文件，您必须使用$.ajax（或原始XMLHttpRequest）和FormData对象。使用formdata对象作为$ .ajax中的数据参数，需要将contentType和processData设置为false

   var $form = $('form');
   $form.submit(function(){
      $.ajax({
          url: $(this).attr('action'), 
          type: $(this).attr('method'), 
          data: new FormData(this), 
          contentType: false,
          processData: false,
          success: function(response){
            // do something here on success
          },
          dataType: 'json'
      });
      return false;
   });

文件上传后可以留在页面上并收到OK消息吗？

1 个答案: