Question

我一直在试图弄清楚如何使用这个jQuery Form插件来上传文件，但它看不到我需要做的事情。

我有jQuery：

$('.upload-file').click(function()
{   
    $('#htmlForm').ajaxForm({ 
        // target identifies the element(s) to update with the server response 
        target: '#htmlExampleTarget', 

        // success identifies the function to invoke when the server response 
        // has been received; here we apply a fade-in effect to the new content 
        success: function(msg) { 
            $('#htmlExampleTarget').hide().html(msg).fadeIn('slow'); 
        } 
    }); 
});

HTML：

<div id="container">
    <form action="upload.php" method="post" id="htmlForm" enctype="multipart/form-data">
        <p>E-mail<br />
        <input type="text" name="email" id="email" /></p>
        <p>File<br />
        <input type="file" name="upload" id="upload" /></p>
        <p><input type="button" value="Submit" class="upload-file" /></p>
    </form>
</div>
<div id="htmlExampleTarget"></div>

jQuery表单插件包含在<script> <head></head>中的$(document).ready(function()和<input type="submit" value="Submit" class="upload-file" />，每当我点击按钮提交表单时，它都不会执行任何操作。虽然，如果我把它改为

upload.php

表单提交，但是当我希望它在<div id="htmlExampleTarget"></div>中输出HTML时它转到<script type="text/javascript" src="js/jquery.form.min.js"></script> <script type="text/javascript" src="js/jquery.1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.wmk.min.js"></script> <script type="text/javascript" src="js/uimg-core.js"></script>并且它不会这样做。

修改

{{1}}

Answer 1

.ajaxForm()用于设置 <form>，而不是提交，而是要在document.ready上运行

：

$(function() {
  $('#htmlForm').ajaxForm({ 
    target: '#htmlExampleTarget', 
    success: function(msg) { 
        $('#htmlExampleTarget').hide().html(msg).fadeIn('slow'); 
    } 
  });
});

然后执行将您的类型更改为submit按钮：

<input type="submit" value="Submit" class="upload-file" />

备选方案（虽然这不会优雅地降级）是这样调用.ajaxSubmit()：

$('.upload-file').click(function() {   
  $('#htmlForm').ajaxSubmit({ 
    target: '#htmlExampleTarget', 
    success: function(msg) { 
        $('#htmlExampleTarget').hide().html(msg).fadeIn('slow'); 
    }
  });
});

这实际上是立即提交形式，而不是将其设置为通过AJAX发送它的submit处理程序。

使用jQuery Form Plugin无法正常工作

1 个答案: