如何使用提交上传文件而不重新加载页面答案

【问题标题】：How to upload files using submit without reloading the page如何使用提交上传文件而不重新加载页面
【发布时间】：2012-09-19 02:38:30
【问题描述】：

我正在使用提交按钮将文件上传到 tomcat 服务器，但我的问题是页面正在重新加载。如果我使用return false，则不会上传文件。我尝试使用按钮不上传文件。

我在客户端使用 jstl 和 javascript。

<form:form modelAttribute="uploadItem" name="frm" method="post"
    enctype="multipart/form-data">
    <fieldset>
        <legend>Upload File</legend>
        <table>
            <tr>
                <td><form:label for="fileData" path="fileData">File</form:label><br />
                </td>
                <td><form:input path="fileData" id="csv" type="file" /></td>
            </tr>
            <tr>
                <td><br /></td>
                <td><input id="subUpload" type="submit" value="Upload" /></td>
            </tr>
        </table>
    </fieldset>
</form:form>

对于我的 javascript：

$("#subUpload").click(function(e) {
    var image = document.getElementById("csv").value;
    if(image!=''){
        var checkimg = image.toLowerCase();
            if (!checkimg.match(/(\.CSV|\.csv)$/)){
                alert("Please enter  Image  File Extensions .jpg,.png,.jpeg");
                document.getElementById("image").focus();
                return false;
            }
    }
    return true;
    e.preventDefault();
});

我也使用了e.preventDefault()，但仍在重新加载。

请帮忙。

【问题讨论】：

你可以用!checkimg.match(/(\.CSV|\.csv)$/)代替!/\.csv$/i.test(checking)
@elclanrs 感谢您对正则表达式的建议。

标签： javascript jquery jstl submit form-submit

【解决方案1】：

如果您使用 iframe，这是可能的。

【讨论】：

你的意思是我要把表单包装在 iframe 中？
devrecipes.com/2009/07/13/… 我刚刚用谷歌搜索了这个，示例代码就在那里 - 我认为大多数文件上传者都使用 iframe 来处理这个问题而无需重新加载页面。一个非常受欢迎的上传者是github.com/blueimp/jQuery-File-Upload
您必须在 iframe 中构建表单并使用 javascript 发送，然后监听 iframe 的 onload 事件，您就知道何时提交了表单。

【解决方案2】：

return [optional value here]; 下和同一块中的任何内容都将被省略，因此您的e.preventDefault() 行将永远不会被执行。
return true 会告诉按钮行为正常，因此它会尝试执行常规操作
return false 和 e.preventDefault() 会做同样的事情（阻止表单提交文件），除了 return false 还阻止在文档中冒泡点击事件。

如果您想无缝发送文件，您可能需要使用 iframe 或使用 jQuery 发送数据，而不是让表单来处理该数据传输。

【讨论】：

【解决方案3】：

您可以使用uploadify类型的组件，它可以在提交表单之前上传文件

【讨论】：

【解决方案4】：

创建一个表单.. ex

<form name="form" method="post" enctype="multipart/form-data" action="test.php">
<input type="file" name="piture"  value="" onChange="window.document.forms['form'].submit();"/> </form>

test.php

  if(preg_match('/[.](jpg)|(gif)|(png)$/', $_FILES['picture']['name'])) {  
    $rand=rand(000000000,9999999);
    $fl_name = $_FILES['picture']['name'];
    $expld = explode('.', $fl_name);
    $extnnew = $expld[1];
    $filename = $rand.'.'.$extnnew;  
    $source = $_FILES['picture']['tmp_name'];
    $path_to_image_directory = "uploads/"; 
    if(!is_dir($path_to_image_directory)){
mkdir($path_to_image_directory, 0777);
chmod($path_to_image_directory, 0777);} 

    $target = $path_to_image_directory . $filename;  
    move_uploaded_file($source, $target);  
    $sql ="insert into picture values('','".$filename."','Now()')";
    mysql_query($sql) or die(mysql_error());

                        } 
header('Location:page.php');

【讨论】：

这根本没有回答 OP 的问题。