如何使用提交上传文件而无需重新加载页面

Question

I am uploading files to the tomcat server using a submit button but my problem is that the page is reloading. If I use return false the file is not uploaded. I tried to use button its not uploading the files.

I am using jstl and javascript for my client side.

<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>

For my 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();
});

I also used e.preventDefault() but still its reloading.

Please help.

Answer 1

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

Answer 2

• Anything under and in the same block with return [optional value here]; will be omitted so your e.preventDefault() line will never get executed.
• return true will tell the button to behave normal, so it will try to take its regular action
• return false and e.preventDefault() will do the same thing (stop the form from submitting the file), except, return false additionally blocks bubbling the click event up the document.

If you want to send the file seamlessly you might want to use an iframe or send the data using jQuery instead of letting the form to handle that data transfer.

Answer 3

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

Answer 4

create a form.. 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');